From 5936e9dee81a4abb169be2c70955fa119ff7aebd Mon Sep 17 00:00:00 2001 From: Ayush Pandey <60148537+ayushpandey830@users.noreply.github.com> Date: Wed, 12 Oct 2022 01:31:52 +0530 Subject: [PATCH] Fun Typing test game added --- typing-game/index.html | 60 ++++++++++++++++++++++++ typing-game/script.js | 87 ++++++++++++++++++++++++++++++++++ typing-game/style.css | 103 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 250 insertions(+) create mode 100644 typing-game/index.html create mode 100644 typing-game/script.js create mode 100644 typing-game/style.css diff --git a/typing-game/index.html b/typing-game/index.html new file mode 100644 index 00000000..cbe250e0 --- /dev/null +++ b/typing-game/index.html @@ -0,0 +1,60 @@ + + + + + + + + + + typing game + + + + + + + + +
+
+
+ + +
+
+
+ +
+

✍️Lets test your typing speed

+ 💻type the following word +

+ +

⏲️time left : 10s

+

+ 💥score: 0 +

+
+
+ + + diff --git a/typing-game/script.js b/typing-game/script.js new file mode 100644 index 00000000..a9582489 --- /dev/null +++ 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 = ` +

Time ran out

+

Your final score is ${score}

+ + `; + 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 new file mode 100644 index 00000000..655aaa4a --- /dev/null +++ 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; +}