amfoss · naveen28204280 · May 15, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/1-js-basics/Assignment_subtask2.html b/1-js-basics/Assignment_subtask2.html
@@ -0,0 +1,33 @@
+<!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>
+</head>
+<body>
+  <div class="navbar">
+    <h1>My Personal Website</h1>
+    <p>Naveen</p>
+    <div class="links">
+      <a href="#Home">Home</a>
+      <a href="#About Me">About Me</a>
+      <a href="#">Portfolio</a>
+      <a href="#">Contact</a>
+    </div>
+  </div>
+  <div class="Home">
+    <h2>Home</h2>
+    <p>This is my personal Website.</p>
+  </div>
+  <div class="About Me">
+    <h2>About Me</h2>
+    <p>Hi, I'm Naveen</p>
+  </div>
+  <div>
+    <h2>Contact</h2>
+    <p>Phone: 1234567890</p>
+    <p>Social</p>
+  </div>
+</body>
+</html>
diff --git a/1-js-basics/subtask1.md b/1-js-basics/subtask1.md
@@ -0,0 +1,123 @@
+1. Subtopic data-types
+
+    Challenge:
+    The gotchas I found are:
+    - Difference between == and ===: '==' only checks if it's the same value and doesn't check the data type so int and str can be the same according to it but '===' checks both the value and the data type
+    - Using parseInt: Parsing strings normally converts them to their numbers but if the string starts with 0x then it takes 16 as the base when the base is generally 10
+
+    Assignment:
+    - We will need an **array** to store each iem inside the cart
+    - We would need an **object** (key-value pair) to store the details of each item
+2. Subtopic functions-methods
+
+    Challenge:
+    A **method** is a **function** that is defined inside an object as a property
+
+    Assignment:
+    functions that don't return anything:
+``` 
+function HelloWorld() {
+    console.log("Hello, World!");
+};
+HelloWorld()
+```
+        functions that return something:
+``` 
+function add(a, b) {
+    return a+b;
+};
+sum=add(5, 5);
+console.log(sum);
+```
+    A function with undefined variables
+``` 
+function Intro(name,age=17, country='India') {
+    console.log(`Hi, I am ${name}. I am ${age} years old and from ${country}`)
+};
+Intro ("Naveen","18","USA");
+Intro("Naveen");
+```
+    In the first call the age country are defined so it prints them but in the second call they are not defined so it prints the default values.
+
+3. Subtopic 3-making-decisions
+
+    Challenge:
+    A function using logic operators is:
+```
+let num=parseInt(prompt("Enter a number: "));
+if (num>0){
+    console.log("Positive")
+}
+else if (num<0){
+    console.log("Negative")
+}
+else{
+    console.log("Zero")
+}
+```
+    A function using ternary operators is:
+```
+let num=parseInt(prompt("Enter a number: "));
+if (num>0){
+    console.log("Positive")
+}
+else if (num<0){
+    console.log("Negative")
+}
+else{
+    console.log("Zero")
+}
+```
+    Assignment:
+``` 
+let allStudents=['A','B-',1,4,5,2]
+let studentswhoPassed=[];
+for (i=0;i<allStudents.length;i++ ) {
+    if (!isNaN(parseInt(allStudents[i], 10)) && parseInt(allStudents[i],10).toString()===allStudents[i].toString()){
+        if (parseInt(allStudents[i],10)>=3){
+            studentswhoPassed.push(allStudents[i]);
+        }
+    }
+    else if (allStudents[i]!='C-') {
+        studentswhoPassed.push(allStudents[i]);
+    }
+}
+console.log(studentswhoPassed)
+```
+4. Subtopic arrays-loops
+
+    Challenge:
+    For loop:
+```
+let num=10;
+for (i=1;i<num+1;i++){
+    console.log(i)
+}
+```
+    forEach loop:
+```
+let num=10;
+const numbers = Array.from({ length: num }, (_, i) => i + 1);
+numbers.forEach(i=>{
+    console.log(i);
+```
+    for-of loop:
+```
+let num=10;
+const numbers = Array.from({ length: num }, (_, i) => i + 1);
+for (const i of numbers) {
+    console.log(i);
+}
+```
+    map:
+```
+let num=10;
+const numbers=Array.from({length: num }, (_, i) => i + 1);
+numbers.map(i=>console.log(i));
+```
+    Assignment:
+```
+for (i = 3; i <= 20; i +=3) {
+    console.log(i)
+}
+```
diff --git a/2-terrarium/.DS_Store b/2-terrarium/.DS_Store
diff --git a/2-terrarium/terrarium-solution/.DS_Store b/2-terrarium/terrarium-solution/.DS_Store
diff --git a/2-terrarium/terrarium-solution/3rd-assignment.md b/2-terrarium/terrarium-solution/3rd-assignment.md
@@ -0,0 +1,24 @@
+# NodeLists
+
+## What are NodeLists
+
+- NodeLists are a type of collection in JavaScript that is similar to arrays, but it is a collection of html elements by class, id
+- It can be created using queryselectorAll()
+- It does not map, filter, reduce methods like arrays
+- NodeLists also won't automatically update when the DOM changes so we have to manually update it
+
+## Uses
+
+- We can use NodeList to dynamically add ,remove or update elements from the DOM
+- We can use NodeLists to loop through elements
+- We can create event handlers for each element in the NodeList
+
+## Applications
+
+NodeLists are used in various websites like Google and Amazon to interact with **results of a search** or **details of a product**
+
+### In Google Search
+When we search for an item in Google:
+1. Each result is a DOM element with a unique tag
+2. Using document.querySelectorAll, Google collects all search result elements as a NodeList
+3. Google then loops through the NodeList to display each result
diff --git a/2-terrarium/terrarium-solution/images/plant1.png b/2-terrarium/terrarium-solution/images/plant1.png
diff --git a/2-terrarium/terrarium-solution/images/plant10.png b/2-terrarium/terrarium-solution/images/plant10.png
diff --git a/2-terrarium/terrarium-solution/images/plant11.png b/2-terrarium/terrarium-solution/images/plant11.png
diff --git a/2-terrarium/terrarium-solution/images/plant12.png b/2-terrarium/terrarium-solution/images/plant12.png
diff --git a/2-terrarium/terrarium-solution/images/plant13.png b/2-terrarium/terrarium-solution/images/plant13.png
diff --git a/2-terrarium/terrarium-solution/images/plant14.png b/2-terrarium/terrarium-solution/images/plant14.png
diff --git a/2-terrarium/terrarium-solution/images/plant2.png b/2-terrarium/terrarium-solution/images/plant2.png
diff --git a/2-terrarium/terrarium-solution/images/plant3.png b/2-terrarium/terrarium-solution/images/plant3.png
diff --git a/2-terrarium/terrarium-solution/images/plant4.png b/2-terrarium/terrarium-solution/images/plant4.png
diff --git a/2-terrarium/terrarium-solution/images/plant5.png b/2-terrarium/terrarium-solution/images/plant5.png
diff --git a/2-terrarium/terrarium-solution/images/plant6.png b/2-terrarium/terrarium-solution/images/plant6.png
diff --git a/2-terrarium/terrarium-solution/images/plant7.png b/2-terrarium/terrarium-solution/images/plant7.png
diff --git a/2-terrarium/terrarium-solution/images/plant8.png b/2-terrarium/terrarium-solution/images/plant8.png
diff --git a/2-terrarium/terrarium-solution/images/plant9.png b/2-terrarium/terrarium-solution/images/plant9.png
diff --git a/2-terrarium/terrarium-solution/images/screenshot_gray.png b/2-terrarium/terrarium-solution/images/screenshot_gray.png
diff --git a/2-terrarium/terrarium-solution/index.html b/2-terrarium/terrarium-solution/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Terrarium</title>
+    <link rel="stylesheet" href="./style.css" />
+    <script src="./script.js" defer></script>
+</head>
+<body>
+    <h1>My Terrarium</h1>
+    <div id="terrarium">
+        <div class="jar-top"></div>
+        <div class="jar-walls">
+            <div class="jar-glossy-short"></div>
+            <div class="jar-glossy-long"></div>
+        </div>
+        <div class="dirt"></div>
+        <div class="jar-bottom"></div>
+    </div>
+    <div id="page">
+        <div id="left-container" class="container">
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant1" src="../images/plant1.png" />
+            </div>
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant2" src="../images/plant2.png" />
+            </div>
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant3" src="../images/plant3.png" />
+            </div>
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant4" src="../images/plant4.png" />
+            </div>
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant5" src="../images/plant5.png" />
+            </div>
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant6" src="../images/plant6.png" />
+            </div>
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant7" src="../images/plant7.png" />
+            </div>
+        </div>
+        <div id="right-container" class="container">
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant8" src="../images/plant8.png" />
+            </div>
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant9" src="../images/plant9.png" />
+            </div>
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant10" src="../images/plant10.png" />
+            </div>
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant11" src="../images/plant11.png" />
+            </div>
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant12" src="../images/plant12.png" />
+            </div>
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant13" src="../images/plant13.png" />
+            </div>
+            <div class="plant-holder">
+                <img class="plant" alt="plant" id="plant14" src="../images/plant14.png" />
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/2-terrarium/terrarium-solution/script.js b/2-terrarium/terrarium-solution/script.js
@@ -0,0 +1,56 @@
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+
+function dragElement(terrariumElement) {
+    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+
+    terrariumElement.onpointerdown = function (e) {
+        e.preventDefault();
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        document.onpointermove = elementDrag;
+        document.onpointerup = stopElementDrag;
+    };
+
+    function elementDrag(e) {
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+
+        terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
+        terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+    }
+
+    function stopElementDrag() {
+        document.onpointermove = null;
+        document.onpointerup = null;
+    }
+
+    terrariumElement.addEventListener('mouseenter', () => {
+        terrariumElement.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.3)';
+        terrariumElement.style.transform = 'scale(1.1)'; // Slightly enlarge the element.
+    });
+
+    terrariumElement.addEventListener('mouseleave', () => {
+        terrariumElement.style.boxShadow = 'none';
+        terrariumElement.style.transform = 'scale(1)'; // Restore to original size.
+    });
+}
+
+for (let i = 1; i <= 14; i++) {
+    const plant = document.getElementById(`plant${i}`);
+    if (plant) dragElement(plant);
+}