+
+
+
diff --git a/3-typing-game/myTypingGame/script.js b/3-typing-game/myTypingGame/script.js
new file mode 100644
index 0000000..e8f8e61
--- /dev/null
+++ b/3-typing-game/myTypingGame/script.js
@@ -0,0 +1,44 @@
+const canvas = document.getElementById("box");
+const shapes = [];
+function randomColor() {
+ return `hsl(${Math.floor(Math.random() * 360)}, 70%, 60%)`;
+}
+
+function createShape(x, y, color) {
+ const div = document.createElement("div");
+ div.className = "shape";
+ div.style.left = `${x}px`;
+ div.style.top = `${y}px`;
+ div.style.backgroundColor = color;
+ canvas.appendChild(div);
+ shapes.push(div);
+}
+
+document.addEventListener("keydown", (event) => {
+ const canvasRect = canvas.getBoundingClientRect();
+
+ const x = Math.random() * canvasRect.width - 20;
+ const y = Math.random() * canvasRect.height - 20;
+
+ if (event.key === " ") {
+ for (let i = 0; i < 10; i++) {
+ createShape(Math.random() * canvasRect.width, Math.random() * canvasRect.height, randomColor());
+ }
+ }
+ else if (event.key === "Backspace") {
+ const lastShape = shapes.pop();
+ if (lastShape) {
+ canvas.removeChild(lastShape);
+ }
+ }
+ else if (event.key === "Enter") {
+ shapes.forEach((shape) => canvas.removeChild(shape));
+ shapes.length = 0;
+ }
+ else {
+ createShape(x, y, randomColor());
+ }
+ if (["Backspace", "Enter", " "].includes(event.key)) {
+ event.preventDefault();
+ }
+});
diff --git a/3-typing-game/solution.md b/3-typing-game/solution.md
new file mode 100644
index 0000000..5e24979
--- /dev/null
+++ b/3-typing-game/solution.md
@@ -0,0 +1,57 @@
+# 3-typing-game
+
+---
+---
+
+- First of all, created the basic typing game from the given code.
+- Added a little CSS to make it look better.
+
+
+---
+### Challenge
+
+- Disabled the input event listener along with the textbox by `typedValueElement.disabled = true;`
+- To display a modal dialogue box, and also store the highscores using localStorage, I added these.
+- HTML:
+ ```
+
+
+
+
+
+
+ ```
+- JavaScript:
+ ```
+ const modal = document.getElementById('modal');
+ const modalMsg = document.getElementById('modal-message');
+ const close = document.getElementById('close-modal');
+ ```
+ In the input event listener, I added,
+ ```
+ showModal(message);
+ ```
+ And created functions
+ ```
+ function showModal(message) {
+ modalMsg.innerText = message;
+ modal.style.display = 'flex';
+ }
+ close.addEventListener('click', () => {
+ modal.style.display = 'none';
+ });
+ ```
+
+---
+
+### Assignment
+
+I created a very simple game, when there is a canvas box.
+- When you press a key, a cube with a colour pops up on the canvas.
+- Backspace will remove the previous cube.
+- Spacebar will add multiple cubes.\
+- Enter will clear the canvas.
+
+You can see the Image 
+
+The files are .
\ No newline at end of file
diff --git a/3-typing-game/typing-game-solution/index.html b/3-typing-game/typing-game-solution/index.html
new file mode 100644
index 0000000..db4f9fe
--- /dev/null
+++ b/3-typing-game/typing-game-solution/index.html
@@ -0,0 +1,24 @@
+
+
+ Typing game
+
+
+
+
Typing game!
+
Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/3-typing-game/typing-game-solution/script.js b/3-typing-game/typing-game-solution/script.js
new file mode 100644
index 0000000..bcfd295
--- /dev/null
+++ b/3-typing-game/typing-game-solution/script.js
@@ -0,0 +1,78 @@
+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 ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+ '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 = Date.now();
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+const modal = document.getElementById('modal');
+const modalMsg = document.getElementById('modal-message');
+const close = document.getElementById('close-modal');
+typedValueElement.disabled = true;
+
+document.getElementById('start').addEventListener('click', () => {
+ const quoteIndex = Math.floor(Math.random() * quotes.length);
+ const quote = quotes[quoteIndex];
+ words = quote.split(' ');
+ wordIndex = 0;
+ const spanWords = words.map(function(word) {
+ return `${word} `
+ });
+ quoteElement.innerHTML = spanWords.join('');
+ quoteElement.childNodes[0].className = 'highlight';
+ messageElement.innerText = '';
+ typedValueElement.disabled = false;
+ typedValueElement.value = '';
+ typedValueElement.focus();
+ startTime = new Date().getTime();
+});
+typedValueElement.addEventListener('input', () => {
+ const currentWord = words[wordIndex];
+ const typedValue = typedValueElement.value;
+
+ if (typedValue === currentWord && wordIndex === words.length - 1) {
+ const elapsedTime = new Date().getTime() - startTime;
+ const HighScore = localStorage.getItem("highest");
+ let message = '';
+ if(HighScore != null){
+ message= `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.Current highscore is ${HighScore}`;
+ }
+ if(HighScore>(elapsedTime/1000) || HighScore == null){
+ message = `CONGRATULATIONS! You set a new Highscore of ${elapsedTime / 1000} seconds.`;
+ localStorage.setItem("highest",elapsedTime/1000);
+ }
+ showModal(message);
+ typedValueElement.disabled = true;
+ }
+ else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+ typedValueElement.value = '';
+ wordIndex++;
+ for (const wordElement of quoteElement.childNodes) {
+ wordElement.className = '';
+ }
+ quoteElement.childNodes[wordIndex].className = 'highlight';
+ }
+ else if (currentWord.startsWith(typedValue)) {
+ typedValueElement.className = '';
+ }
+ else {
+ typedValueElement.className = 'error';
+ }
+});
+
+function showModal(message) {
+ modalMsg.innerText = message;
+ modal.style.display = 'flex';
+}
+close.addEventListener('click', () => {
+ modal.style.display = 'none';
+});
\ No newline at end of file
diff --git a/3-typing-game/typing-game-solution/style.css b/3-typing-game/typing-game-solution/style.css
new file mode 100644
index 0000000..02bd053
--- /dev/null
+++ b/3-typing-game/typing-game-solution/style.css
@@ -0,0 +1,76 @@
+.highlight {
+ background-color: rgb(216, 216, 157);
+}
+
+.error {
+ background-color: lightcoral;
+ border: red;
+}
+.modal {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ justify-content: center;
+ align-items: center;
+}
+.modal-content {
+ background: white;
+ padding: 20px;
+ border-radius: 8px;
+ text-align: center;
+}
+button {
+ padding: 5px 10px;
+ font-size: 16px;
+ margin-top: 10px;
+}
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f9f9f9;
+ color: #333;
+ text-align: center;
+ padding: 20px;
+}
+
+h1 {
+ font-size: 2rem;
+ color: #444;
+}
+
+p {
+ font-size: 1rem;
+ margin: 10px 0;
+}
+
+#quote {
+ font-style: italic;
+ color: #555;
+ margin: 20px 0;
+}
+
+#typed-value {
+ font-size: 1rem;
+ padding: 5px;
+ margin-right: 10px;
+ width: 250px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+button {
+ font-size: 1rem;
+ padding: 8px 15px;
+ color: #fff;
+ background-color: #a8a546;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #0056b3;
+}