docs(add docs):

boommanpro · Apr 5, 2024 · 41ccead · 41ccead
1 parent 79a10ac
commit 41ccead
Show file tree

Hide file tree

Showing 2 changed files with 304 additions and 0 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Speeddy</title>
+
+    <style>
+      /* Reset */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      /* Body Styling */
+      body {
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        line-height: 2;
+        height: 100vh;
+        background-color: #32313a;
+      }
+
+      /* Header */
+      #header {
+        background-color: #53565c;
+        color: #fff;
+        text-align: center;
+        font-size: 1.25rem;
+        text-transform: uppercase;
+        letter-spacing: 15px;
+        padding: 0.25rem;
+      }
+
+      /* Main Body Of Game */
+      #main-body {
+        color: #fff;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        padding: 2rem;
+      }
+
+      #main-body .content {
+        display: flex;
+        justify-self: center;
+        align-items: center;
+        flex-direction: column;
+        flex-wrap: wrap;
+        line-height: 4rem;
+      }
+
+      #main-body .content > h2 {
+        font-size: 3rem;
+        font-weight: normal;
+      }
+
+      .text-color {
+        color: aqua;
+        font-weight: bold;
+      }
+
+      #main-body .content > input {
+        width: 350px;
+        height: 35px;
+        border-radius: 4px;
+        font-size: large;
+        margin-top: 1rem;
+        padding-left: 10px;
+      }
+
+      #main-body .content > h4 {
+        margin-bottom: 0.25rem;
+      }
+
+      /* Time and Score Countdown */
+      .countdown {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        padding: 1.25rem;
+        width: 300px;
+        margin-bottom: 1rem;
+      }
+
+      /* Instructions */
+      .instructions {
+        background-color: #53565c;
+        max-width: 350px;
+        border-radius: 4px;
+      }
+
+      .instruction > h4 {
+        font-size: 1.5rem;
+      }
+    </style>
+  </head>
+
+  <!-- Page Title -->
+  <body>
+    <div id="header">
+      <h2>Speeddy</h2>
+    </div>
+
+    <!-- Main Body Of Game -->
+    <div id="main-body">
+      <div class="content">
+        <p>
+          Type The Given Word Within
+          <span class="text-color" id="seconds">5</span> Seconds
+        </p>
+        <h2 id="current-word">Joke</h2>
+        <input
+          type="text"
+          placeholder="Start typing..."
+          id="word-input"
+          autofocus
+        />
+        <h4 id="message"></h4>
+      </div>
+
+      <!-- Time and Score Countdown -->
+      <div class="countdown">
+        <p>Time Left: <span id="time">0</span></p>
+        <p>Score: <span id="score">0</span></p>
+      </div>
+
+      <!-- Instructions -->
+      <div class="instructions">
+        <h4>Instruction</h4>
+        <p>
+          Type each word in the given amount of seconds to score. To play again,
+          just type the current word. Your score will reset.
+        </p>
+      </div>
+    </div>
+
+    <!-- Javascript -->
+    <script src="/main.js"></script>
+  </body>
+</html>
diff --git a/docs/main.js b/docs/main.js
@@ -0,0 +1,161 @@
+window.addEventListener("load", init);
+
+// Globals Variables
+
+// Availale Levels
+const levels = {
+  beginner: 10,
+  easy: 5,
+  medium: 3,
+  hard: 1,
+};
+
+// To change level
+const currentLevel = levels.easy;
+
+let time = currentLevel;
+let score = 0;
+let isPlaying;
+
+// DOM Elements
+const wordInput = document.querySelector("#word-input");
+const currentWord = document.querySelector("#current-word");
+const scoreDisplay = document.querySelector("#score");
+const timeDisplay = document.querySelector("#time");
+const message = document.querySelector("#message");
+const seconds = document.querySelector("#seconds");
+
+// Words Array
+const words = [
+  "hat",
+  "river",
+  "lucky",
+  "statue",
+  "stubborn",
+  "cocktail",
+  "runaway",
+  "goodbye",
+  "operation",
+  "operator",
+  "revolver",
+  "var",
+  "const",
+  "function",
+  "higher",
+  "isTrue",
+  "querySelector",
+  "querySelectorAll",
+  "document",
+  "container",
+  "echo",
+  "interdinominationalism",
+  "System.Out.Println",
+  "education",
+  "span",
+  "div",
+  "addEventListener",
+  "innerHTML",
+  "init",
+  "knowledge",
+  "breakthrough",
+  "Technology",
+  "dictionary",
+  "console.log",
+  "println",
+  "siblings",
+  "investigate",
+  "return",
+  "horrendous",
+  "symptoms",
+  "establishment",
+  "hero",
+  "joke",
+  "developer",
+  "javascript",
+  "nutrition",
+  "@override",
+  "fun main",
+  "getElementById",
+  "class",
+  "[email protected]",
+  "WithGodinc",
+  "laughter",
+  "magic",
+  "master",
+  "space",
+  "definition",
+  "setInterval",
+];
+
+// Initialize Game
+function init() {
+  // Show number of seconds in UI
+  seconds.innerHTML = currentLevel;
+  // Load word from array
+  showWord(words);
+  // Start matching on word input
+  wordInput.addEventListener("input", startMatch);
+  // Call countdown every second
+  setInterval(countdown, 1000);
+  // Check game status
+  setInterval(checkStatus, 50);
+}
+
+// Start Match
+function startMatch() {
+  if (matchWords()) {
+    isPlaying = true;
+    time = currentLevel + 1;
+    showWord(words);
+    wordInput.value = "";
+    score++;
+  }
+
+  // If score is -1, display 0
+  if (score === -1) {
+    scoreDisplay.innerHTML = 0;
+  } else {
+    scoreDisplay.innerHTML = score;
+  }
+}
+
+// Match Currentword to wordInput
+function matchWords() {
+  if (wordInput.value === currentWord.innerHTML) {
+    message.innerHTML = "Correct!!!";
+    return true;
+  } else {
+    message.innerHTML = "";
+    return false;
+  }
+}
+
+// Pick & show random word
+function showWord(words) {
+  // Generate random array index
+  const randindex = Math.floor(Math.random() * words.length);
+  // Output random word
+  currentWord.innerHTML = words[randindex];
+}
+
+// Countdown timer
+function countdown() {
+  // Make sure time is not run out
+  if (time > 0) {
+    // Decrement
+    time--;
+  } else if (time === 0) {
+    // Game is Over
+    isPlaying = false;
+  }
+  // Show time
+  timeDisplay.innerHTML = time;
+}
+
+// Check game status
+function checkStatus() {
+  if (!isPlaying && time === 0) {
+    message.innerHTML = "Game Over!!!";
+    score = -1;
+  }
+}