diff --git a/3-typing-game/index.html b/3-typing-game/index.html new file mode 100644 index 0000000..2e88ad8 --- /dev/null +++ b/3-typing-game/index.html @@ -0,0 +1,21 @@ + + + + + + Typing Speed Challenge + + + +
+

Typing Speed Challenge

+

Type the word below as fast as you can. Press Enter to submit, Escape to reset.

+

Current Word: Start

+ +

Score: 0

+

Time: 0 ms

+

+
+ + + \ No newline at end of file diff --git a/3-typing-game/script.js b/3-typing-game/script.js new file mode 100644 index 0000000..16f8807 --- /dev/null +++ b/3-typing-game/script.js @@ -0,0 +1,80 @@ +document.addEventListener('DOMContentLoaded', function() { + // DOM elements + const wordDisplay = document.getElementById('word'); + const inputField = document.getElementById('input'); + const scoreDisplay = document.getElementById('score'); + const timeDisplay = document.getElementById('time'); + const feedbackDisplay = document.getElementById('feedback'); + + // Game state + let score = 0; + let startTime = null; + const words = ['hello', 'world', 'javascript', 'coding', 'web', 'developer', 'learn', 'fun', 'game', 'type']; + let currentWord = ''; + + // Function to get random word + function getRandomWord() { + return words[Math.floor(Math.random() * words.length)]; + } + + // Function to start new round + function newRound() { + currentWord = getRandomWord(); + wordDisplay.textContent = currentWord; + inputField.value = ''; + feedbackDisplay.textContent = ''; + startTime = Date.now(); + inputField.focus(); + } + + // Function to reset game + function resetGame() { + score = 0; + scoreDisplay.textContent = score; + timeDisplay.textContent = '0'; + newRound(); + } + + // Initialize game + newRound(); + + // Keyboard event listener + document.addEventListener('keydown', function(event) { + // Handle Enter key to submit + if (event.key === 'Enter') { + event.preventDefault(); + const userInput = inputField.value.trim().toLowerCase(); + if (userInput === currentWord) { + const timeTaken = Date.now() - startTime; + score++; + scoreDisplay.textContent = score; + timeDisplay.textContent = timeTaken; + feedbackDisplay.textContent = `Correct! Time: ${timeTaken}ms`; + feedbackDisplay.style.color = '#28a745'; + newRound(); + } else { + feedbackDisplay.textContent = 'Incorrect, try again!'; + feedbackDisplay.style.color = '#d9534f'; + inputField.value = ''; + inputField.focus(); + } + } + // Handle Escape key to reset + else if (event.key === 'Escape') { + resetGame(); + feedbackDisplay.textContent = 'Game reset!'; + feedbackDisplay.style.color = '#007bff'; + } + }); + + // Real-time input validation (optional feedback) + inputField.addEventListener('input', function() { + const userInput = inputField.value.trim().toLowerCase(); + if (userInput && !currentWord.startsWith(userInput)) { + feedbackDisplay.textContent = 'Typing mismatch, check your input!'; + feedbackDisplay.style.color = '#d9534f'; + } else { + feedbackDisplay.textContent = ''; + } + }); +}); \ No newline at end of file diff --git a/3-typing-game/style.css b/3-typing-game/style.css new file mode 100644 index 0000000..9a86b97 --- /dev/null +++ b/3-typing-game/style.css @@ -0,0 +1,45 @@ +body { + font-family: Arial, sans-serif; + background-color: #9c603d; + margin: 0; + padding: 20px; +} + +.container { + max-width: 500px; + margin: 0 auto; + background: rgb(9, 82, 116); + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; +} + +h1 { + color: #333; +} + +input { + padding: 10px; + width: 80%; + margin: 10px 0; + border: 1px solid #633f2b; + border-radius: 4px; + font-size: 16px; +} + +#word { + font-size: 24px; + font-weight: bold; + color: #722222; +} + +#score, #time { + font-weight: bold; + color: #333; +} + +#feedback { + color: #d9534f; + min-height: 20px; +} \ No newline at end of file