diff --git a/1-js-basics/1-data-types/solution.md b/1-js-basics/1-data-types/solution.md new file mode 100644 index 0000000..435f8fc --- /dev/null +++ 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
> + + +

+first one is username which is a string +

+

+next is alpha nemeric password which is again a string +

+

+an array of all items in the cart +

+

+an object in the follow whose object's format is something like following +``` +name : +value: +``` +
+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 +

diff --git a/1-js-basics/2-functions-methods/solution.md b/1-js-basics/2-functions-methods/solution.md new file mode 100644 index 0000000..993c181 --- /dev/null +++ b/1-js-basics/2-functions-methods/solution.md @@ -0,0 +1,23 @@ +#H1 Challenge +

method is something that belong to an object or a class. It is also defined within a class defination.
+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 +

+ + +#h1 Self learing +

=> is used to skip word function and skip a lot of syntax

+ +#h1 +```javascript +function funct1(a){ + console.log(a); +} +``` +
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 new file mode 100644 index 0000000..1469678 --- /dev/null +++ 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 new file mode 100644 index 0000000..2cdd645 --- /dev/null +++ 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 new file mode 100644 index 0000000..0e2e3d7 --- /dev/null +++ b/2-terrarium/1-intro-to-html/basic.html @@ -0,0 +1,37 @@ + + + + Welcome to my youtube + + + + + + + +

Khushal's Portfolio

+
+ + my blog
+ About me
+ Contact me
+ Resume
+ Projects +
+ + + \ No newline at end of file diff --git a/2-terrarium/images/plant1.png b/2-terrarium/1-intro-to-html/images/plant1.png similarity index 100% rename from 2-terrarium/images/plant1.png rename to 2-terrarium/1-intro-to-html/images/plant1.png diff --git a/2-terrarium/images/plant10.png b/2-terrarium/1-intro-to-html/images/plant10.png similarity index 100% rename from 2-terrarium/images/plant10.png rename to 2-terrarium/1-intro-to-html/images/plant10.png diff --git a/2-terrarium/images/plant11.png b/2-terrarium/1-intro-to-html/images/plant11.png similarity index 100% rename from 2-terrarium/images/plant11.png rename to 2-terrarium/1-intro-to-html/images/plant11.png diff --git a/2-terrarium/images/plant12.png b/2-terrarium/1-intro-to-html/images/plant12.png similarity index 100% rename from 2-terrarium/images/plant12.png rename to 2-terrarium/1-intro-to-html/images/plant12.png diff --git a/2-terrarium/images/plant13.png b/2-terrarium/1-intro-to-html/images/plant13.png similarity index 100% rename from 2-terrarium/images/plant13.png rename to 2-terrarium/1-intro-to-html/images/plant13.png diff --git a/2-terrarium/images/plant14.png b/2-terrarium/1-intro-to-html/images/plant14.png similarity index 100% rename from 2-terrarium/images/plant14.png rename to 2-terrarium/1-intro-to-html/images/plant14.png diff --git a/2-terrarium/images/plant2.png b/2-terrarium/1-intro-to-html/images/plant2.png similarity index 100% rename from 2-terrarium/images/plant2.png rename to 2-terrarium/1-intro-to-html/images/plant2.png diff --git a/2-terrarium/images/plant3.png b/2-terrarium/1-intro-to-html/images/plant3.png similarity index 100% rename from 2-terrarium/images/plant3.png rename to 2-terrarium/1-intro-to-html/images/plant3.png diff --git a/2-terrarium/images/plant4.png b/2-terrarium/1-intro-to-html/images/plant4.png similarity index 100% rename from 2-terrarium/images/plant4.png rename to 2-terrarium/1-intro-to-html/images/plant4.png diff --git a/2-terrarium/images/plant5.png b/2-terrarium/1-intro-to-html/images/plant5.png similarity index 100% rename from 2-terrarium/images/plant5.png rename to 2-terrarium/1-intro-to-html/images/plant5.png diff --git a/2-terrarium/images/plant6.png b/2-terrarium/1-intro-to-html/images/plant6.png similarity index 100% rename from 2-terrarium/images/plant6.png rename to 2-terrarium/1-intro-to-html/images/plant6.png diff --git a/2-terrarium/images/plant7.png b/2-terrarium/1-intro-to-html/images/plant7.png similarity index 100% rename from 2-terrarium/images/plant7.png rename to 2-terrarium/1-intro-to-html/images/plant7.png diff --git a/2-terrarium/images/plant8.png b/2-terrarium/1-intro-to-html/images/plant8.png similarity index 100% rename from 2-terrarium/images/plant8.png rename to 2-terrarium/1-intro-to-html/images/plant8.png diff --git a/2-terrarium/images/plant9.png b/2-terrarium/1-intro-to-html/images/plant9.png similarity index 100% rename from 2-terrarium/images/plant9.png rename to 2-terrarium/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 new file mode 100644 index 0000000..f2257cc --- /dev/null +++ b/2-terrarium/1-intro-to-html/solution.md @@ -0,0 +1,8 @@ +

Challenge

+

using marquee attribute will make text scroll!

+ +

+Assignment +

+ +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 new file mode 100644 index 0000000..3bf4ec5 --- /dev/null +++ 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) \ No newline at end of file diff --git a/2-terrarium/3-intro-to-DOM-and-closures/solution.md b/2-terrarium/3-intro-to-DOM-and-closures/solution.md new file mode 100644 index 0000000..940507a --- /dev/null +++ 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 new file mode 100644 index 0000000..9baee27 Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant1.png differ diff --git a/2-terrarium/terrarium-solution/images/plant10.png b/2-terrarium/terrarium-solution/images/plant10.png new file mode 100644 index 0000000..4b5136d Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant10.png differ diff --git a/2-terrarium/terrarium-solution/images/plant11.png b/2-terrarium/terrarium-solution/images/plant11.png new file mode 100644 index 0000000..3530fe5 Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant11.png differ diff --git a/2-terrarium/terrarium-solution/images/plant12.png b/2-terrarium/terrarium-solution/images/plant12.png new file mode 100644 index 0000000..b7f6dfd Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant12.png differ diff --git a/2-terrarium/terrarium-solution/images/plant13.png b/2-terrarium/terrarium-solution/images/plant13.png new file mode 100644 index 0000000..18938b7 Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant13.png differ diff --git a/2-terrarium/terrarium-solution/images/plant14.png b/2-terrarium/terrarium-solution/images/plant14.png new file mode 100644 index 0000000..87ccb62 Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant14.png differ diff --git a/2-terrarium/terrarium-solution/images/plant2.png b/2-terrarium/terrarium-solution/images/plant2.png new file mode 100644 index 0000000..b90853f Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant2.png differ diff --git a/2-terrarium/terrarium-solution/images/plant3.png b/2-terrarium/terrarium-solution/images/plant3.png new file mode 100644 index 0000000..17e10d1 Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant3.png differ diff --git a/2-terrarium/terrarium-solution/images/plant4.png b/2-terrarium/terrarium-solution/images/plant4.png new file mode 100644 index 0000000..4bbafad Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant4.png differ diff --git a/2-terrarium/terrarium-solution/images/plant5.png b/2-terrarium/terrarium-solution/images/plant5.png new file mode 100644 index 0000000..d303d40 Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant5.png differ diff --git a/2-terrarium/terrarium-solution/images/plant6.png b/2-terrarium/terrarium-solution/images/plant6.png new file mode 100644 index 0000000..823eeed Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant6.png differ diff --git a/2-terrarium/terrarium-solution/images/plant7.png b/2-terrarium/terrarium-solution/images/plant7.png new file mode 100644 index 0000000..fceb7f2 Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant7.png differ diff --git a/2-terrarium/terrarium-solution/images/plant8.png b/2-terrarium/terrarium-solution/images/plant8.png new file mode 100644 index 0000000..40b4f15 Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant8.png differ diff --git a/2-terrarium/terrarium-solution/images/plant9.png b/2-terrarium/terrarium-solution/images/plant9.png new file mode 100644 index 0000000..17a3435 Binary files /dev/null and b/2-terrarium/terrarium-solution/images/plant9.png differ diff --git a/2-terrarium/images/screenshot_gray.png b/2-terrarium/terrarium-solution/images/screenshot_gray.png similarity index 100% rename from 2-terrarium/images/screenshot_gray.png rename to 2-terrarium/terrarium-solution/images/screenshot_gray.png diff --git a/2-terrarium/terrarium-solution/index.html b/2-terrarium/terrarium-solution/index.html new file mode 100644 index 0000000..f712f7d --- /dev/null +++ b/2-terrarium/terrarium-solution/index.html @@ -0,0 +1,75 @@ + + + + + Welcome to my Virtual Terrarium + + + + + + +

My Terrarium

+
+
+
+ plant1 +
+
+ plant2 +
+
+ plant3 +
+
+ plant4 +
+
+ plant5 +
+
+ plant6 +
+
+ plant7 +
+
+
+
+ plant8 +
+
+ plant9 +
+
+ plant10 +
+
+ plant11 +
+
+ plant12 +
+
+ plant13 +
+
+ plant14 +
+
+ +
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/2-terrarium/terrarium-solution/script.js b/2-terrarium/terrarium-solution/script.js new file mode 100644 index 0000000..b359505 --- /dev/null +++ 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')); + diff --git a/2-terrarium/terrarium-solution/style.css b/2-terrarium/terrarium-solution/style.css new file mode 100644 index 0000000..71ea4d4 --- /dev/null +++ b/2-terrarium/terrarium-solution/style.css @@ -0,0 +1,108 @@ +body { + font-family: helvetica, arial, sans-serif; +} + +h1 { + color: #3a241d; + text-align: center; +} + +#left-container { + background-color: #eee; + width: 15%; + left: 0px; + top: 0px; + position: absolute; + height: 100%; + padding: 10px; +} + +#right-container { + background-color: #eee; + width: 15%; + right: 0px; + top: 0px; + position: absolute; + height: 100%; + padding: 10px; +} + +.plant-holder { + position: relative; + height: 13%; + left: -10px; +} + +.plant { + position: absolute; + max-width: 150%; + max-height: 150%; + z-index: 2; +} + +.jar-walls { + height: 80%; + width: 60%; + background: #d1e1df; + border-radius: 1rem; + position: absolute; + bottom: 0.5%; + left: 20%; + opacity: 0.5; + z-index: 1; +} + +.jar-top { + width: 50%; + height: 5%; + background: #d1e1df; + position: absolute; + bottom: 80.5%; + left: 25%; + opacity: 0.7; + z-index: 1; +} + +.jar-bottom { + width: 50%; + height: 1%; + background: #d1e1df; + position: absolute; + bottom: 0%; + left: 25%; + opacity: 0.7; +} + +.dirt { + width: 60%; + height: 5%; + background: #3a241d; + position: absolute; + border-radius: 0 0 1rem 1rem; + bottom: 1%; + left: 20%; + opacity: 0.7; + z-index: -1; +} + +.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; +} diff --git a/2-terrarium/terrarium-solution/style1.css b/2-terrarium/terrarium-solution/style1.css new file mode 100644 index 0000000..5434626 --- /dev/null +++ b/2-terrarium/terrarium-solution/style1.css @@ -0,0 +1,132 @@ + +h1 { + text-align: center; +} + +#page { + display: flex; + justify-content: space-between; + align-items: center; + height: 100vh; + width: 100%; +} + + +#left-container { + display: flex; + flex-direction: column; + justify-content: space-evenly; + background-color: #eee; + width: 15%; + left: 0px; + top: 0px; + position: absolute; + height: 100%; + padding: 10px; +} + +#right-container { + background-color: #eee; + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: 15%; + right: 0px; + top: 0px; + position: absolute; + height: 100%; + padding: 10px; +} + +.plant-holder { + display: flex; + justify-content: center; + align-items: center; + height: 13%; + width: 100%; +} + +.plant { + max-width: 150%; + max-height: 120%; + z-index: 2; +} + +#terrarium { + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + width: 60%; + height: 75%; + margin: 0 auto; +} + + + +.jar-walls { + height: 100%; + width: 100%; + background: #d1e1df; + border-radius: 4rem 4rem 0rem 0rem; + position: absolute; + bottom: 0.5%; + opacity: 0.5; + z-index: 1; +} + + +.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; +} + +.jar-top { + width: 70%; + height: 5%; + background: #d1e1df; + position: absolute; + bottom: 100%; + left: 15%; + opacity: 0.7; + z-index: 1; +} + +.jar-bottom { + width: 50%; + height: 1%; + background: #d1e1df; + position: absolute; + bottom: 0%; + left: 25%; + opacity: 0.7; +} + +.dirt { + background: #3a241d; + height: 5%; + width: 100%; + border-radius: 0 0 3rem 3rem; + z-index: 2; + opacity: 0.7; + position: absolute; + bottom: 0; +}