code-boxx · July 3, 2023 02:13
diff --git a/0-JS-NUM-GUESS.MD b/0-JS-NUM-GUESS.MD
diff --git a/guess.css b/guess.css
 /* (A) WHOLE PAGE */
 * {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  font-size: 1em;
 }

 /* (B) WRAPPER */
 #guess-wrap {
  padding: 15px;
  max-width: 400px;
  border: 1px solid #efefef;
  background: #f2f2f2;
 }

 /* (C) FORM */
 #guess-wrap input {
  width: 100%;
  padding: 10px;
 }
 #guess-wrap input[type=number] {
  border: 1px solid #e1e1e1;
 }
 #guess-wrap input[type=submit] {
  font-weight: 700;
  border: 0;
  color: #fff;
  background: #9F2222;
  cursor: pointer;
 }
 #guess-txt {
  margin: 5px 0;
  display: flex;
  align-items: center;
 }
 #guess-tries, #guess-hint { padding: 10px; }
 #guess-tries { background: #e3e3e3; }
 #guess-hint { flex-grow: 1; }
 #guess-hint.high { background: #caddff; }
 #guess-hint.hit { background: #6fff0b; }
 #guess-hint.low { background: #ffc5b5; }
diff --git a/guess.html b/guess.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>
      Simple Javascript Number Guessing Game
    </title>
    <link href="guess.css" rel="stylesheet">
    <script src="guess.js"></script>
  </head>
  <body>
    <form id="guess-wrap" onsubmit="return false;">
      <input id="guess-num" type="number" required min="0" max="100" value="0">
      <div id="guess-txt">
        <div id="guess-tries">Guesses - <i>0</i></div>
        <div id="guess-hint"></div>
      </div>
      <input id="guess-btn" type="submit" value="Make a Guess (0 to 100)">
    </form>
  </body>
 </html>
diff --git a/guess.js b/guess.js
 var guess = {
  // (A) PROPERTIES
  // (A1) HTML ELEMENTS
  hform : null,  // number guess form
  hnum : null,   // number input field
  htries : null, // number of tries
  hhint : null,  // hint
  hbtn : null,   // guess/reset button

  // (A2) FLAGS
  min : 0,     // min allowed number
  max : 0,     // max allowed number
  jackpot : 0, // the correct number
  guesses : 0, // total nunmber of guesses made

  // (B) INITIALIZE
  init : () => {
    // (B1) GET HTML ELEMENTS
    guess.hform = document.getElementById("guess-wrap");
    guess.hnum = document.getElementById("guess-num");
    guess.htries = document.querySelector("#guess-tries i");
    guess.hhint = document.getElementById("guess-hint");
    guess.hbtn = document.getElementById("guess-btn");

    // (B2) MIN/MAX NUMBER
    guess.min = Math.ceil(guess.hnum.min);
    guess.max = Math.floor(guess.hnum.max);

    // (B3) RESET GAME
    guess.reset();
  },

  // (C) RESET GAME
  reset : () => {
    // (C1) RESET FLAGS
    guess.guesses = 0;
    // credits: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
    guess.jackpot = Math.floor(Math.random() * (guess.max - guess.min + 1)) + guess.min;
    console.log("Jackpot - " + guess.jackpot); // for the cheaters

    // (C2) RESET HTML
    guess.hnum.value = guess.min;
    guess.hnum.readOnly = false;
    guess.htries.innerHTML = 0;
    guess.hhint.innerHTML = "";
    guess.hhint.className = "";
    guess.hbtn.value = `Make a Guess (${guess.min} to ${guess.max})`;
    guess.hform.onsubmit = () => guess.check();
    return false;
  },

  // (D) MAKE A GUESS
  check : () => {
    // (D1) GET CHOSEN NUMBER + RESET CSS
    var num = +guess.hnum.value;
    guess.guesses++;
    guess.htries.innerHTML = guess.guesses;
    guess.hhint.classList.remove("high");
    guess.hhint.classList.remove("low");

    // (D2) HIT!
    if (num==guess.jackpot) {
      guess.hhint.innerHTML = "Nailed it!";
      guess.hhint.classList.add("hit");
      guess.hnum.readOnly = true;
      guess.hbtn.value = "Reset";
      guess.hform.onsubmit = () => guess.reset();
    }

    // (D3) MISS - GIVE HINTS
    else  {
      // (D3-1) HIGHER OR LOWER?
      let difference = num - guess.jackpot, text = "";
      if (difference>0) {
        text = "high";
        guess.hhint.classList.add("high");
      } else {
        text = "low";
        guess.hhint.classList.add("low");
      }

      // (D3-2) TOO MUCH OR CLOSE?
      difference = Math.abs(difference);
      if (difference>20) {
        text = "Too " + text;
      } else if (difference>=10) {
        text = "Slightly " + text;
      } else {
        text = "A little " + text;
      }

      // (D3-3) INTERFACE UPDATE
      guess.hhint.innerHTML = text;
    }
    return false;
  }
 };
 window.addEventListener("load", guess.init);
	/* (A) WHOLE PAGE */
	* {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	font-size: 1em;
	}

	/* (B) WRAPPER */
	#guess-wrap {
	padding: 15px;
	max-width: 400px;
	border: 1px solid #efefef;
	background: #f2f2f2;
	}

	/* (C) FORM */
	#guess-wrap input {
	width: 100%;
	padding: 10px;
	}
	#guess-wrap input[type=number] {
	border: 1px solid #e1e1e1;
	}
	#guess-wrap input[type=submit] {
	font-weight: 700;
	border: 0;
	color: #fff;
	background: #9F2222;
	cursor: pointer;
	}
	#guess-txt {
	margin: 5px 0;
	display: flex;
	align-items: center;
	}
	#guess-tries, #guess-hint { padding: 10px; }
	#guess-tries { background: #e3e3e3; }
	#guess-hint { flex-grow: 1; }
	#guess-hint.high { background: #caddff; }
	#guess-hint.hit { background: #6fff0b; }
	#guess-hint.low { background: #ffc5b5; }
	<!DOCTYPE html>
	<html>
	<head>
	<title>
	Simple Javascript Number Guessing Game
	</title>
	<link href="guess.css" rel="stylesheet">
	<script src="guess.js"></script>
	</head>
	<body>
	<form id="guess-wrap" onsubmit="return false;">
	<input id="guess-num" type="number" required min="0" max="100" value="0">
	<div id="guess-txt">
	<div id="guess-tries">Guesses - <i>0</i></div>
	<div id="guess-hint"></div>
	</div>
	<input id="guess-btn" type="submit" value="Make a Guess (0 to 100)">
	</form>
	</body>
	</html>
	var guess = {
	// (A) PROPERTIES
	// (A1) HTML ELEMENTS
	hform : null, // number guess form
	hnum : null, // number input field
	htries : null, // number of tries
	hhint : null, // hint
	hbtn : null, // guess/reset button

	// (A2) FLAGS
	min : 0, // min allowed number
	max : 0, // max allowed number
	jackpot : 0, // the correct number
	guesses : 0, // total nunmber of guesses made

	// (B) INITIALIZE
	init : () => {
	// (B1) GET HTML ELEMENTS
	guess.hform = document.getElementById("guess-wrap");
	guess.hnum = document.getElementById("guess-num");
	guess.htries = document.querySelector("#guess-tries i");
	guess.hhint = document.getElementById("guess-hint");
	guess.hbtn = document.getElementById("guess-btn");

	// (B2) MIN/MAX NUMBER
	guess.min = Math.ceil(guess.hnum.min);
	guess.max = Math.floor(guess.hnum.max);

	// (B3) RESET GAME
	guess.reset();
	},

	// (C) RESET GAME
	reset : () => {
	// (C1) RESET FLAGS
	guess.guesses = 0;
	// credits: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
	guess.jackpot = Math.floor(Math.random() * (guess.max - guess.min + 1)) + guess.min;
	console.log("Jackpot - " + guess.jackpot); // for the cheaters

	// (C2) RESET HTML
	guess.hnum.value = guess.min;
	guess.hnum.readOnly = false;
	guess.htries.innerHTML = 0;
	guess.hhint.innerHTML = "";
	guess.hhint.className = "";
	guess.hbtn.value = `Make a Guess (${guess.min} to ${guess.max})`;
	guess.hform.onsubmit = () => guess.check();
	return false;
	},

	// (D) MAKE A GUESS
	check : () => {
	// (D1) GET CHOSEN NUMBER + RESET CSS
	var num = +guess.hnum.value;
	guess.guesses++;
	guess.htries.innerHTML = guess.guesses;
	guess.hhint.classList.remove("high");
	guess.hhint.classList.remove("low");

	// (D2) HIT!
	if (num==guess.jackpot) {
	guess.hhint.innerHTML = "Nailed it!";
	guess.hhint.classList.add("hit");
	guess.hnum.readOnly = true;
	guess.hbtn.value = "Reset";
	guess.hform.onsubmit = () => guess.reset();
	}

	// (D3) MISS - GIVE HINTS
	else {
	// (D3-1) HIGHER OR LOWER?
	let difference = num - guess.jackpot, text = "";
	if (difference>0) {
	text = "high";
	guess.hhint.classList.add("high");
	} else {
	text = "low";
	guess.hhint.classList.add("low");
	}

	// (D3-2) TOO MUCH OR CLOSE?
	difference = Math.abs(difference);
	if (difference>20) {
	text = "Too " + text;
	} else if (difference>=10) {
	text = "Slightly " + text;
	} else {
	text = "A little " + text;
	}

	// (D3-3) INTERFACE UPDATE
	guess.hhint.innerHTML = text;
	}
	return false;
	}
	};
	window.addEventListener("load", guess.init);