This PR is the solution to the 'typing-game' #3

1-js-basics/1-data-types/solution.md

@@ -0,0 +1,17 @@
+# Data Types in a Shopping Cart
+
+## Introduction
+A shopping cart requires various data types to manage products, user interactions, and calculations. Below is an overview of the data types used, their purposes, and why they are essential.
+
+---
+
+## Data Types
+
+### 1. **String**
+- **Purpose:** Store textual data like product names, user details, and currency symbols.
+- **Example:**
+  ```javascript
+  let productName = "Wireless Headphones";
+  let userName = "John Doe";
+  let currency = "$";
+

1-js-basics/solution.md

@@ -0,0 +1,209 @@
+# Sub Topic 1 - Data Types
+
+ ## Assignment : Data Type Practice
+
+ ### Instruction :
+ -Imagine you are building a shopping cart. Write some documentation on the data types that you would need to complete your shopping experience. How did you arrive at your choices?-
+
+ ### Solution : 
+ Product :
+ 1, productName : String-> name of products in cart.
+ 2, qunatityItems : number-> number of each iteem in cart.
+ 3, itemPrice : number -> price of each item.
+ 4, availability : boolean -> weather the item is present or not.
+
+ User : 
+ 5, userName : string -> name of the user.
+ 6, userAddress : object -> as the address might change.
+ 7, userId : string -> seperate id for each users.
+
+ Cart:
+ 8, countItem : number -> total items in cart.
+ 9, items : [prod1,prod2] -> array of objects.
+ 10, cartTotal : number -> total amount.
+ 11, isEmpty : boolean -> check wheather the cart is Empty or not.
+
+ ## Challenge : 
+ 1, Try this in your console: let age = 1; let Age = 2; age == Age (resolves false -- why?) : because case sensitivity, as 'a' and 'A'are Different.
+   a, if '''age == age; Age == Age''' will give True.
+
+# Sub Topic 2 - functions,methods
+## Assignment : Fun with Functions
+
+### Instruction : 
+Create different functions, both functions that return something and functions that don't return anything.
+
+See if you can create a function that has a mix of parameters and parameters with default values.
+
+
+### Solution :
+1, Function that returns something:
+```function addNumbers(a, b) {
+    return a + b;
+}
+```
+
+2, Function that doesnot return Anything:
+```function logMessage(message) {
+    console.log(message);
+}
+```
+3, Function with only default parameters:
+``` function calculateDiscount(price, discountRate = 0.1) {
+    return price - price * discountRate;
+}
+```
+4, Arrow function that return something:
+```const multiplyNumbers = (x, y) => x * y;```
+5, Arrow function that doesnot return anything:
+```const logDate = () => {
+    console.log(`Today's date is ${new Date().toDateString()}`);
+};
+```
+
+## Challenge :
+''' Functions are standalone blocks in javascript whereas methods are functions that are always associated with objects and depict their properties.'''
+
+# Sub Topic 3 - making decisions
+## Assignment : Operators
+### Instructions :
+Play around with operaators. Heres a suggestion for a program you can implement:
+You have a set of students from two different grading system.
+
+### Solution :
+
+```
+let allStudents = ['A', 'B-', 1, 4, 5, 2];
+let studentsWhoPass = [];
+
+for (let grade of allStudents) {
+    if (typeof grade === 'string') {
+        if (['A', 'A-', 'B', 'B-', 'C'].includes(grade)) {
+            studentsWhoPass.push(grade);
+        }
+    } else if (typeof grade === 'number' && [3, 4, 5].includes(grade)) {
+        studentsWhoPass.push(grade);
+    }
+}
+
+console.log(studentsWhoPass);
+```
+## Challenge :
+Create a program that is written first with logical operators, and then 
+rewrite it using a ternary expression. What's your preferred syntax?
+```function checkVotingEligibility(age) {
+  if (age >= 18) {
+    return "Eligible to vote";
+  } else {
+    return "Not eligible to vote";
+  }
+}
+
+console.log(checkVotingEligibility(20)); // 
+console.log(checkVotingEligibility(16)); // 
+```
+Re-written :
+```function checkVotingEligibility(age) {
+  return age >= 18 ? "Eligible to vote" : "Not eligible to vote";
+}
+
+console.log(checkVotingEligibility(20)); // 
+console.log(checkVotingEligibility(16)); // 
+```
+My preferance :
+
+Logical Operators (if-else):
+Preferred when the logic is complex or involves multiple conditions.
+Easier to read and maintain for nested or multi-step logic.
+
+Ternary Expression:
+Ideal for simple conditions with straightforward outcomes.
+Compact and efficient for small, clear logic.
+
+# Sub Topic 4 - arrays, loops
+## Assignment : Loop an Array
+### Instructions:
+Create a program that lists every 3rd number between 1-20 and prints it to the console.
+TIP: use a for-loop and modify the iteration-expression
+
+### Solution : 
+```
+for (let i = 1; i <= 20; i += 3) {
+  console.log(i);
+}
+```
+## Challenge:
+1, For each :
+```let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+];
+
+let studentsWhoPass = [];
+
+allStudents.forEach(grade => {
+  if (typeof grade === 'number' && grade >= 3) {
+    studentsWhoPass.push(grade);
+  } else if (typeof grade === 'string' && ['A', 'A-', 'B', 'B-', 'C'].includes(grade)) {
+    studentsWhoPass.push(grade);
+  }
+});
+
+console.log('Students who pass (forEach):', studentsWhoPass);
+```
+2, for-of:
+```let studentsWhoPass = [];
+
+for (let grade of allStudents) {
+  if (typeof grade === 'number' && grade >= 3) {
+    studentsWhoPass.push(grade);
+  } else if (typeof grade === 'string' && ['A', 'A-', 'B', 'B-', 'C'].includes(grade)) {
+    studentsWhoPass.push(grade);
+  }
+}
+
+console.log('Students who pass (for-of):', studentsWhoPass);
+```
+3,map:
+```let studentsWhoPass = allStudents.map(grade => {
+  if (typeof grade === 'number' && grade >= 3) {
+    return grade;
+  } else if (typeof grade === 'string' && ['A', 'A-', 'B', 'B-', 'C'].includes(grade)) {
+    return grade;
+  } else {
+    return null; 
+  }
+}).filter(grade => grade !== null); 
+
+console.log('Students who pass (map):', studentsWhoPass);
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

2-terrarium/solution.md

@@ -0,0 +1,151 @@
+# My Terrarium
+## Subtoipc 1: Intro to HTML
+
+### Assignment
+ Instruction:
+ Imagine you are designing, or redesigning, your personal web site. Create a graphical mockup of your site, and then write down the HTML markup you would use to build out the various elements of the site. You can use software of your choice, just make sure to hand-code the HTML markup.
+
+ Solution : 
+ ```<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Personal Website</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header>
+    <nav>
+      <ul>
+        <li><a href="#home">Home</a></li>
+        <li><a href="#about">About</a></li>
+        <li><a href="#portfolio">Portfolio</a></li>
+        <li><a href="#contact">Contact</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <section id="home" class="hero">
+    <div class="hero-content">
+      <img src="headshot.jpg" alt="Your Photo" class="headshot">
+      <div class="intro">
+        <h1>Hi, I'm [Your Name]</h1>
+        <p>A [Your Profession]</p>
+      </div>
+    </div>
+  </section>
+
+  <section id="portfolio" class="portfolio">
+    <h2>My Work</h2>
+    <div class="portfolio-grid">
+      <div class="portfolio-item">
+        <img src="project1.jpg" alt="Project 1">
+        <h3>Project 1</h3>
+        <p>Brief description of Project 1.</p>
+      </div>
+      <div class="portfolio-item">
+        <img src="project2.jpg" alt="Project 2">
+        <h3>Project 2</h3>
+        <p>Brief description of Project 2.</p>
+      </div>
+      <div class="portfolio-item">
+        <img src="project3.jpg" alt="Project 3">
+        <h3>Project 3</h3>
+        <p>Brief description of Project 3.</p>
+      </div>
+      <div class="portfolio-item">
+        <img src="project4.jpg" alt="Project 4">
+        <h3>Project 4</h3>
+        <p>Brief description of Project 4.</p>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <div class="social-icons">
+      <a href="https://twitter.com" target="_blank">Twitter</a>
+      <a href="https://linkedin.com" target="_blank">LinkedIn</a>
+      <a href="https://github.com" target="_blank">GitHub</a>
+    </div>
+    <p>&copy; 2024 Your Name. All Rights Reserved.</p>
+  </footer>
+</body>
+</html>
+ ```
+
+### Challenge
+ ``` <marquee>
+               <h1>Next Task</h1>
+     </marquee>
+ ```
+
+## Suttopic 2: Intro to CSS
+### Assignment
+
+
+### Challenge
+```
+.jar {
+  width: 200px;
+  height: 300px;
+  background: #b8e994; /* Light green jar color */
+  border-radius: 50px;
+  position: relative;
+  overflow: hidden;
+}
+
+.jar-glossy-long {
+  position: absolute;
+  width: 50px;
+  height: 200px;
+  background: linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
+  border-radius: 25px;
+  bottom: 20px;
+  left: 20px;
+  transform: rotate(-15deg);
+}
+
+.jar-glossy-short {
+  position: absolute;
+  width: 30px;
+  height: 100px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
+  border-radius: 15px;
+  bottom: 40px;
+  left: 60px;
+  transform: rotate(-10deg);
+}
+```
+
+## SubTopic-3: Intro to DOM and Closures
+### Assignment
+ Insrtructions :Research the DOM a little more by 'adopting' a DOM element. Visit the MDN's list of DOM interfaces and pick one. Find it being used on a web site in the web, and write an explanation of how it is used.
+
+ Solution : One common use of IntersectionObserver is for lazy loading images. For example, on websites like Medium or Unsplash, images outside the viewport are not immediately loaded to save bandwidth and improve performance.
+
+This technique is used on modern web platforms to:
+ Optimize Performance: Only load assets when needed.
+ Enhance User Experience: Faster page loads and reduced initial bandwidth consumption.
+ SEO-Friendly: Images still load for search engines that index content.
+
+### Challenge
+```terrariumElement.addEventListener("dblclick", (event) => {
+        let highlightColor = "#FFD700";
+        terrariumElement.style.border = "solid black 2px";
+        terrariumElement.style.maxWidth = "85%";
+        terrariumElement.style.background = highlightColor;
+      });      
+```
+
+
+
+
+
+
+
+
+
+
+
+