Merge pull request #2453 from ankit071105/master

Added Speaking Number and Guessing Number Game
Sulagna-Dutta-Roy · Jul 19, 2024 · 1355057 · 1355057
2 parents b134c79 + 4c61021
commit 1355057
Show file tree

Hide file tree

Showing 5 changed files with 190 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Speaking Number Guessings/index.html b/Speaking Number Guessings/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="manifest" href="manifest.json">
+
+    <title>Speak Number Guess</title>
+  </head>
+  <body>
+    <img
+      src="https://i.ibb.co/Kb6SkTm/8399350-mic-microphone-audio-icon.png"
+      alt="Speak"
+    />
+    <h1>Guess a Number Between 1 - 100</h1>
+    <h2>Speak the number into your microphone</h2>
+
+    <div id="msg" class="msg"></div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Speaking Number Guessings/manifest.json b/Speaking Number Guessings/manifest.json
@@ -0,0 +1,26 @@
+{
+    "name": "Speak Number Guess",
+    "short_name": "Num Guess",
+    "description": "A game where you guess a number between 1 and 100 by speaking it into your microphone.",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#27273d",
+    "theme_color": "#27273d",
+    "orientation": "portrait-primary",
+    "icons": [
+      {
+        "src": "https://i.ibb.co/Kb6SkTm/8399350-mic-microphone-audio-icon.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "https://i.ibb.co/Kb6SkTm/8399350-mic-microphone-audio-icon.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ],
+    "permissions": [
+      "microphone"
+    ]
+  }
+
diff --git a/Speaking Number Guessings/script.js b/Speaking Number Guessings/script.js
@@ -0,0 +1,56 @@
+const messageElement = document.getElementById("msg");
+
+const randomNumber = getRandomNumber();
+
+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);
+});
diff --git a/Speaking Number Guessings/style.css b/Speaking Number Guessings/style.css
@@ -0,0 +1,85 @@
+@import url("https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap");
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: #27273d
+    url("https://images.unsplash.com/photo-1552749412-091909ed9f82?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")
+    no-repeat center center/cover;
+  color: rgba(255, 255, 255, 0.87);
+  font-family: "Recursive", sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+
+body::after {
+  content: "";
+  background-color: rgba(0, 0, 0, 0.7);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+body * {
+  z-index: 1;
+}
+
+img {
+  width: 8rem;
+  height: 8rem;
+}
+
+h1,
+h2 {
+  margin-bottom: 0;
+}
+
+h2 {
+  font-size: 1.17rem;
+}
+
+p {
+  line-height: 1.5;
+  margin: 0;
+}
+
+.play-again {
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border: 0;
+  background-color: #f4f4f4;
+  border-radius: 5px;
+  margin-top: 2rem;
+}
+
+.play-again:hover {
+  background-color: #27273d;
+  color: #f4f4f4;
+}
+
+.play-again:focus {
+  outline: none;
+}
+
+.msg {
+  font-size: 1.5rem;
+  margin-top: 2.5rem;
+}
+
+.box {
+  border: 1px solid #dedede;
+  display: inline-block;
+  font-size: 1.875rem;
+  margin: 1.25rem;
+  padding: 0.625rem;
+}