amfoss · Khushal928 · Feb 21, 2025 · Mar 5, 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,9 @@
+<h1>Challenge</h1>
+<p>using marquee attribute will make text scroll!</p>
+
+<h1>
+Assignment
+</h1>
+<p>
+here is my (link)[/basic.html] to a basic html web page
+</p>
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/3-intro-to-DOM-and-closures/tic-tac-toe/index.html b/2-terrarium/3-intro-to-DOM-and-closures/tic-tac-toe/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="./style.css" />
+        <title>tic-tac-toe</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 style="text-align: center;">tic-tac-toe</h1>
+        <div style="text-align: center;"><button id = "start button" >START THE GAME</button></div>
+        <table border="1" id="table" style="font-size:xx-large; text-align: center; margin: auto; width: 300px; height: 300px;margin-top: 100px;border-collapse: collapse;">
+            <tr>
+                <td id="A11" style="height: 100px;width: 100px;"><button id="A011" style=" height: 100%; width: 100%;"></button></td>
+                <td id="A12" style="height: 100px;width: 100px;"><button id="A012" style="background-color:crimson; height: 100%; width: 100%;"></button></td>
+                <td id="A13" style="height: 100px;width: 100px;"><button id="A013" style="background-color:yellowgreen; height: 100%; width: 100%;"></button></td>
+            </tr>
+            <tr>
+                <td id="A21" style="height: 100px;width: 100px;"><button id="A021" style="background-color:yellowgreen; height: 100%; width: 100%;"></button></td>
+                <td id="A22" style="height: 100px;width: 100px;"><button id="A022" style="background-color: blue; height: 100%; width: 100%;"></button></td>
+                <td id="A23" style="height: 100px;width: 100px;"><button id="A023" style="background-color:crimson; height: 100%; width: 100%;"></button></td>
+            </tr>
+            <tr>
+                <td id="A31" style="height: 100px;width: 100px;"><button id="A031" style="background-color: blue; height: 100%; width: 100%;"></button></td>
+                <td id="A32" style="height: 100px;width: 100px;"><button id="A032" style="background-color:crimson; height: 100%; width: 100%;"></button></td>
+                <td id="A33" style="height: 100px;width: 100px;"><button id="A033" style="background-color:yellowgreen; height: 100%; width: 100%;"></button></td>
+            </tr>
+        </table>
+        <p id="message">hii</p>
+        <script src="script1.js"></script>
+
+    </body>
diff --git a/2-terrarium/3-intro-to-DOM-and-closures/tic-tac-toe/script.js b/2-terrarium/3-intro-to-DOM-and-closures/tic-tac-toe/script.js
@@ -0,0 +1,136 @@
+let startbutton = document.getElementById('start button');
+startbutton.addEventListener(
+    'click', () => {
+        let counter = 0;
+        var cell1 = {
+            id: 'A011',
+            cellid:'A11',
+            value: null,
+        }
+        var cell2 = {
+            id: 'A012',
+            cellid:'A12',
+            value: null,
+        }
+        var cell3 = {
+            id: 'A013',
+            cellid:'A13',
+            value: null,
+        }
+        var cell4 = {
+            id: 'A021',
+            cellid:'A21',
+            value: null,
+        }
+        var cell5 = {
+            id: 'A022',
+            cellid:'A22',   
+            value: null,
+        }
+        var cell6 = {
+            id: 'A023',
+            cellid:'A23',
+            value: null,
+        }
+        var cell7 = {
+            id: 'A031',
+            cellid:'A31',
+            value: null,
+        }
+        var cell8 = {
+            id: 'A032',
+            cellid:'A32',
+            value: null,
+        }
+        var cell9 = {
+            id: 'A033',
+            cellid:'A33',
+            value: null,
+        }
+        let cells = [cell1, cell2, cell3, cell4, cell5, cell6, cell7, cell8, cell9];
+        for (let i=0; i<9; i++){
+            cells[i].c=document.getElementById(cells[i].id);
+            cells[i].c1=document.getElementById(cells[i].cellid);
+        }
+
+
+        for (let i=0; i<9; i++){
+            cells[i].c.addEventListener('click', () => {
+                if (counter % 2 == 0) {
+                    cells[i].value = 'X';
+                    console.log(counter)
+                    addX(cells[i].c);
+                    check1();
+                } else {
+                    cells[i].value = 'O';
+                    console.log(counter)
+                    addO(cells[i].c);
+                    check1();
+                }
+                counter++;
+
+            }
+            );
+        }
+
+        function addX(input){
+            for(let i = 0; i < 9; i++){
+                if (input == cells[i].c){
+                    cells[i].c1.innerHTML = 'X';
+                }
+            }
+        }
+
+        function addO(input){
+            for(let i = 0; i < 9; i++){
+                if (input == cells[i].c){
+                    cells[i].c1.innerHTML = 'O';
+                }
+            }
+        }
+
+
+        function check1(){
+            win = [[cell1,cell2,cell3],[cell4,cell5,cell6],[cell7,cell8,cell9],[cell1,cell4,cell7],[cell2,cell5,cell8],[cell3,cell6,cell9],[cell1,cell5,cell9],[cell3,cell5,cell7]];
+            for (let i=0; i<8; i++){
+                if (win[i][0].value == 'X' && win[i][1].value == 'X' && win[i][2].value == 'X'){
+                    alert('X wins');
+                }
+                if (win[i][0].value == 'O' && win[i][1].value == 'O' && win[i][2].value == 'O'){
+                    alert('O wins');
+                }
+            }
+        }     
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+let listofkeys = ['A011','A012','A013','A021','A022','A023','A031','A032','A033' ];