SakshiCodrops

JAVASCRIPT JOURNEY - DAY 18

sakshi jain's photo
sakshi jain
·

4 min read

CHAPTER 18 :PROJECT-> NUMBER GUESSER

#teamtanayejschallenge

So lets start, open your favorite VS Code and name folder : Number Guesser with an index.html and app.js file.

Lets check UI of that :

Capture.PNG

This is indeed a very simple UI , with a boiler plate of HTML and CDN paths of Bootstrap and Skeleton CSS. The DOM structure is itself very simple.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<title>Number Guesser </title>
</head>
<body>
<div class=”container”>
<h1>Number Guesser</h1>
<div id=”game”>
<p>Guess the Number between <span class=”min-num”></span> and <span class=”max-num”> </span></p>
<input type=”number” id=”guess-input” placeholder=”Enter your guess…”>
<input type=”submit” value=”submit” id=”guess-btn”>
<p class=”message”></p>
</div>
<div id=”info”>
<a href=”https://www.google.com/" target=”_blank”> <h3 class=”btn btn-danger”>Understand the Code!</h3> </a>
</div>
</div>
<script src=”app.js”></script>
</body>
</html>

I hope , seeing the UI , you can easily work on its HTML code . Lets jump straight into app.js file.

First Checkout the rules of games:

GAME FUNCTION:

  • Player must guess a number between a min and max
  • Player gets a certain amount of guesses
  • Notify player of guesses remaining
  • Notify the player of the correct answer if loose
  • Let player choose to play again

Game must have some initializing values:

js.PNG

As I always say, grab your UI elements accordingly.

js1.png

Now we need to assign our const minNum and maxNum their minimum and maximum values to avoid rigidness in UI , so that you can change your min and max values in between any range.

Capture.PNG

Now we need to add particular event listeners while clicking on submit button:

js.PNG

So first we parse our input value into an integer and the will check if guess is not NaN and less than min and greater than max.

Once all this is checked , we will enter into some conditions , if guessed no is equal to winning number .. then game is won else your guesses will be reduced by 1 and once it got 0 , the game will be over else display the error message of no of guesses are left..

Once the guessesLeft===0 , we call gameOver() function:

Capture.PNG

Once the gameOver () is called , we give the feature of play again and add the Btn value and classname equal to Play Again.

So whenever the btn value changes to Play Again after the gameOver() function called, we call an eventlistener to it to reload the window again.

js.PNG

The winning number will be generated randomly using function:

js1.png

So this is how , a fun game is created interactively and dynamically.

Thankyou! Happy Learning.

JavaScript