JSFiddle - React, Tailwind, and code Playground

by zazagalaxy

HTML

<!-- Begin input div -->
<div class="divBG">

  <!-- Create user input content-->
  <table border="0" align="center" height="150px">
    <tr height="30%">
      <td>
        Guess a number from 1 to 1000
        <br />
        <input type="number" id="numGuess" min="0" max="1000" value="50" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" class="btnstyle" value="Guess!" id="btnGuess" />
      </td>
    </tr>
    <tr height="20%">
      <td>
        
        <div id="message">

        </div>
      </td>
    </tr>
  </table>

</div>

<br />

<div class="divBG">
  <br />
  <div class="container" id="output">

  </div>
</div>

CSS

body {
  font-family: Sans-serif;
  text-shadow: 1px 1px #008CBA;
}

input[type=number] {
  width: 75px;
}




.divBG {
  color: #FFF;
  background-color: #999;
  border: 2px solid #008CBA;
  border-radius: 10px;
  width: 350px;
  padding: 2%;
  margin: auto;
  overflow: auto;
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.48)
}

tr {
  text-align: center;
}




.nopad {
  margin: 0;
  padding: 0;
}




.btnmargins {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}




.btnstyle {
  background-color: #008CBA;
  color: #FFF;
  border-radius: 10px;
  width: 150px;
  padding: 10px 24px;
  -webkit-transition-duration: 0.3s;
  /* Safari */
  transition-duration: 0.3s;
  outline: none;
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), 0 9px 25px 0 rgba(0, 0, 0, 0.19);
}



.btnstyle:hover {
  border: 2px solid #008CBA;
  background-color: #FFF;
  color: #008CBA;
  font-weight: bold;
}



.btnstyle:active {
  -webkit-transition-duration: 0.0s;
 
  transition-duration: 0.0s;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.48), 0 5px 12px 0 rgba(0, 0, 0, 0.38);
  transform: translateY(4px);
  border: 3px solid #008CBA;
}

JavaScript

// Create Variables
var numArray = [];
var guesses = 0;
var d = "";

// Check for click event of button "btnGuess" and execute function "guess" on click
document.getElementById("btnGuess").onclick = function() {
  guess();
};

function guess() {
  var guessNum = document.getElementById("numGuess").value;
  var num1;
  var num2 = 500;

  clearDisplay();

  // Try catch to verify user entered a number between 1 and 1000
  try {
    if (guessNum < 1 || guessNum > 1000) {
      throw "Please enter a number from 1 to 1000";
    }
  } catch (err) {
    document.getElementById("message").innerHTML = err;
    return;
  }

  // Check if the users number is greater than, less than, or equal to the start value
  if (guessNum > num2) {
    num1 = 1000;
  } else if (guessNum < num2) {
    num1 = 0;
  } else if (guessNum == num2) {
    document.getElementById("output").innerHTML = "Guessed " + num2 + " - Got it!";
    guesses = 1;
    document.getElementById("message").innerHTML = "It took " + guesses + " guesses to match your number.";
    return;
  }

  // Create 1000 element array
  createArray();

  // Declare var midpoint and calculate it
  var midpoint;

  // Use do while loop to keep guessing number until the midpoint calculated matches the users number
  do {
    midpoint = Math.round((num1 + num2) / 2); //algorithm to calculate midpoint
    guesses++;

    // Parent If statement determines where the midpoint is in relation to 500
    if (guessNum < 500) {
      // Nested if statment to set the midpoint to the upper bound or lower bound
      if (midpoint < guessNum) {
        d += "<div>Guessed " + midpoint + " - Too low</div>";
        num1 = midpoint; // Lower bound = midpoint if midpoint is less than users number
      } else if (midpoint > guessNum) {
        d += "<div>Guessed " + midpoint + " - Too high</div>";
        num2 = midpoint; // Upper bound = midpoint if midpoint is greater than users number
      } else if (midpoint == guessNum) {
        d +=...