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