+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ Posted on January 5, 2006
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et urna sit amet dui gravida dictum.
+ +Posted on June 24, 2006
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et urna sit amet dui gravida dictum.
+ + +© 2024 My Blog. All rights reserved.
+Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!
+ + +Type the word below as quickly as you can! Press **Enter** after typing.
+ + + +Score: 0
+ + + + diff --git a/3-typing-game/my-typing-game/script.js b/3-typing-game/my-typing-game/script.js new file mode 100644 index 0000000..9316e7d --- /dev/null +++ b/3-typing-game/my-typing-game/script.js @@ -0,0 +1,70 @@ +const words = [ + "apple", "banana", "grape", "orange", "cherry", + "mango", "peach", "pear", "plum", "kiwi", "lemon", "lime" +]; + +let currentWord = ""; +let score = 0; +let wordCount = 0; +let startTime; +let endTime; + +const currentWordElement = document.getElementById("current-word"); +const typedValueElement = document.getElementById("typed-value"); +const messageElement = document.getElementById("message"); +const scoreElement = document.getElementById("score"); +const startButton = document.getElementById("start"); + +startButton.addEventListener("click", startGame); + +function startGame() { + score = 0; + wordCount = 0; + scoreElement.innerText = score; + messageElement.innerText = ""; + typedValueElement.value = ""; + typedValueElement.focus(); + startTime = new Date().getTime(); + setNewWord(); + + typedValueElement.addEventListener("keyup", checkInput); +} + +function setNewWord() { + if (wordCount >= 10) { + endGame(); + return; + } + + currentWord = words[Math.floor(Math.random() * words.length)]; + currentWordElement.innerText = currentWord; + wordCount++; +} + +function checkInput(event) { + if (event.key === "Enter") { + const typedValue = typedValueElement.value.trim(); + + if (typedValue === currentWord) { + + score++; + scoreElement.innerText = score; + messageElement.innerText = "Correct! Well done."; + messageElement.style.color = "green"; + typedValueElement.value = ""; + setNewWord(); + } else { + + messageElement.innerText = "Incorrect! Try again."; + messageElement.style.color = "red"; + } + } +} + +function endGame() { + endTime = new Date().getTime(); + totalTime = (wordCount/((endTime-startTime)/(1000 * 60))).toFixed(3);; + currentWordElement.innerText = ""; + messageElement.innerText = `Congratulations! Your final score is ${score} and your speed is ${totalTime}WPM`; + typedValueElement.removeEventListener("keyup", checkInput); +} diff --git a/3-typing-game/my-typing-game/style.css b/3-typing-game/my-typing-game/style.css new file mode 100644 index 0000000..ac63d05 --- /dev/null +++ b/3-typing-game/my-typing-game/style.css @@ -0,0 +1,37 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + margin: 0; + padding: 0; +} + +#current-word { + font-size: xx-large; + color: red; + margin: 20px; +} + +#typed-value { + padding: 10px; + font-size: 18px; + width: 300px; + margin: 10px auto; +} + +#error { + color: red; +} + +#message { + font-size: 1.2em; + margin: 10px; +} + +button { + padding: 10px 20px; + font-size: 16px; + background-color: red; + color: white; + border-radius: 10%; + border-radius: 5px; +}