Fun Typing test game added

codemistic · Oct 11, 2022 · 5936e9d · 5936e9d
1 parent ab26c88
commit 5936e9d
Show file tree

Hide file tree

Showing 3 changed files with 250 additions and 0 deletions.
diff --git a/typing-game/index.html b/typing-game/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>typing game</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+     <!--[if lt IE 7]>
+      <p class="browsehappy">
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="#">upgrade your browser</a> to improve your experience.
+      </p>
+    <![endif]-->
+    <button id="setting-btn" class="setting-btn">
+      <i class="fas fa-cog"></i>
+    </button>
+    <div id="setting" class="setting">
+      <form action="" id="setting-form">
+        <div class="">
+          <label for="difficulty">🛠️LEVEL</label>
+          <select name="" id="difficulty">
+            <option value="easy">easy</option>
+            <option value="medium">medium</option>
+            <option value="hard">hard</option>
+          </select>
+        </div>
+      </form>
+    </div>
+
+    <div class="container">
+      <h2>✍️Lets test your typing speed</h2>
+      <small>💻type the following word</small>
+      <h1 id="word"></h1>
+      <input
+        type="text"
+        id="text"
+        autocomplete="off"
+        placeholder="please type the word here"
+      />
+      <p class="time-container">⏲️time left : <span id="time">10s</span></p>
+      <p id="score-container" 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" async defer></script>
+  </body>
+</html>
diff --git a/typing-game/script.js b/typing-game/script.js
@@ -0,0 +1,87 @@
+const word = document.getElementById("word");
+const text = document.getElementById("text");
+const scoreEl = document.getElementById("score");
+const timeEl = document.getElementById("time");
+const endgameEl = document.getElementById("end-game-container");
+const settingBtn = document.getElementById("setting-btn");
+const settings = document.getElementById("setting");
+const settingsForm = document.getElementById("setting-form");
+const difficultySelect = document.getElementById("difficulty");
+
+//list of words
+const words = ["apple", "steer", "eight", "drags", "power","computer","laborious","ordinary","session","luxury","hitman","indian"];
+
+//init word
+let randomWord;
+let score = 0;
+let time = 10;
+let difficulty =
+  localStorage.getItem("difficulty") !== null
+    ? localStorage.getItem("difficulty")
+    : "medium";
+//set diff select value
+difficultySelect.value = difficulty;
+//focus on text
+text.focus();
+//start count down
+const timeInterval = setInterval(updateTime, 1000);
+//generate random word
+function getRandomWord() {
+  return words[Math.floor(Math.random() * words.length)];
+}
+//add word to dom
+function addWordToDOM() {
+  randomWord = getRandomWord();
+  word.innerHTML = randomWord;
+}
+addWordToDOM();
+//update score
+function updateScore() {
+  score++;
+  scoreEl.innerHTML = score;
+}
+
+//update time
+function updateTime() {
+  time--;
+  timeEl.innerHTML = time + "s";
+  if (time === 0) {
+    clearInterval(timeInterval);
+    gameOver();
+  }
+}
+//game over
+function gameOver() {
+  endgameEl.innerHTML = `
+        <h1>Time ran out</h1>
+        <p>Your final score is ${score}</p>
+        <button onclick="location.reload()">Restart</button>
+    `;
+  endgameEl.style.display = "flex";
+}
+//event
+text.addEventListener("input", (e) => {
+  const insetedText = e.target.value;
+  if (insetedText === randomWord) {
+    addWordToDOM();
+    updateScore();
+    //clear
+    e.target.value = "";
+    if (difficulty === "hard") {
+      time += 2;
+    } else if (difficulty === "medium") {
+      time += 3;
+    } else {
+      time += 4;
+    }
+
+    updateTime();
+  }
+});
+//setting
+settingBtn.addEventListener("click", () => settings.classList.toggle("hide"));
+//setting select
+settingsForm.addEventListener("change", (e) => {
+  difficulty = e.target.value;
+  localStorage.setItem("difficulty", difficulty);
+});
diff --git a/typing-game/style.css b/typing-game/style.css
@@ -0,0 +1,103 @@
+@import url("https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap");
+* {
+  box-sizing: border-box;
+}
+body {
+  font-family: "IM Fell DW Pica SC", serif;
+  background-color: rgb(226, 111, 82);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  min-height: 100vh;
+}
+button {
+  cursor: pointer;
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 5px 15px;
+}
+select {
+  width: 200px;
+  padding: 5px;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border-radius: 0;
+  background-color: #f7f6fd;
+}
+select:focus,
+button:focus {
+  outline: none;
+}
+.setting-btn {
+  position: absolute;
+  bottom: 30px;
+  left: 30px;
+}
+.setting {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  color: #080611;
+  background-color: #8dd0e9;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(0);
+  transition: transform 0.3s ease-in-out;
+}
+.setting.hide {
+  transform: translateY(-100%);
+}
+.container {
+  background-color:#dacebc;
+  padding: 20px;
+  border-radius: 15px;
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
+  position: relative;
+  text-align: center;
+  width: 500px;
+}
+h2 {
+  background-color: #c0e99b;
+  padding: 8px;
+  border-radius: 5px;
+  margin: 0 0 40px;
+}
+h1 {
+  margin: 0;
+}
+input {
+  border: 0;
+  border-radius: 5px;
+  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;
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}