Assignment 3

by Kristy Bond

HTML

<html>

  <body>
    <h1>
Number Guessing Program
</h1>

    <p>
      Enter a number between 1 and 1000:
      <input type='number' id='number' value='500' min='1' max='1000'>
      <input type='button' id='guess' value='Guess' onclick='BoundaryCheck()'>
    </p>

    <p id='primary'>

    </p>

    <p id='secondary'>

    </p>

    <div id='actual'>

    </div>
  </body>

</html>

CSS

body {
  background: red;
  background: linear-gradient(red, orange, green, blue, indigo, violet);
}

h1 {
  color: Black;
  text-align: center;
  font-family: arial;
  font-size: 30px;
}

p {
  color: white;
  text-align: center;
  font-family: arial;
  font-size: 20px;
}

JavaScript

var arrayList = [];
var output = "";
var cpuGuesses = 0;
var numberToGuess = document.getElementById('number').value;

function ResetDisplay() {
  output = "";
  cpuGuesses = 0;
  arrayList = [];
  document.getElementById('primary').innerHTML = output;
  document.getElementById('secondary').innerHTML = output;
}

function CreateArray() {
  ResetDisplay();
  for (var a = 0; a < 1000; a++) {
    arrayList[a] = a + 1;
  }
}


function BoundaryCheck() {

  numberToGuess = document.getElementById('number').value;

  if (numberToGuess < 1) {
    output = "Sorry, The number you selected is too low.  It must be between 1 and 1000.";
    document.getElementById('primary').innerHTML = output;
  } else if (numberToGuess > 1000) {
    output = "Sorry, The number you selected is too high.  It must be between 1 and 1000.";
    document.getElementById('primary').innerHTML = output;
  } else {

    document.getElementById('actual').innerHTML = output;

    MatchTheNumber();
  }

}

function MatchTheNumber() {
  var b = 0;
  var min = 1;
  var max = 1000;
  var cpuNumber = 500;

  CreateArray();


  while (cpuNumber != numberToGuess) {
    if (numberToGuess < cpuNumber) {
      output += "I guessed " + cpuNumber + ".  I guessed too high. <br>";
      max = cpuNumber;
      cpuNumber = Math.round((max / 2));
      cpuGuesses++;
    } else if (numberToGuess > cpuNumber) {
      output += "Is your number  " + cpuNumber + ".  No, I guessed too low. <br>";
      min = cpuNumber;
      cpuNumber = (Math.round((min + max) / 2));
      cpuGuesses++;
    }
  }

  output += "Is your number " + cpuNumber + ".  Yes it is!!";
  cpuGuesses++;

  document.getElementById('primary').innerHTML = "CPU took " + cpuGuesses + " guesses total.";
  document.getElementById('secondary').innerHTML = output;


}