JSFiddle - React, Tailwind, and code Playground

by Robert Mochel

HTML

<div id="wrapper">
<h2><font face="monospace" >Assignment 3</font></h2>
  <br/><font face="monospace" >
	Go ahead and enter a number from 1 and 1000:
	</font> 
  <br/>
  <br/>
  <input type="textbox" id="number" value="" />
  <br/><br/>
  <input type="button" id="start" value="Start" onClick="findNumber(); hide('start')" />
  <br/>
  <div id="output"></div>
</div>

CSS

#wrapper {
    background: #fafcd4;
    border-radius: 25px;
    border: 5px solid #1f42b7;
    padding: 20px; 
    width: 400px;
    height: 100%;
}

#number {
    background: #d4fcfb;
    border-radius: 25px;
    border: 2px solid #92e881;
    padding: 5px; 
    width: 75px;
    height: 4px;
}

#start {
    background: #d4fcfb;
    border-radius: 25px;
    border: 2px solid #92e881;
    padding: 5px; 
    width: 90px;
    height: 100;
}

#output {
	font-family: monospace;
}

JavaScript

//Assignment 3
var d = ""; // Output 
var t = 0; // Counter
var min = 0; // Variable for minimum value
var max = 1000; // Variable for maximum value
var g = max/2; // Variable jalf of max

function findNumber() {
  var x = parseInt(document.getElementById("number").value);
  if (x < 1 || x > max) {
    d = "Only numbers between 1 and " + max + " are allowed ... press Run the fiddle again."
    displayGuess();
  } else {

    if (g < x) {
      t++;
      d += "We guessed " + g + " which is too low!<br/>";
      displayGuess();
      min = g;
      g = Math.round((min + max) / 2);
      findNumber();
    } else if (g > x) {
      t++;
      d += "We guessed " + g + " which is too high!<br/>";
      displayGuess();
      max = g;
      g = Math.round((min + max) / 2);
      findNumber();
    } else if (g == x) {
      t++;
      d += "<br/>Your number is " + g + ".<br/> It took us " + t + " tries.<br/><br/>" +
        "Press Run the fiddle if you want us to guess another number.";
      displayGuess();
      t = "0";
    } else {
      d += "Press Run the fiddle and enter a number for us to guess.<br/>";
      displayGuess();
    }
  }
}

function displayGuess() {
  document.getElementById("output").innerHTML = d;
}


function hide(target) {
  document.getElementById(target).style.display = 'none';

}