From 8694156b69ef0c23481cfd85841a51676467137c Mon Sep 17 00:00:00 2001
From: amberprice-stack <amber.price@saintleo.edu>
Date: Tue, 14 Jan 2020 18:02:11 -0500
Subject: [PATCH] amberprice-stack

---
 .../number-guessing-game.html                 | 110 ++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 code/games/number-guessing-game/number-guessing-game.html
diff --git a/code/games/number-guessing-game/number-guessing-game.html b/code/games/number-guessing-game/number-guessing-game.html
new file mode 100644
index 0000000..22a10b7
--- /dev/null
+++ b/code/games/number-guessing-game/number-guessing-game.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <style>
+        .replay {
+            padding: 5px;
+        }
+
+        button {
+            display: block;
+            padding: 10px;
+            min-width: 100px;
+            font-size: 1.4em;
+            font-family: sans-serif;
+            border-radius: 15px;
+            margin-top: 5px;
+        }
+
+        input {
+            font-size: 1.5em;
+        }
+
+        .message {
+            margin: 10px 0;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="output">
+        <div class="message"></div>
+        <input type="number">
+        <button>Guess</button>
+    </div>
+    <script>
+        let game = {
+            "min": 1
+            , "max": 10
+        };
+        document.addEventListener("DOMContentLoaded", function () {
+            game.output = document.querySelector(".output");
+            game.message = document.querySelector(".message");
+            game.guessInput = document.querySelector("input");
+            game.btn = document.querySelector("button");
+            game.btn.addEventListener("click", guessValue);
+            init();
+        })
+
+        function guessValue() {
+            if (game.btn.classList.contains("replay")) {
+                init();
+                game.btn.innerHTML = "Guess";
+                game.guessInput.style.display = "block";
+                game.btn.classList.remove("replay");
+            }
+            else {
+                game.guesses++;
+                let tempGuess = game.guessInput.value;
+                game.guessInput.value = "";
+                tempGuess = parseInt(tempGuess);
+                if (isNaN(tempGuess)) {
+                    message(`Please enter only Digits`, "red");
+                }
+                else if (tempGuess === game.num) {
+                    message(`Correct guess of ${game.num} in ${game.guesses} guesses`, "green");
+                    gameOver();
+                }
+                else {
+                    let holder = tempGuess > game.num ? {
+                        "c": "blue"
+                        , "m": "Was Lower"
+                    } : {
+                        "c": "purple"
+                        , "m": "Was Higher"
+                    };
+                    message(holder.m, holder.c);
+                }
+            }
+        }
+
+        function gameOver() {
+            game.btn.innerHTML = "Restart Game";
+            game.guessInput.style.display = "none";
+            game.btn.classList.add("replay");
+            game.max += 5;
+        }
+
+        function init() {
+            game.guesses = 0;
+            game.num = ranNumber(game.min, game.max);
+            let tempMes = `Guess a number from ${game.min} to ${game.max}`;
+            message(tempMes, "blue");
+        }
+
+        function ranNumber(min, max) {
+            return Math.floor(Math.random() * (max - min + 1) + min);
+        }
+
+        function message(mes, clr) {
+            game.message.innerHTML = mes;
+            game.message.style.color = clr || "black";
+            game.guessInput.style.borderColor = clr || "black";
+            game.btn.style.backgroundColor = clr || "black";
+            game.btn.style.color = "white";
+        }
+    </script>
+</body>
+
+</html>
