diff --git a/1-js-basics/solution.md b/1-js-basics/solution.md
new file mode 100644
index 0000000..e1754e1
--- /dev/null
+++ b/1-js-basics/solution.md
@@ -0,0 +1,244 @@
+# Shopping Cart in JavaScript
+
+## Introduction
+
+When building a **shopping cart** in JavaScript, we use different data types to handle various aspects efficiently.Here i'll explain the **JavaScript data types** used in a shopping cart and their purposes, along with some of the examples.
+
+---
+
+## 1. Number
+
+### **Purpose of using Number :**
+
+Here i use the `Number` data type to store some of the numerical values for **product prices, quantities, and total amounts** in the shopping cart.
+
+### **Example of using Number data type :**
+
+```javascript
+let price = 299.99; // price of the single product
+let quantity = 2; // count for the no of items added to the cart
+let totalAmount = price * quantity; // this calculate the total cost
+
+console.log(totalAmount); // here we get the total cost
+```
+
+---
+
+## 2. String
+
+### **Purpose of using Strings in the cart :**
+
+Here i'll use the `String` data type to store some **textual data**, such as **product names, descriptions, and categories**.
+
+### **Example usage :**
+
+```javascript
+let productName = "Wireless Headphones";
+let productDescription = "Noise-canceling Bluetooth headphoes with long battery life.";
+
+console.log(productName + " - " + productDescription);
+// Output: Wireless Headphones - Noise-canceling Bluetooth headphones with long battery life.
+```
+
+---
+
+## 3. Boolean
+
+### **Purpose of using Boolean data type:**
+
+I use the The `Boolean` data type for **true/false values** to check product **availability, stock status, and discounts**.
+
+### **Example of using Booleans:**
+
+```javascript
+let instock = true; // here , this means that the product is available
+let onsale = false; // this means the product Product is not on sale
+
+console.log(inStock); // Output: true
+console.log(onSale); // Output: false
+```
+
+---
+
+## 4. Array
+
+### **Purpose of using Array:**
+
+I use `Array` data type to store **multiple items** in the shopping cart.
+
+### **Example:**
+
+```javascript
+let cart = ["Laptop", "Mouse", "Keyboard"];
+
+console.log(cart[0]); // Output: Laptop
+console.log(cart.length); // Output: 3
+```
+
+---
+
+## 5. Object
+
+### **Purpose of Object :**
+
+`Object` data type is used to store multiple **properties** of a product, such as its **name, price, quantity, and category**.
+
+### **Example:**
+
+```javascript
+let product = {
+ name: "Laptop",
+ price: 75000,
+ quantity: 1,
+ category: "Electronics"
+};
+
+console.log(product.name + " costs " + product.price);
+// Output: Laptop costs 75000
+```
+
+---
+
+
+## 6. Undefined
+
+### **Purpose of using undefined :**
+
+The `undefined` value is used when a **variable is declared but has no assigned value**.
+
+### **Example:**
+
+```javascript
+let discount; // value for discount is not yet set
+
+console.log(discount); // Output: undefined
+```
+
+---
+
+## 7. BigInt
+
+### **Purpose:**
+
+The `BigInt` data type is use for **very large numbers**, such as **unique order IDs**.
+
+### **Example of using Bigint:**
+
+```javascript
+let orderId = 9876543210123456789; // Large order ID
+
+console.log(orderId); // Output: 9876543210123456789
+```
+
+---
+
+## 8. Symbol
+
+### **Purpose:**
+
+The `Symbol` data type here is used to create **unique product symbols**.
+
+### **Example:**
+
+```javascript
+let productID = Symbol("Laptop"); // Unique symbol for a product
+
+console.log(productID); // Output: Symbol(Laptop)
+```
+
+---
+
+## Conclusion
+
+In a **shopping cart system**, JavaScript data types help in handling different kinds of data efficiently:
+
+| **Data Type** | **Usage in Shopping Cart** |
+| ------------- | ------------------------------------------------- |
+| **Number** | Store prices, quantities, total amount of the items |
+| **String** | Store product names, descriptions, categories |
+| **Boolean** | Tracks the stock status, discounts, and availability |
+| **Array** | To Store multiple products in the cart |
+| **Object** | Store product details in a structured format |
+| **Undefined** | for handling variables that are not initialized |
+| **BigInt** | Store large numerical values like order IDs |
+| **Symbol** | Ensure unique product identifiers |
+
+By using **these data types appropriately**, we can build a **efficient** shopping cart system in JavaScript!
+
+## Second Assignment: JavaScript Functions
+
+### 1. Function That Returns a Value
+```javascript
+function calculateTotal(price, quantity) {
+ return price * quantity; // This returns the total cost
+}
+
+let total = calculateTotal(100, 2);
+console.log("Total Price:", total); // Output: Total Price: 200
+```
+
+### 2. Function That Doesn't Return Anything
+This function performs an action but doesn't return a value:
+```javascript
+function displayMessage(message) {
+ console.log("Message:", message);
+}
+
+displayMessage("Welcome to our store!"); // Output: Message: Welcome to our store!
+```
+
+### 3. Function with a Mix of Parameters and Default Values
+```javascript
+function placeOrder(product, quantity = 1, discount = 0) {
+ let pricePerItem = 500; // Assuming the price per item is 500
+ let total = (pricePerItem * quantity) - discount;
+ console.log(`Order placed for ${quantity} ${product}(s). Total: ₹${total}`);
+}
+
+placeOrder("Laptop"); // Uses default values (quantity=1, discount=0)
+placeOrder("Headphones", 2); // Uses default discount (₹0)
+placeOrder("Smartphone", 3, 500); // Custom quantity and discount
+```
+
+---
+
+## Third Assignment: If-Else Statement
+
+```javascript
+let allStudents = ['A', 'B-', 1, 4, 5, 2]; // Grades taken from the given assignment
+let studentsPassed = []; // This stores the passing students
+
+for (let i = 0; i < allStudents.length; i++) {
+ let grade = allStudents[i];
+
+ if (grade === 'A') {
+ studentsPassed.push(grade);
+ } else if (grade === 'A-') {
+ studentsPassed.push(grade);
+ } else if (grade === 'B') {
+ studentsPassed.push(grade);
+ } else if (grade === 'B-') {
+ studentsPassed.push(grade);
+ } else if (grade === 'C') {
+ studentsPassed.push(grade);
+ } else if (grade === 'C-') {
+ studentsPassed.push(grade);
+ } else if (grade >= 3) {
+ studentsPassed.push(grade);
+ }
+}
+
+console.log(studentsPassed); // Output: ['A', 'B-', 4, 5]
+```
+
+---
+
+## Fourth Assignment: Looping Every 3rd Number Between 1-20
+
+```javascript
+for (let i = 1; i <= 20; i += 3) {
+ console.log(i);
+} // This prints every 3rd number from 1 to 20
+```
+
+
diff --git a/2-terrarium/solution.md b/2-terrarium/solution.md
new file mode 100644
index 0000000..723d62e
--- /dev/null
+++ b/2-terrarium/solution.md
@@ -0,0 +1,424 @@
+# SOLUTION-1 :
+### As part of my assignment in the html and css i have done my simple "PORTFOLIO" :
+
+This is the `HTML` code wrote for the webpage :
+
+```
+
+
+
+
+
+ My Portfolio
+
+
+
+
+
+
WELCOME TO MY PORTFOLIO
+
+
+
+
+
+
About Me
+
Hello! I am K. Jagadeeshwar Reddy from Andhra Pradesh. My mother tongue is Telugu. I am an MPC student in Intermediate. My hobbies include listening to music, playing mobile games, badminton, and chess, which I deeply enjoy. In my leisure time, I watch movies to unwind. I have a strong passion for coding and enjoy working on computers for extended periods, constantly seeking to improve my skills.
+
+
+
+
+
+```
+here, the list of funnctions i used are `header`,`section`,`li`,`ul` these are some of the new tags i used here :
+
+1) `section` : section tag here is used to group together the related elements .
+2) `header` : this i used here for the heading we can also use h1 tag , but for the heading it is better to use heade tag because this makes some difference from h1 to h6 tags
+3) `li` : list tags aare used here to display them in the form of lists and in a decent way if there are no `li` tag that wont be in a proper order.
+4) `b` : this is a bold tag mean it differs the main parameters and make them appear in abold manner.
+5) `ul` : without this unordered list we get a bullet points for each list .
+
+---
+
+## The `css` styling for the code goes as follows :
+
+#### style.css :
+
+```
+/* General Styles */
+body {
+ background-color: #0f0f0f;
+ color: white;
+ font-family: 'Poppins', sans-serif;
+ text-align: center;
+}
+
+
+header {
+ background: linear-gradient(90deg, #ff0080, #8000ff);
+ padding: 15px;
+
+}
+.welcome {
+ font-size: 2em;
+ font-weight: bold;
+ color: white;
+}
+
+/*this contains the profile section */
+.profile {
+ margin: 30px auto; /*here as this property is shorthanded to top-bottom and left-right */
+ max-width: 600px;
+ padding: 20px;
+ border-radius: 10px;
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: 0px 0px 20px #ee02021a; /*horiz vertical offset blurradius */
+}
+.profile-pic {
+ display: block;
+ margin: 0 auto 15px; /* top right-left bottom */
+ width: 150px;
+ height: 150px;
+ border-radius: 0%;
+ border: 3px solid #fff;
+}
+
+/* Sections */
+.details, .education {
+ margin: 20px auto;
+ max-width: 500px;
+ padding: 20px;
+ border-radius: 10px;
+ background: rgba(255, 255, 255, 0.1);
+}
+.details h2, .education h2 {
+ color: #ffcc00;
+}
+.details ul, .education ul {
+ list-style-type: none;
+ padding: 0;
+}
+.details li, .education li {
+ font-size: 1.2em;
+ padding: 5px;
+}
+
+/* Social Media Section */
+.social-media {
+ margin: 30px auto;
+ padding: 20px;
+}
+.social-links {
+ display: flex;
+ flex-direction:row;
+ justify-content: center;
+ gap: 15px;
+}
+.btn {
+ background: #ff0080;
+ padding: 10px 20px;
+ color: white;
+ border-radius: 5px;
+ font-size: 1.2em;
+ transition: 0.1s ;
+}
+.btn:hover {
+ background: #8000ff;
+ transform: scale(2);
+}
+
+```
+This is a simple css styling i used to make my web page attractive .
+
+---
+
+# 2ND SOLUTION :
+
+- For this assignment the task is to make the terrarium using flex-box or css grid . Here i used Flexboxes and restyled the css , so that it looks exactly same as the Terrarium . For the code part implementation i gave the code below :
+
+```
+
+/*
My Terrarium
*/
+h1 {
+ color:blue;
+}
+body {
+ font-family: helvetica, arial, sans-serif;
+ background-color: #0a9a84;}
+h1 {
+ color: #3a241d;
+ text-align: center;
+}
+#left-container {
+ background-color: #000000;
+ width: 15%;
+ left: 0px;
+ top: 0px;
+ position: absolute;
+ height: 100%;
+ padding: 10px;
+
+}
+
+#right-container {
+ background-color: #000000;
+ width: 15%;
+ right: 0px;
+ top: 0px;
+ position: absolute;
+ height: 100%;
+ padding: 10px;
+}
+.plant-holder {
+ position: relative;
+ height: 13%;
+ left: -10px;
+}
+
+.plant {
+ position: absolute;
+ max-width: 150%;
+ max-height: 150%;
+ z-index: 2;
+}
+#terrarium {
+ display: flex;
+ flex-direction: column; /* Stack elements in a column */
+ align-items: center; /* Center items horizontally */
+ width: 700px;
+ height: 600px;
+ background-color: #0a9a84;
+ position: relative;
+ padding: 10px;
+ border-radius: 10px;
+ margin-left: 25%;
+}
+
+/* Jar Top */
+.jar-top {
+ width: 80%;
+ height: 5%;
+ background: #ffffff;
+ opacity: 0.7;
+}
+
+/* Jar Walls */
+.jar-walls {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ position: relative;
+ height: 80%;
+ width: 100%;
+ background: #ffffff;
+ border-radius: 1rem 1rem 0 0;
+ opacity: 0.5;
+}
+
+.jar-glossy-long,
+.jar-glossy-short {
+ width: 3%;
+ background: #ffffff;
+ border-radius: 10px;
+ align-self: flex-start; /* Align to the left side */
+ margin-left: 5%;
+}
+
+.jar-glossy-long {
+ height: 15%;
+ margin-top: 20%;
+}
+
+.jar-glossy-short {
+ height: 10%;
+ margin-top: 5%;
+}
+
+/* Dirt */
+.dirt {
+ width: 100%;
+ height: 5%;
+ background: #650e72;
+ border-radius: 10% 10% 20rem 20rem;
+ opacity: 0.7;
+
+}
+
+/* Jar Bottom */
+.jar-bottom {
+ width: 80%;
+ height: 1%;
+ background: #e00782;
+ opacity: 0.7;
+}
+
+/* .reset {
+ color: black;
+ display: flex;
+} */
+```
+
+--------------
+- So, this is the code which i have implemented for restyling the terrarium
+
+## Image of my terrarium:
+
+
+
+
+
+---
+
+# 3RD SOLUTION :
+## DOM assignment :
+### Firstly `DOM` stands for Document Object Model
+So, DOM is a programming interface that represents the structure of the web page and this is used to change the pages's style , structure and content in the page .
+
+---
+
+- Dom represents the document as a logical tree of objects and content
+- here each part of the branch ends in a node and each node further have another branch again.
+- this DOM method allows programmatic access to the tree
+- we can use DOM method to change the documents structure and style
+- So, this is how the DOM works ...
+
+`DOM also helps the scripting languages like javascript to interact with the webpage`s
+
+---
+
+There are 3 types in DOM :
+- CORE DOM this is the standard Model for any structured document
+- XML DOM this is the standard Model for XML documents
+- HTML DOM and this is the model for HTML documents
+
+
+### So, as part of my assignment from the list of DOM interfaces i choosed HTMLCollection as my choise :
+
+The `HTMLcollection` represents an ordered collection of elements . It automatically updates to reflect changes in the Document structure
+
+- Some of the common methods that return html elements are :
+
+
+1) **getElementId()** - this is used to get the elements with id mean to work with the elements in javascript which should be applied only for the requred "id" elements and here it access the first element with the specified id
+2) **getElementsByTagName()** - this method allows us to search all the elements with the specified tagname in our page.
+3) **getElementByClassName()** - this returns the collection of all the elements that has the class name as specified in the function
+4) **querySelectorAll()** - this returns the list of the elements that matches a specified group of selectors
+5) **querySelector()** - this method returns the element that matches with the specified css selector
+
+Example :
+
+```
+
+
+
+ HTMLCollection Example
+
+
+
First Content
+
Second Content
+
Third Content
+
+
+
+```
+- here , on using `document.getElementByClassName("content")`
+- this method returns a HTMLcollection of elements which has the class "content".
+
+### Updating the code witha new div tag :
+
+```
+
+const newdiv = document.getElement("div");
+
+newdiv.classname = "content";
+newdiv.textcontent = "Fourth Content";
+
+document.body.appendchild(newdiv);
+
+```
+## One real website example
+- Think of a shopping website where when we go to the photo of the item we get the details of thet , Here that we can do by adding event listeners .
+
+```
+
+
+
+ Product Listing
+
+
+
+
Product 1
+
Product 2
+
Product 3
+
+
+
+
+
+```
+
+- We attach eventlisteners mouseout and mouseover to each product .
+- When a user hovers on a product the `.highlight` class is added this causes changing the backgroung color and when the mouse is removed it come backs to its original style .
+
+
+
+
+
+
+
+
diff --git a/3-typing-game/My_typing_game/index.html b/3-typing-game/My_typing_game/index.html
new file mode 100644
index 0000000..d9f1cfd
--- /dev/null
+++ b/3-typing-game/My_typing_game/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+ Snake Game JavaScript
+
+
+
+
+
+
+
+ Score: 0
+ High Score: 0
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/3-typing-game/My_typing_game/script.js b/3-typing-game/My_typing_game/script.js
new file mode 100644
index 0000000..d2c0d21
--- /dev/null
+++ b/3-typing-game/My_typing_game/script.js
@@ -0,0 +1,93 @@
+const playBoard = document.querySelector(".play-board");
+const scoreElement = document.querySelector(".score");
+const highScoreElement = document.querySelector(".high-score");
+const controls = document.querySelectorAll(".controls i");
+
+let gameOver = false
+let foodX, foodY;
+let snakeX = 5, snakeY = 5;
+let velocityX = 0, velocityY = 0;
+let snakeBody = [];
+let setIntervalId;
+let score = 0;
+
+// used for getting high score from the local storage
+let highScore = localStorage.getItem("high-score") || 0;
+highScoreElement.innerText = `High Score: ${highScore}`;
+
+const updateFoodPosition = () => {
+ // passes a random 1 to 30 for food position
+ foodX = Math.floor(Math.random() * 30) + 1;
+ foodY = Math.floor(Math.random() * 30) + 1;
+}
+
+const handleGameOver = () => {
+ // clears the timer and reloading the page on game over
+ clearInterval(setIntervalId);
+ alert("Game Over! Press OK to replay...");
+ location.reload();
+}
+
+const changeDirection = e => {
+ // changes velocity value based on key press
+ if(e.key === "ArrowUp" && velocityY != 1) {
+ velocityX = 0;
+ velocityY = -1;
+ } else if(e.key === "ArrowDown" && velocityY != -1) {
+ velocityX = 0;
+ velocityY = 1;
+ } else if(e.key === "ArrowLeft" && velocityX != 1) {
+ velocityX = -1;
+ velocityY = 0;
+ } else if(e.key === "ArrowRight" && velocityX != -1) {
+ velocityX = 1;
+ velocityY = 0;
+ }
+}
+
+// calling the changeDirection on each key click and passing key dataset value as an object
+controls.forEach(button => button.addEventListener("click", () => changeDirection({ key: button.dataset.key })));
+
+const initGame = () => {
+ if(gameOver) return handleGameOver();
+ let html = ``;
+
+ // checking if the snake hit the food
+ if(snakeX === foodX && snakeY === foodY) {
+ updateFoodPosition();
+ snakeBody.push([foodY, foodX]); // pushign the food position to snake body array
+ score++; // increment the score by 1
+ highScore = score >= highScore ? score : highScore;
+ localStorage.setItem("high-score", highScore);
+ scoreElement.innerText = `Score: ${score}`;
+ highScoreElement.innerText = `High Score: ${highScore}`;
+ }
+ // used to update the snake's head position based on the current velocity
+ snakeX += velocityX;
+ snakeY += velocityY;
+
+ // Shifting forward the values of the elements in the snake body by one
+ for (let i = snakeBody.length - 1; i > 0; i--) {
+ snakeBody[i] = snakeBody[i - 1];
+ }
+ snakeBody[0] = [snakeX, snakeY]; // Setting first element of snake body to current snake position
+
+ // Checking if the snake's head is out of wall, if so setting gameOver to true
+ if(snakeX <= 0 || snakeX > 30 || snakeY <= 0 || snakeY > 30) {
+ return gameOver = true;
+ }
+
+ for (let i = 0; i < snakeBody.length; i++) {
+ // adds a div for each part of the snake's body
+ html += ``;
+ // checking if the snake head hit the body, if so set game is Over to true
+ if (i !== 0 && snakeBody[0][1] === snakeBody[i][1] && snakeBody[0][0] === snakeBody[i][0]) {
+ gameOver = true;
+ }
+ }
+ playBoard.innerHTML = html;
+}
+
+updateFoodPosition();
+setIntervalId = setInterval(initGame, 100);
+document.addEventListener("keyup", changeDirection);
\ No newline at end of file
diff --git a/3-typing-game/My_typing_game/style.css b/3-typing-game/My_typing_game/style.css
new file mode 100644
index 0000000..4ecf15a
--- /dev/null
+++ b/3-typing-game/My_typing_game/style.css
@@ -0,0 +1,77 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Open Sans', sans-serif;
+}
+body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background: #E3F2FD;
+}
+.wrapper {
+ width: 65vmin;
+ height: 70vmin;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ border-radius: 5px;
+ background: #ce13b8;
+ box-shadow: 10px 20px 40px rgb(21, 150, 36);
+}
+.game-details {
+ color: #B8C6DC;
+ font-weight: 500;
+ font-size: 1.2rem;
+ padding: 20px 27px;
+ display: flex;
+ justify-content: space-between;
+}
+.play-board {
+ height: 100%;
+ width: 100%;
+ display: grid;
+ background: #000000;
+ grid-template: repeat(30, 1fr) / repeat(30, 1fr);
+}
+.play-board .food {
+ background: #8ebc22;
+}
+.play-board .head {
+ background: #60CBFF;
+}
+
+.controls {
+ display: none;
+ justify-content: space-between;
+}
+.controls i {
+ padding: 25px 0;
+ text-align: center;
+ font-size: 1.3rem;
+ color: #B8C6DC;
+ width: calc(100% / 4);
+ cursor: pointer;
+ border-right: 1px solid #171B26;
+}
+
+@media screen and (max-width: 800px) {
+ .wrapper {
+ width: 90vmin;
+ height: 115vmin;
+ }
+ .game-details {
+ font-size: 1rem;
+ padding: 15px 27px;
+ }
+ .controls {
+ display: flex;
+ }
+ .controls i {
+ padding: 15px 0;
+ font-size: 1rem;
+ }
+}
\ No newline at end of file
diff --git a/3-typing-game/typing-game/demo.gif b/3-typing-game/typing-game/demo.gif
new file mode 100644
index 0000000..171388e
Binary files /dev/null and b/3-typing-game/typing-game/demo.gif differ
diff --git a/3-typing-game/typing-game/index.html b/3-typing-game/typing-game/index.html
new file mode 100644
index 0000000..7c1ae0b
--- /dev/null
+++ b/3-typing-game/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: --
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/3-typing-game/typing-game/script.js b/3-typing-game/typing-game/script.js
new file mode 100644
index 0000000..5a03ce4
--- /dev/null
+++ b/3-typing-game/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';
+});
diff --git a/3-typing-game/typing-game/style.css b/3-typing-game/typing-game/style.css
new file mode 100644
index 0000000..c714de7
--- /dev/null
+++ b/3-typing-game/typing-game/style.css
@@ -0,0 +1,96 @@
+/* General Styling */
+body {
+ background: linear-gradient(to right, #4facfe, #00f2fe);
+ text-align: center;
+ font-family: 'Arial', sans-serif;
+ color: white;
+ padding: 20px;
+}
+
+/* Heading */
+h1 {
+ font-size: 50px;
+ color: #ffeb3b;
+}
+
+/* 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;
+}
+