amfoss · Khushal928 · Feb 21, 2025 · Mar 5, 2025 · Mar 5, 2025
diff --git a/1-js-basics/1-data-types/solution.md b/1-js-basics/1-data-types/solution.md
@@ -0,0 +1,39 @@
+#H1 Review and Self Study:
+```javascript
+const arr = ["hi",how"","you"];
+const first = arr.pop();
+console.log(first); // this will not only remove last element but it also returns that last element 
+const last = arr.shift();
+console.log(last);  // same goes for this too it not only removes first element but also reeturns it 
+
+```
+```javascript
+const arr = ["hi","how","you"];
+const first = arr.slice(0, 1);// first will store  hi
+const rem = arr.slice(1);     // rem will store how and you
+```
+
+
+
+#h2 Assignment
+When we are building a shopping cart, we need many things which include user name, his password, an array of all items which contain objects which probably include a name of item and number of such items<br>>
+
+
+<p>
+first one is username which is a string
+</p>
+<p>
+next is alpha nemeric password which is again a string 
+</p>
+<p>
+an array of all items in the cart
+</p>
+<p>
+an object in the follow whose object's format is something like following
+```
+name : 
+value:
+```
+<br>
+where if a new item is introduced to cart a new object is created and value will be number of that items thrown into cart
+</p>
diff --git a/1-js-basics/2-functions-methods/solution.md b/1-js-basics/2-functions-methods/solution.md
@@ -0,0 +1,23 @@
+#H1 Challenge
+<p>method is something that belong to an object or a class. It is also defined within a class defination. <br>
+while function is something that can be defined any where and used anywhere. A method can only be used to manipulate or something related to it to a class or its objects
+</p>
+
+
+#h1 Self learing
+<p>=> is used to skip word function and skip a lot of syntax</p>
+
+#h1 
+```javascript
+function funct1(a){
+	console.log(a);
+} 
+```
+<br>or it can be written the following way
+
+```javascript
+function funct2(a){
+	return a;
+}
+```
+
diff --git a/1-js-basics/3-making-decisions/solution.md b/1-js-basics/3-making-decisions/solution.md
@@ -0,0 +1,22 @@
+#h1 Challenge 
+```javascript
+if(x>5){
+	print(x)
+}else{
+	print("no")
+}
+
+with ternery operator-->
+
+let var = (x>5)? print(5) : print("no")
+```
+
+#h1 Assignment
+```
+
+studentsWhoPass=[];
+for(let i=0, i<6, i++){
+	if !(allStudents[i]=="C-" || allStudents[i]==2 || allStudents[i]==1)
+	{studentsWhoPass.push(allStudents[i]);}
+}
+
diff --git a/1-js-basics/solution.md b/1-js-basics/solution.md
@@ -0,0 +1,26 @@
+# Challenge
+
+
+```javascript
+const items = ["item1", "item2", "item3"];
+const copyItems = [];
+
+for (let i = 0; i < items.length; i++) {
+  copyItems.push(items[i]);
+}
+
+items.forEach((item) => {
+  copyItems.push(item);
+});
+```
+
+```javascript
+for(let i = 1, i <= 20,i++){
+	if (i%3==0){console.log(i);}
+}
+```
+
+
+
+
+
diff --git a/2-terrarium/1-intro-to-html/basic.html b/2-terrarium/1-intro-to-html/basic.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Welcome to my youtube</title>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <style>
+            #main {
+                width: 50%;
+
+                gap: 50px;
+                display: flex;
+                padding: 10px;
+            }
+            a {
+                text-decoration: none;
+                color: black;
+                font-size: 20px;
+                background-color: lightseagreen;
+            }
+        </style>
+    </head>
+
+    <body>
+        <h1 style="text-align: center;">Khushal's Portfolio</h1>
+        <div id="main">
+
+            <a href="/blog">my blog</a><br>
+            <a href="/blog">About me</a><br>
+            <a href="/blog">Contact me</a><br>
+            <a href="/blog">Resume</a><br>
+            <a href="/blog">Projects</a>
+        </div>
+    </body>
+
+</html>
diff --git a/2-terrarium/images/plant1.png → ...rrarium/1-intro-to-html/images/plant1.png b/2-terrarium/images/plant1.png → ...rrarium/1-intro-to-html/images/plant1.png
diff --git a/2-terrarium/images/plant10.png → ...rarium/1-intro-to-html/images/plant10.png b/2-terrarium/images/plant10.png → ...rarium/1-intro-to-html/images/plant10.png
diff --git a/2-terrarium/images/plant11.png → ...rarium/1-intro-to-html/images/plant11.png b/2-terrarium/images/plant11.png → ...rarium/1-intro-to-html/images/plant11.png
diff --git a/2-terrarium/images/plant12.png → ...rarium/1-intro-to-html/images/plant12.png b/2-terrarium/images/plant12.png → ...rarium/1-intro-to-html/images/plant12.png
diff --git a/2-terrarium/images/plant13.png → ...rarium/1-intro-to-html/images/plant13.png b/2-terrarium/images/plant13.png → ...rarium/1-intro-to-html/images/plant13.png
diff --git a/2-terrarium/images/plant14.png → ...rarium/1-intro-to-html/images/plant14.png b/2-terrarium/images/plant14.png → ...rarium/1-intro-to-html/images/plant14.png
diff --git a/2-terrarium/images/plant2.png → ...rrarium/1-intro-to-html/images/plant2.png b/2-terrarium/images/plant2.png → ...rrarium/1-intro-to-html/images/plant2.png
diff --git a/2-terrarium/images/plant3.png → ...rrarium/1-intro-to-html/images/plant3.png b/2-terrarium/images/plant3.png → ...rrarium/1-intro-to-html/images/plant3.png
diff --git a/2-terrarium/images/plant4.png → ...rrarium/1-intro-to-html/images/plant4.png b/2-terrarium/images/plant4.png → ...rrarium/1-intro-to-html/images/plant4.png
diff --git a/2-terrarium/images/plant5.png → ...rrarium/1-intro-to-html/images/plant5.png b/2-terrarium/images/plant5.png → ...rrarium/1-intro-to-html/images/plant5.png
diff --git a/2-terrarium/images/plant6.png → ...rrarium/1-intro-to-html/images/plant6.png b/2-terrarium/images/plant6.png → ...rrarium/1-intro-to-html/images/plant6.png
diff --git a/2-terrarium/images/plant7.png → ...rrarium/1-intro-to-html/images/plant7.png b/2-terrarium/images/plant7.png → ...rrarium/1-intro-to-html/images/plant7.png
diff --git a/2-terrarium/images/plant8.png → ...rrarium/1-intro-to-html/images/plant8.png b/2-terrarium/images/plant8.png → ...rrarium/1-intro-to-html/images/plant8.png
diff --git a/2-terrarium/images/plant9.png → ...rrarium/1-intro-to-html/images/plant9.png b/2-terrarium/images/plant9.png → ...rrarium/1-intro-to-html/images/plant9.png
diff --git a/2-terrarium/1-intro-to-html/solution.md b/2-terrarium/1-intro-to-html/solution.md
@@ -0,0 +1,8 @@
+<h1>Challenge</h1>
+<p>using marquee attribute will make text scroll!</p>
+
+<h1>
+Assignment
+</h1>
+
+here is my [link](/2-terrarium/1-intro-to-html/basic.html) to a basic html web page
diff --git a/2-terrarium/2-intro-to-css/solution.md b/2-terrarium/2-intro-to-css/solution.md
@@ -0,0 +1,29 @@
+# Challenge
+To add those elements in web page, I have modified style of already created jar-glossy-long and jar-glossy-long.
+
+```css
+.jar-glossy-long {
+	width: 3%;
+	height: 8%;
+	background: white;
+	position: absolute;
+	bottom: 40%;
+	left: 5%;
+	opacity: 0.7;
+	border-radius: 1rem;
+}
+
+.jar-glossy-short {
+	width: 3%;
+	height: 20%;
+	background: white;
+	position: absolute;
+	bottom: 15%;
+	left: 5%;
+	opacity: 0.7;
+	border-radius: 1rem;
+}
+```
+
+# assignment
+here is my modified [style.css](/2-terrarium/terrarium-solution/style1.css)
diff --git a/2-terrarium/3-intro-to-DOM-and-closures/solution.md b/2-terrarium/3-intro-to-DOM-and-closures/solution.md
@@ -0,0 +1,15 @@
+# Challenge
+
+I have added another function to script.js. when double clicked, will move plants(I thought of moving them to center since position is relative, it is just moving.)
+
+```javascript
+    terrariumElement.ondblclick = movetoCenter;
+    function movetoCenter() {
+        terrariumElement.style.top = "50%";
+        terrariumElement.style.left = "50%";  
+    }
+```
+
+# Assignment
+
+In gmail, when we get a new mail, that mail is dynamically added at the top. here, when web page recieves this mail, it creates a new division and add content at top. this is done by DOM.
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/images/screenshot_gray.png → ...arium-solution/images/screenshot_gray.png b/2-terrarium/images/screenshot_gray.png → ...arium-solution/images/screenshot_gray.png
diff --git a/2-terrarium/terrarium-solution/index.html b/2-terrarium/terrarium-solution/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="./style1.css" />
+        <title>Welcome to my Virtual Terrarium</title>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </head>
+
+    <body>
+        <h1 id="1">My Terrarium</h1>
+        <div id="page">
+            <div id="left-container" class="container">
+                <div class="plant-holder">
+                    <img class="plant" alt="plant1" id="plant1" src="./images/plant1.png" />
+                </div>
+                <div class="plant-holder">
+                    <img class="plant" alt="plant2" id="plant2" src="./images/plant2.png" />
+                </div>
+                <div class="plant-holder">
+                    <img class="plant" alt="plant3" id="plant3" src="./images/plant3.png" />
+                </div>
+                <div class="plant-holder">
+                    <img class="plant" alt="plant4" id="plant4" src="./images/plant4.png" />
+                </div>
+                <div class="plant-holder">
+                    <img class="plant" alt="plant5" id="plant5" src="./images/plant5.png" />
+                </div>
+                <div class="plant-holder">
+                    <img class="plant" alt="plant6" id="plant6" src="./images/plant6.png" />
+                </div>
+                <div class="plant-holder">
+                    <img class="plant" alt="plant7" id="plant7" src="./images/plant7.png" />
+                </div>
+            </div>
+            <div id="right-container" class="container">
+                <div class="plant-holder">
+                    <img class="plant" alt="plant8" id="plant8" src="./images/plant8.png" />
+                </div>
+                <div class="plant-holder">
+                    <img class="plant" alt="plant9" id="plant9" src="./images/plant9.png" />
+                </div>
+                <div class="plant-holder">
+                    <img class="plant" alt="plant10" id="plant10" src="./images/plant10.png" />
+                </div>
+                <div class="plant-holder">
+                    <img class="plant" alt="plant11" id="plant11" src="./images/plant11.png" />
+                </div>
+                <div class="plant-holder">
+                    <img class="plant" alt="plant12" id="plant12" src="./images/plant12.png" />
+                </div>
+                <div class="plant-holder">
+                    <img class="plant" alt="plant13" id="plant13" src="./images/plant13.png" />
+                </div>
+                <div class="plant-holder">
+                    <img class="plant" alt="plant14" id="plant14" src="./images/plant14.png" />
+                </div>
+            </div>
+
+            <div id="terrarium">
+                <div class="jar-top"></div>
+                <div class="jar-walls">
+                    <div class="jar-glossy-long"></div>
+                    <div class="jar-glossy-short"></div>
+                </div>
+                <div class="dirt"></div>
+                <div class="jar-bottom"></div>
+            </div>
+        </div>
+        <script src="./script.js"></script>
+    </body>
+
+
+</html>
diff --git a/2-terrarium/terrarium-solution/script.js b/2-terrarium/terrarium-solution/script.js
@@ -0,0 +1,55 @@
+
+
+function dragElement(terrariumElement) {
+    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+
+    terrariumElement.onpointerdown = pointerDrag;
+    terrariumElement.ondblclick = moveCenter;
+
+    function pointerDrag(e) {
+        e.preventDefault();
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+
+        document.onpointermove = elementDrag;
+        document.onpointerup = stopElementDrag;
+    }
+
+    function moveCenter() {
+        terrariumElement.style.top = "50%";
+        terrariumElement.style.left = "50%";
+
+    }
+
+    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.onpointerup = null;
+        document.onpointermove = null;
+    }
+}
+
+
+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'));
+