number-guessing-exercise

index.html

<p id="message">Guess a number between 1 and 10</p>
<form id="input">
  <input type="text" name="number" id="guess">
  <button id="submit">Submit</button>
</form>
<button id="replay" class="hidden">Replay</button>

# Number-guessing

- Write the `init` function to set up an event listener on the form. The event listener should pass the value of the input element to the `check` function.
- Write the `check` function to accept a value from the event listener and check it against the `targetNumber`. 
  - If the values match, call the `showWin` function
  - If the values do not match, call the `showError` function. 
  - If the values do not match, and the player has made more than five guesses, call the `showLoss` function. 
- Write the `showWin` function to remove the form and any error message, and show a message telling the player they win.
- Write the `showError` function to show a message telling the player their guess is incorrect.
- Write the `showLoss` function to remove the form and show a message telling the player they lose.

number-guessing-exercise.markdown

number-guessing-exercise

Forked from Rebecca Murphey's Pen number-guessing-exercise.

Forked from Rebecca Murphey's Pen number-guessing-exercise.

A Pen by Nathan Bingham on CodePen.

License.

script.js

var attempts = 1;
let targetNumber = Math.floor(Math.random() * 10) + 1;

var submit = document.getElementById('submit'),
    guess = document.getElementById('guess'),
    input = document.getElementById('input'),
    message = document.getElementById('message'),
    replay = document.getElementById('replay');

function init () {
  submit.onclick= function(e){
    e.preventDefault();
    check(guess);
  }
}

function check (input) {
  if (input.value == targetNumber) {
    showWin(targetNumber);
  } else if (input.value != targetNumber && attempts < 5) {
    showError();
  } else {
    showLoss(targetNumber);
  }
}

function showWin (target) {
  message.innerHTML = target+' You win!';
  message.className = 'green';
  allowReplay();
}

function showError () {
  console.log('Try Again', attempts);
  message.innerHTML = attempts +' attempts. Try again! Guess a number between 1 and 10';
  attempts++;
}

function showLoss (target) {
  console.log('You lose! ' + target);
  message.innerHTML = target + ' You lose!';
  message.className = 'red';
  allowReplay();

}
function allowReplay(){
  input.className += 'hidden';
  guess.value = '';
  replay.className = '';
  replay.onclick = function(e){
    e.preventDefault();
    message.className = '';
    input.className = '';
    message.innerHTML = 'Guess a number between 1 and 10';
    attempts = 1;
    targetNumber = Math.floor(Math.random() * 10) + 1;
  }
}

init();

style.css

body {
  font-family: Helvetica;
}

#replay {
}

.hidden {
  display: none;
}

.red {
  color: #9d0000;
}

.green {
  color: #009d00;
}