amfoss · Bhargav-ram333 · Oct 15, 2025 · Oct 15, 2025 · Oct 15, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/TYPING GAME/.DS_Store b/TYPING GAME/.DS_Store
diff --git a/TYPING GAME/index.html b/TYPING GAME/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Typing Game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <h1>Typing Game!</h1>
+  <p>Practice your typing skills with a quote from Sherlock Holmes. Click <strong>Start</strong> to begin!</p>
+
+  <p id="quote"></p> <!-- This will display the quote -->
+  <p id="message"></p> <!-- This will display status messages -->
+
+  <div>
+    <input type="text" id="typed-value" disabled />
+    <button id="start">Start</button>
+  </div>
+
+  <p id="high-score">Best Time: --</p> <!-- Display high score -->
+
+  <!-- Modal Dialog -->
+  <div id="modal" class="modal">
+    <div class="modal-content">
+      <p id="modal-message"></p>
+      <button id="close-modal">OK</button>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/TYPING GAME/script.js b/TYPING GAME/script.js
@@ -0,0 +1,101 @@
+// qquotes for the game
+const quotes = [
+  'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+  'There is nothing more deceptive than an obvious fact.',
+  'I never make exceptions. An exception disproves the rule.',
+  'What one man can invent another can discover.',
+  'Nothing clears up a case so much as stating it to another person.',
+  'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+
+let words = [];
+let wordIndex = 0;
+let startTime = null;
+
+// dom Elements
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+const startButton = document.getElementById('start');
+const modal = document.getElementById('modal');
+const modalMessage = document.getElementById('modal-message');
+const closeModal = document.getElementById('close-modal');
+const highScoreElement = document.getElementById('high-score');
+
+// stores and displays the highest score using local storage 
+let highScore = localStorage.getItem('highScore');
+if (highScore) {
+  highScoreElement.innerText = `Best Time: ${highScore} sec`;
+}
+
+// starts the game event
+startButton.addEventListener('click', () => {
+  // picks a random quote
+  const quoteIndex = Math.floor(Math.random() * quotes.length);
+  const quote = quotes[quoteIndex];
+
+  // resets the game variables 
+  words = quote.split(' ');
+  wordIndex = 0;
+
+  // displays quote with highlighting
+  quoteElement.innerHTML = words.map(word => `<span>${word} </span>`).join('');
+  quoteElement.childNodes[0].className = 'highlight';
+
+  // clear the previous messages
+  messageElement.innerText = '';
+
+  // this reenables input field when we reload 
+  typedValueElement.disabled = false;
+  typedValueElement.value = '';
+  typedValueElement.focus();
+
+  // Start timer
+  startTime = new Date().getTime();
+});
+
+// Typing event
+typedValueElement.addEventListener('input', () => {
+  const currentWord = words[wordIndex];
+  const typedValue = typedValueElement.value;
+
+  if (typedValue === currentWord && wordIndex === words.length - 1) {
+      // Game completed
+      const elapsedTime = (new Date().getTime() - startTime) / 1000;
+      messageElement.innerText = `You finished in ${elapsedTime.toFixed(2)} seconds!`;
+
+      // if we break our own high score it gets updated 
+      if (!highScore || elapsedTime < parseFloat(highScore)) {
+          localStorage.setItem('highScore', elapsedTime.toFixed(2));
+          highScoreElement.innerText = `Best Time: ${elapsedTime.toFixed(2)} sec`;
+      }
+
+      // after completing the typing we cant type further , input is disabled 
+      typedValueElement.disabled = true;  
+      // popup message 
+      modalMessage.innerText = `Congratulations! You finished in ${elapsedTime.toFixed(2)} seconds.`;
+      modal.style.display = 'block';
+
+  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+      // Correct word typed
+      typedValueElement.value = '';
+      wordIndex++;
+
+      // reseting highlights 
+      for (const wordElement of quoteElement.childNodes) {
+          wordElement.className = '';
+      }
+      quoteElement.childNodes[wordIndex].className = 'highlight';
+
+  } else if (currentWord.startsWith(typedValue)) {
+      typedValueElement.className = '';
+  } else {
+      // for wrong inputs
+      typedValueElement.className = 'error';
+  }
+});
+
+// closed popup on clicking ok 
+closeModal.addEventListener('click', () => {
+  modal.style.display = 'none';
+});
diff --git a/TYPING GAME/style.css b/TYPING GAME/style.css
@@ -0,0 +1,96 @@
+/* General Styling */
+body {
+  background: linear-gradient(to right, #4c4e4f, #1a99a0);
+  text-align: center;
+  font-family: 'Arial', sans-serif;
+  color: rgb(100, 52, 52);
+  padding: 20px;
+}
+
+/* Heading */
+h1 {
+  font-size: 50px;
+  color: #a69c46;
+}
+
+/* Quote Text */
+p {
+  font-size: 24px;
+}
+
+/* Quote Highlight */
+.highlight {
+  background-color: yellow;
+  font-weight: bold;
+}
+
+/* Error Highlight */
+.error {
+  background-color: red;
+  color: white;
+}
+
+/* Input & Button Styling */
+input {
+  font-size: 20px;
+  padding: 10px;
+  width: 300px;
+  border: 3px solid #ffeb3b;
+  border-radius: 10px;
+  text-align: center;
+}
+
+button {
+  font-size: 18px;
+  padding: 10px 20px;
+  margin: 10px;
+  background-color: #ff9800;
+  color: white;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #e65100;
+}
+
+/* High Score Display */
+#high-score {
+  font-size: 20px;
+  margin-top: 10px;
+  font-weight: bold;
+}
+
+/* Modal Styling */
+.modal {
+  display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  color: black;
+  z-index: 1000;
+}
+
+.modal-content {
+  padding: 20px;
+}
+
+#close-modal {
+  margin-top: 10px;
+  padding: 10px 20px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+#close-modal:hover {
+  background-color: #388E3C;
+}