TechHack3 · TechHack3 · Oct 23, 2025 · Oct 22, 2025 · Oct 22, 2025 · Oct 22, 2025
diff --git a/project/typing game/index.html b/project/typing game/index.html
@@ -0,0 +1,45 @@
+<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>Speed Typer</title>
+  </head>
+  <body>
+    <button id="settings-btn" class="settings-btn">
+      <i class="fas fa-cog"></i>
+    </button>
+    <div class="settings" id="settings">
+      <form id="settings-form">
+        <label for="difficulty">Difficulty</label>
+        <select id="difficulty">
+          <option value="easy">Easy</option>
+          <option value="medium">Medium</option>
+          <option value="hard">Hard</option>
+        </select>
+      </form>
+    </div>
+    <div class="container">
+      <h2>👩‍💻 Speed Typer 👨‍💻</h2>
+      <small>Type the following:</small>
+      <h1 id="word"></h1>
+      <input
+        type="text"
+        id="text"
+        autocomplete="off"
+        placeholder="Type the word here..."
+      />
+      <p class="time-container">Time left: <span id="time">10s</span></p>
+      <p class="score-container">Score: <span id="score">0</span></p>
+      <div id="end-game-container" class="end-game-container"></div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/project/typing game/script.js b/project/typing game/script.js
@@ -0,0 +1,102 @@
+const word = document.getElementById("word");
+const text = document.getElementById("text");
+const scoreElement = document.getElementById("score");
+const timeElement = document.getElementById("time");
+const endgameElement = document.getElementById("end-game-container");
+const settingsButton = document.getElementById("settings-btn");
+const settings = document.getElementById("settings");
+const settingsForm = document.getElementById("settings-form");
+const difficultySelect = document.getElementById("difficulty");
+
+// List of words for game
+const words = [
+  "sigh",
+  "tense",
+  "airplane",
+  "ball",
+  "pies",
+  "juice",
+  "warlike",
+  "bad",
+  "north",
+  "dependent",
+  "steer",
+  "silver",
+  "highfalutin",
+  "superficial",
+  "quince",
+  "eight",
+  "feeble",
+  "admit",
+  "drag",
+  "loving",
+];
+
+let randomWord;
+let score = 0;
+let time = 10;
+// let difficulty = "medium";
+let difficulty =
+  localStorage.getItem("difficulty") !== null
+    ? localStorage.getItem("difficulty")
+    : "medium";
+
+const timeInterval = setInterval(updateTime, 1000);
+
+function getRandomWord() {
+  return words[Math.floor(Math.random() * words.length)];
+}
+
+function addWordToDom() {
+  randomWord = getRandomWord();
+  word.innerText = randomWord;
+}
+
+function updateScore() {
+  score++;
+  scoreElement.innerText = score;
+}
+
+function updateTime() {
+  time--;
+  timeElement.innerText = time + "s";
+  if (time === 0) {
+    clearInterval(timeInterval);
+    gameOver();
+  }
+}
+
+function gameOver() {
+  endgameElement.innerHTML = `
+    <h1>Time ran out</h1>
+    <p>Your final score is ${score}</p>
+    <button onclick="history.go(0)">Play Again</button>
+    `;
+  endgameElement.style.display = "flex";
+}
+
+text.addEventListener("input", (e) => {
+  const insertedText = e.target.value;
+  if (insertedText === randomWord) {
+    e.target.value = "";
+    addWordToDom();
+    updateScore();
+    if (difficulty === "hard") time += 2;
+    else if (difficulty === "medium") time += 3;
+    else time += 5;
+    updateTime();
+  }
+});
+
+settingsButton.addEventListener("click", () =>
+  settings.classList.toggle("hide")
+);
+settingsForm.addEventListener("change", (e) => {
+  difficulty = e.target.value;
+  localStorage.setItem("difficulty", difficulty);
+});
+
+// Init
+difficultySelect.value = difficulty;
+addWordToDom();
+text.focus();
diff --git a/project/typing game/style.css b/project/typing game/style.css
@@ -0,0 +1,146 @@
+@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
+
+:root {
+  --primary-color: #BBE0EF;
+  --secondary-color: #06599F;
+  --overlay-color: #1A1314;
+  --gradient-color: #F2F3F4;
+  --text-color: #F0F0ED;
+  --border-radius: 0.5rem;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--primary-color);
+  background-image: linear-gradient(315deg, var(--primary-color) 0%, var(--gradient-color) 100%)
+  ;
+  font-family: "Syne Mono", monospace;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+
+button {
+  cursor: pointer;
+  font-size: 14px;
+  font-family: inherit;
+  border-radius: var(--border-radius);
+  padding: 10px 15px;
+  border: none;
+}
+
+button:hover {
+  color: var(--text-color);
+  background-color: var(--overlay-color);
+}
+
+button:active {
+  transform: scale(0.98);
+}
+
+select {
+  width: 200px;
+  padding: 5px;
+  font-family: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border-radius: var(--border-radius);
+  background-color: var(--gradient-color);
+}
+
+select:focus,
+button:focus, input:focus {
+  outline: 0;
+}
+
+.settings-btn {
+  position: absolute;
+  bottom: 30px;
+  right: 30px;
+}
+
+.settings {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--overlay-color);
+  color: var(--text-color);
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(0);
+  transition: transform 0.3s ease-in-out;
+}
+
+.settings.hide {
+  transform: translateY(-100%)
+}
+
+.container {
+  background-color: var(--secondary-color);
+  padding: 20px;
+  border-radius: var(--border-radius);
+  box-shadow: 0 3px 5px var(--overlay-color);
+  color: var(--text-color);
+  position: relative;
+  text-align: center;
+  width: 500px;
+  max-width: 90vw;
+}
+
+h1 {
+  margin: 0;
+}
+
+h2 {
+  background-color: var(--overlay-color);
+  padding: 8px;
+  border-radius: var(--border-radius);
+  margin: 0 0 40px;
+}
+
+input {
+  border: 0;
+  border-radius: var(--border-radius);
+  font-size: 14px;
+  width: 300px;
+  padding: 12px 20px;
+  margin-top: 10px;
+}
+
+.score-container {
+  position: absolute;
+  top: 60px;
+  right: 20px;
+}
+
+.time-container {
+  position: absolute;
+  top: 60px;
+ left: 20px;
+}
+
+.end-game-container {
+  background-color: inherit;
+  border-radius: inherit;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}