Javascript Notes

gistfile1.txt

8/11 loan calculator
classofparent.insertBefore(what to put in, what to put it before)
classofparent is the parent that holds "what to put it before". So you need to have the parent and the child element that it should go before

8/11 number guessing game


  //Assign UI min and max
  this will set the variables min to the text in the span
    HTML
    <span class="min-num"></span>

    Javascript
      minNum.textContent = min;
      maxNum.textContent = max;

  //inputs are alwasy string so need to parse them to get them to be a number
      <input type="number" id='guess-input' placeholder="enter your guess...">
      let guess = parseInt(guessInput.value)

  
  //Validate inputs. Use method isNan() to check if it is not a number. Don't do guess === Nan because that doesn't work.
      let guess = parseInt(guessInput.value)
      if(isNaN(guess) || guess < min || guess > max){
        setMessage(`Please enter a number between ${min} and ${max}`)
      }


  //dynamic css, and using functions, can be done by passing an extra paramenter with the css(or variable if the css is extensive)
      if(isNaN(guess) || guess < min || guess > max){
      setMessage(`Please enter a number between ${min} and ${max}`, 'red') // added red to pas to function
    }
    })

    // set error message and color dynamically. can reuse function because color is passed dynamically
    function setMessage(msg , color){
      message.style.color = color
      message.textContent = msg
    }

  //disable input
    guessInput.disabled = true

  //changing things green
  guessInput.style.borderColor = 'green';

  //can reload page with
  //sometimes need to make event mousedown. In this cause, the mousedown on a win will make add the play-again class, and the mouseup event will trigger it. 
    game.addEventListener('mousedown', function(e){
      if(e.target.className === 'play-again'){
     windown.location.reload();
    }
  })