Game

Guess Number

You are Right / Wrong

Score:20

  • In this Page Javascript Math.random() will Generate Every time Random number 0.01234 to 0.09999.
  • Multiplying Math.random()*10 it will generate 0.0123 to 9.1234.
  • Math.floor() method used to accepts a numeric value as an argument, rounds down and returns the largest integer less than or equal to the provided number. For instance, if we provide "5.6" as an argument to this method, it returns "5" as a result.


Example:

  1. Math.random()
  2. Math.random()*10
  3. Math.floor(5.6)
  4. Math.floor(Math.random()*10)
  5. Math.floor(Math.random()*10)+1

Expected Outputs:

  1. 0.01234 to 0.91234
  2. 0.1234 to 9.1234
  3. 5
  4. 1 to 9
  5. 1 to 10

  • In Backend Javascript Math.floor(Math.random()*10)+1 will generate 1 to 10 in every time system refresh.
  • Will try to Guess the random number in given input box.
  • If You will Guess the number You will receive an Pop-up alert Message.


    • Source Code:

    HTML 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Game</title>
  
</head>
<body class="fullp">
<div class="bigcont">
<div class="bigbox">
<div class="game">
<h1  class="sivam">Guess Number</h1>
    
<label class="lletter" for="number">Enter number:</label>
<input type="number" id="guessnumbers" placeholder="Enter Number 1 to 10" minlength="2" pattern="[1-10]{1,2}" required >
<button class="bton" onclick="check()">Check</button>
  
<p id="result">You are Right / Wrong</p>
  
<p id="score"> Score:20<p>
  </div>
  </div>
  <div>
 </body>   
</html>
    JAVASCRIPT 
    var erssiva=document.getElementById("guessnumbers")
var ers=document.getElementById("result")
var randomnumber=Math.floor(Math.random()*10)+1
var totalscore=20
var score=document.getElementById("score")
function check()
{
  var enterednumber=guessnumbers.value
  if(randomnumber==enterednumber)
  {
    console.log("right")
    ers.textContent="Right"
    alert("You Won! Your Score is:"  +totalscore)
    ers.style.color="green"
  }
  else
  {
    totalscore=totalscore-1
    score.textContent="Score:"+totalscore
    console.log("wrong")
    ers.textContent="Wrong"
    ers.style.color="red"
  }
}
    CSS 
    .game{
     border: 1px solid #ddd;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     height:auto;
     width:250px;
     margin: 30px auto;
     padding: 20px;
     overflow:auto;
}
 .lletter{
     display:block;
     border-radius:20px;
     padding:5px;
     padding-top:15px;
     font-family:Source Code Pro;
}
 #guessnumbers{
     display:block;
     width: 240px;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 15px;
     margin-top:10px;
     font-family:Source Code Pro;
}
 .bton{
     width: 245px;
     margin-top:20px;
     padding: 10px;
     border: none;
     border-radius: 5px;
     background-color: red;
     color: #fff;
     cursor: pointer;
     font-family:Source Code Pro;
}
 #result{
     padding-top:30px;
     font-family:Source Code Pro;
}
 #score{
     padding-top:15px;
     font-family:Source Code Pro;
}
 .sivam{
     text-align:center;
     font-family:Source Code Pro;
}
 .fullp{
     font-family:Source Code Pro;
}
 .bigbox{
     overflow:auto;
}




    Every pain gives a lesson and Every lesson changes a person



    ----Thanks to visit----




    Published by:

    ERS Siva Blogger


    பிறந்து சிறந்த மொழிகளில் சிறந்தே!

    பிறந்த மொழி என் தாய் மொழி தமிழ்!


    தாய் மொழி தமிழ் என்று சொல்வதை விட மொழிகளின் தாய் தமிழ் என்று திமிருடுடன் சொல்வோம்! || வாழ்க தமிழ் ! வளர்க தமிழ்!

Post a Comment

إرسال تعليق

أحدث أقدم

About Us

Every pain gives a lesson and Every lesson changes a person