Random Guess

In this example below you will see how to do a Random Guess with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Brandonmh55, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Brandonmh55 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Random Guess</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <input id="textfield" class="input" placeholder="00" maxlength="3" onkeydown="guess()"></input>
<button onclick="guess()">Guess</button>
<div id="result">Take a wild guess between 1-100.</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Brandonmh55/random-guess-aBagmp */
.input {
  text-align: center;
  background-color: rgb(20, 100, 10);
  border-style: none;
  height: 150px;
  width: 200px;
  font-size: 150px;
  color: #fff;
}

body {
  background-color: rgb(100, 100, 100);
}

button {
  background-color: rgb(30, 30, 100);
  color: #fff;
  /*   border-style: none; */
  border-width: 3px;
  height: 150px;
  width: 100px;
  border-color: #fff;
  font-size: 25px;
  position: absolute;
}

div {
  color: #fff;
  font-size: 22px;
  border-style: solid;
  width: 300px;
}

/*Downloaded from https://www.codeseek.co/Brandonmh55/random-guess-aBagmp */
var randomnumber = 33;
var trys = 0;
var guess = function() {
  trys++;
  var input = document.getElementById("textfield").value;
  if (randomnumber > input) {
    document.getElementById("result").innerHTML = "Too Low";
  } else if (randomnumber < input) {
    document.getElementById("result").innerHTML = "Too High";
  } else {

  document.getElementById("result").innerHTML = "Correct! It took you " + trys + " trys!";
  }
}

Comments