diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..7563988 Binary files /dev/null and b/.DS_Store differ diff --git a/TYPING GAME/.DS_Store b/TYPING GAME/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/TYPING GAME/.DS_Store differ diff --git a/TYPING GAME/index.html b/TYPING GAME/index.html new file mode 100644 index 0000000..09869b3 --- /dev/null +++ b/TYPING GAME/index.html @@ -0,0 +1,35 @@ + + + + + + Typing Game + + + + +

Typing Game!

+

Practice your typing skills with a quote from Sherlock Holmes. Click Start to begin!

+ +

+

+ +
+ + +
+ +

Best Time: --

+ + + + + + + + \ No newline at end of file diff --git a/TYPING GAME/script.js b/TYPING GAME/script.js new file mode 100644 index 0000000..017a164 --- /dev/null +++ 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 => `${word} `).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'; +}); \ No newline at end of file diff --git a/TYPING GAME/style.css b/TYPING GAME/style.css new file mode 100644 index 0000000..a59c938 --- /dev/null +++ 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; +} \ No newline at end of file