amfoss · sunilswain7 · Nov 21, 2024 · Nov 25, 2024 · Nov 26, 2024 · Nov 26, 2024
diff --git a/1-js-basics/SOLUTION.md b/1-js-basics/SOLUTION.md
@@ -0,0 +1,150 @@
+1. Variables and Data Types
+
+    Assignment:
+
+        ```
+        Solution / Documentation of the
+        Assignment
+        const shopping_cart{
+        itemId : "a#10" // String to uniquely identify your item
+        itemName : "RTX 5060" //String to name product
+        itemPrice : 999999 // Numeric Pricing of the product
+        itemQuantitiy : 1 // Number of items purchasing
+
+        This is the minimum requirements as we need brief information to identify the item we have.
+
+        }
+        ```
+
+    Challenge:
+
+        ```
+        Solution / Documentation
+        for the challenge given.
+        there are two gotchas oin this one is that 
+        1) variables in js are case sensitive so age and Age are treated as different variables.
+        2) == is a comparison operator which compares two values since here 1 != 2 hence returns false.
+        ```
+2. Functions and Methods
+
+    Assignment:
+
+        ```
+        Solution / Documentation of the
+        Assignment
+        function rtr(a) {
+	  return a;
+	}
+	console.log(rtr(44));
+
+	function nothing(){
+	  nothing;
+	}
+
+	console.log(nothing());
+
+	function si(principle, rate, time = 2){
+	  return interest = (principle+rate+time)/100
+	}
+	console.log(si(200,2))
+
+        }
+        ```
+
+    Challenge:
+
+        ```
+        Solution / Documentation
+        for the challenge given.
+        A method is a function that is associated witha an object whereas a function is not.
+
+        ```
+3. Making Decisions with javascript
+
+    Assignment:
+
+        ```
+        Solution / Documentation of the
+        Assignment
+        let allStudents = ['A', 'B-', 1, 4, 5, 2];
+	let studentsWhoPass = [];
+
+	for (let i = 0; i < allStudents.length; i++) {
+	  if (
+	    allStudents[i] === 'A' || allStudents[i] === 'A-' || allStudents[i] === 'B' || allStudents[i] === 'B-' || allStudents[i] === 'C' || (typeof allStudents[i] === 'number' && allStudents[i] >= 3)
+	  ) {
+	    studentsWhoPass.push(allStudents[i]); 
+	  }
+	}
+
+	console.log(studentsWhoPass);
+        }
+        ```
+
+    Challenge:
+
+        ```
+        Solution / Documentation
+        for the challenge given.
+        function largest(a, b, c) {
+	  let largest;
+
+	  if (a >= b && a >= c) {
+	      largest = a; 
+	  } else if (b >= a && b >= c) {
+	      largest = b; 
+	  } else {
+	      largest = c;
+	  }
+	  return largest;
+	}
+
+	console.log(largest(6, 9, 3));
+
+	function biggest(a, b, c) {
+	  return a >= b && a >= c ? a : b >= a && b >= c ? b : c; 
+	}
+
+	console.log(biggest(3, 6, 9));
+
+
+        ```
+4. Arrays and Loops
+
+    Assignment:
+
+        ```
+        Solution / Documentation of the
+        Assignment
+
+        for (let index = 0; index < 20; index+=3) {
+  	 console.log(index)}
+
+        }
+        ```
+
+    Challenge:
+
+        ```
+        Solution / Documentation
+        for the challenge given.
+
+        const array = [];
+	for (let index = 0; index < 20; index+=3) {
+	  array.push(index)}
+
+	for each:
+	array.forEach((element) => console.log(element));
+
+	for of:
+	for (const item of array) {
+	  console.log(item);
+	}
+
+	map:
+	const arr = array.map((x) => x );
+console.log(arr);
+        ```
+
+
+
diff --git a/2-terrarium/SOLUTION.md b/2-terrarium/SOLUTION.md
diff --git a/3-typing-game/SOLUTION.md b/3-typing-game/SOLUTION.md
@@ -0,0 +1,177 @@
+Assignment: 
+Have added the directory for my typing game with this pr.
+
+Challenges:
+Screenshots:
+
+![Screenshot from 2024-11-27 06-54-12](https://github.com/user-attachments/assets/02327fba-b3f4-4c9f-a8b8-c26a7a384c3f)
+![Screenshot from 2024-11-27 06-54-46](https://github.com/user-attachments/assets/f77f031f-287c-4b8a-99ac-2d25cbf23234)
+
+
+index.js
+
+```<!-- inside index.html -->
+<html>
+<head>
+  <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 **start** to begin!</p>
+  <p id="quote"></p> <!-- This will display our quote -->
+  <p id="message"></p> <!-- This will display any status messages -->
+  <div class="open-modal-btn-wrapper">
+    <button class="open-modal-btn">
+        Open Modal
+    </button>
+  </div>
+
+  <div class="modal-overlay hide">
+      <div class="modal-wrapper">
+          <div class="close-btn-wrapper">
+              <button class="close-modal-btn">
+                  Close
+              </button>
+          </div>
+          <h1 id="modal">Success</h1>
+          <div class="modal-content">
+              Congratulations!
+          </div>
+      </div>
+  </div>
+  <div>
+    <input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
+    <button type="button" id="start">Start</button> <!-- To start the game -->
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
+```
+script.js
+
+```// inside script.js
+// all of our quotes
+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.',
+];
+// store the list of words and the index of the word the player is currently typing
+let words = [];
+let wordIndex = 0;
+// the starting time
+let startTime = Date.now();
+let activeEvent;
+// page elements
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+
+// at the end of script.js
+document.getElementById('start').addEventListener('click', () => {
+  typedValueElement.disabled = false;
+  activeEvent = true;
+  // get a quote
+  const quoteIndex = Math.floor(Math.random() * quotes.length);
+  const quote = quotes[quoteIndex];
+  // Put the quote into an array of words
+  words = quote.split(' ');
+  // reset the word index for tracking
+  wordIndex = 0;
+
+  // UI updates
+  // Create an array of span elements so we can set a class
+  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
+  // Convert into string and set as innerHTML on quote display
+  quoteElement.innerHTML = spanWords.join('');
+  // Highlight the first word
+  quoteElement.childNodes[0].className = 'highlight';
+  // Clear any prior messages
+  messageElement.innerText = '';
+
+  // Setup the textbox
+  // Clear the textbox
+  typedValueElement.value = '';
+  // set focus
+  typedValueElement.focus();
+  // set the event handler
+
+  // Start the timer
+  startTime = new Date().getTime();
+});
+
+// at the end of script.js
+typedValueElement.addEventListener('input', () => {
+  if (!activeEvent) {
+    return;
+  }
+  // Get the current word
+  const currentWord = words[wordIndex];
+  // get the current value
+  const typedValue = typedValueElement.value;
+
+  if (typedValue === currentWord && wordIndex === words.length - 1) {
+
+    const elapsedTime = new Date().getTime() - startTime;
+    let highScore = localStorage.getItem('highScore');
+
+    if (!highScore || elapsedTime < highScore) {
+      localStorage.setItem('highScore', elapsedTime);
+      messageElement.innerText = `New High Score: ${elapsedTime.toFixed(2)} seconds!`;
+    } else {
+      messageElement.innerText = `Your Time: ${elapsedTime.toFixed(2)} seconds. High Score: ${highScore} seconds.`;
+    }
+    const openBtn = document.querySelector(".open-modal-btn");
+    const modal = document.querySelector(".modal-overlay");
+    const closeBtn = document.querySelector(".close-modal-btn");
+
+    function openModal() {
+        modal.classList.remove("hide");
+    }
+
+    function closeModal(e, clickedOutside) {
+        if (clickedOutside) {
+            if (e.target.classList.contains("modal-overlay"))
+                modal.classList.add("hide");
+        } else modal.classList.add("hide");
+    }
+
+    openBtn.addEventListener("click", openModal);
+    modal.addEventListener("click", (e) => closeModal(e, true));
+    closeBtn.addEventListener("click", closeModal);
+    // end of sentence
+    // Display success
+    // const elapsedTime = new Date().getTime() - startTime;
+    // const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
+    // messageElement.innerText = message;
+    typedValueElement.disabled = true;
+  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+    // end of word
+    // clear the typedValueElement for the new word
+    typedValueElement.value = '';
+    // move to the next word
+    wordIndex++;
+    // reset the class name for all elements in quote
+    for (const wordElement of quoteElement.childNodes) {
+      wordElement.className = '';
+    }
+    // highlight the new word
+    quoteElement.childNodes[wordIndex].className = 'highlight';
+  } else if (currentWord.startsWith(typedValue)) {
+    // currently correct
+    // highlight the next word
+    typedValueElement.className = '';
+  } else {
+    // error state
+    typedValueElement.className = 'error';
+  }
+});
+
+
+```
+Have implemented all the functionality mentioned in the challenges.
diff --git a/3-typing-game/my-typing-game/SOLUTION.md b/3-typing-game/my-typing-game/SOLUTION.md
@@ -0,0 +1,15 @@
+My typing game project has a simple idea that is to type the shown words as fast as you can. It has very simple Ui, where you have to input the word shown and then click enter. The game ends after you successfully type 10 words then it shows the success message with your speed also.
+
+With the help of functions and event listeners and referring the typing project tasked in the task repo i made this project. First we have a start game function where everything is initaialised and the setnewword function is called which helps to import random words from the array to our screen using math.random and array manipulations. Then we check input and if its correct then the score increases and a new word shows up. This continues until we reach a score of 10. After this end game function is called where i have calculated wpm with the help of getTime.
+
+Resources used:
+-Sample typing game provided in the repo.
+-Google Stack overflow for doubts.
+-ChatGPT as it helped me structure the code as for some reason prettier does not work in my vs code properly.
+
+Screenshots for my project:
+
+![Screenshot from 2024-11-27 06-50-19](https://github.com/user-attachments/assets/c0a1de80-f48b-4b71-af85-0b4f5adcb49e)
+![Screenshot from 2024-11-27 06-51-45](https://github.com/user-attachments/assets/8cdf7c1a-3587-4dab-b4e8-21385167ec2a)
+
+Initially i was trying to build a word shooter game where the words would fall from top and before touching ground we have to type and shoot, but had many errors and time consuming and as final submission dates approaching i went for this project.
diff --git a/3-typing-game/my-typing-game/index.html b/3-typing-game/my-typing-game/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Word Matching Game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Word Matching Game</h1>
+  <p>Type the word below as quickly as you can! Press **Enter** after typing.</p>
+  <h2 id="current-word"></h2> <!-- Display the current word -->
+  <input type="text" id="typed-value" placeholder="Type here..." />
+  <p id="message"></p> <!-- Display feedback -->
+  <p>Score: <span id="score">0</span></p>
+  <button id="start" type="button">Start Game</button>
+  <script src="script.js"></script>
+</body>
+</html>