add finished speak number guessing game

Author: solygambas

78-speak number guessing game/script.js

@@ -0,0 +1,58 @@
+const messageElement = document.getElementById("msg");
+
+const randomNumber = getRandomNumber();
+
+console.log(randomNumber);
+
+window.SpeechRecognition =
+  window.SpeechRecognition || window.webkitSpeechRecognition;
+let recognition = new window.SpeechRecognition();
+recognition.start();
+
+function getRandomNumber() {
+  return Math.floor(Math.random() * 100) + 1;
+}
+
+function onSpeak(event) {
+  const message = event.results[0][0].transcript;
+  writeMessage(message);
+  checkNumber(message);
+}
+
+function writeMessage(message) {
+  messageElement.innerHTML = `
+    <div>You said: </div>
+    <span class="box">${message}</span>
+  `;
+}
+
+function checkNumber(message) {
+  const number = +message;
+  if (Number.isNaN(number)) {
+    messageElement.innerHTML += "<div>That is not a valid number</div>";
+    return;
+  }
+  if (number > 100 || number < 1) {
+    messageElement.innerHTML += "<div>Number must be between 1 and 100</div>";
+    return;
+  }
+  if (number === randomNumber) {
+    document.body.innerHTML = `
+          <h2>Congrats! You have guessed the number! <br><br>
+          It was ${number}</h2>
+          <button class="play-again" id="play-again">Play Again</button>
+        `;
+  } else if (number > randomNumber) {
+    messageElement.innerHTML += "<div>GO LOWER</div>";
+  } else {
+    messageElement.innerHTML += "<div>GO HIGHER</div>";
+  }
+}
+
+// Event Listeners
+recognition.addEventListener("result", onSpeak);
+recognition.addEventListener("end", () => recognition.start());
+
+document.body.addEventListener("click", (e) => {
+  if (e.target.id == "play-again") history.go(0);
+});

78-speak number guessing game/style.css

@@ -54,11 +54,21 @@ p {
 }
 
 .play-again {
+  cursor: pointer;
   padding: 0.5rem 1rem;
   border: 0;
   background-color: #f4f4f4;
   border-radius: 5px;
-  margin-top: 0.625rem;
+  margin-top: 2rem;
+}
+
+.play-again:hover {
+  background-color: #27273d;
+  color: #f4f4f4;
+}
+
+.play-again:focus {
+  outline: none;
 }
 
 .msg {