Guessing game

by janjhnsn

HTML

<div class="board"></div>
<input/><a href="#" class="submit">Submit</a>

CSS

.board {
    border:1px dotted black;
    width:300px;
    height:250px;
    overflow-y:scroll;
}
p {
    margin:5px 0;
    padding:0;
}

JavaScript

$(function() {
   
    startGame = function(){
      var board = $('.board'),
       submit = $('.submit'),
       input = $('input'),
       number = Math.floor(Math.random() * (20 - 1) + 1),
       guessesTaken = 0;
  
board.append('<p>I am thinking of a number between 1 and 20.</p>');
board.append('<p>Take a guess.</p>');
  
        submit.unbind('click');
        submit.on('click', function() {
            var guess = input.val();
            
            input.val('');
            input.focus();
            
            if(guess.length <= 0) {
                board.append('<p>Please enter a value.</p>');
            }
            else if (guess < number) {
                board.append('<p>Your guess is too low.('+guess+')</p>');
            }
            else if (guess > number) {
                board.append('<p>Your guess is too high.('+guess+')</p>');
            }
            else if (guess == number) {
                board.append('<p>We have a winner!</p>');
                board.append('<p>Do you want to play again? (y/n)</p>');
            }
            
            if(guess == 'y' || guess == 'yes' || guess == 'restart') {
                board.html('');
                startGame();
            }
            
            board.scrollTop(board.height());
        });  
    };
    
    startGame();
});