This PR is the solution to the 'terrarium' #2

1-js-basics/solution.md

@@ -0,0 +1,180 @@
+# Sub Topic 1 - data types
+
+## Assignment : Data Types Practice
+
+### Instructions :
+```
+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 :
+```
+- Components associated with the cart : cart itself, user, product.
+- Cart : 
+1) size : number -> total items in the car
+2) isEmpty : boolean -> to check the state of the cart
+3) cartTotal : number -> total payable amount 
+4) items : [product1, product2] -> array of objects, as there are several objects a user can order
+
+- Product :
+2) productName : string -> name of products in car
+4) quantity : number -> total quantity of each product in cart
+5) productPrice : number -> price of each product in cart
+7) avalability : boolean -> check if the product is in stock or not
+
+- User :
+1) name : string -> name of the user
+2) address : object -> user address should be an object as it's value might change in future,
+3) isLoggedIn : boolean -> to check if user is logged in and can hence view the cart or not 
+and it has several nested components such as street, city, state, country, pincode.
+4) userId : string -> to differentiate one user from the other
+```
+## Challenge : 
+```
+1) let age = 1; let Age = 2; age == Age
+- above code resolves false in js, why? : because of the case sensitivity, in this case 'a' and 'A'.
+- incase the above situation said : age == age; or Age == Age the output would have been 'true'.
+- other such cases: 
+a. loose equality vs. strict equality : 0 == '0' (true); 0 === '0' (false)
+b. Nan === Nan (false) -> Nan is the only value in Javascript that doesn't equal itself
+c. addition of arrays: arrays are converted to strings during addition: [1,2] + [3,4] = "1,23,4"
+d. floating-point nos: 0.4 + 0.59 === 0.99 (false)-> floating point nos are depicted in binary in js.
+```
+
+## Review & Self Study :
+```
+- Exercise Done : https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/
+- Implemented all the given examples in the console and learned the concept
+- What I learned: 
+1. access and manipulation of different
+   parts of a URL, such as protocol, host, pathname, and query parameters
+2. String manipulation methods like split() to deconstruct or reconstruct custom URLs
+- Uses of accessing URL components in Javascript : 
+- client-side routing : eg. /home, /about
+- rendering specific components based on query parameter : eg. ?country=india
+- manipulating url paths
+- reconstructing urls
+```
+
+# Sub Topic 2 - functions, methods
+## Assignment : Fun with Functions
+
+### Instructions : 
+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 : 
+```js
+function twoSum(a, b) {
+  return a + b;
+}
+console.log(twoSum(2,4)); // output : 6
+```
+2. Function that doesn't return anything :
+```js
+function greetUser(name) {
+  console.log(`Hello, ${name}!`);
+}
+console.log(greetUser("Aakash")); // output : Hello, Aakash!
+```
+3. Function with mix of parameters : 
+```js
+function examEligibility(totalClasses, classesAttended, subject, name, success = 'Congrats', failure = 'Sorry'){
+  const percentage = (classesAttended/totalClasses)*100;
+  if (percentage > 75){
+    console.log('${success} ${name}, you're eligible for the ${subject} exam!');
+  }
+  else {
+    console.log('${failure} ${name} you can't attend the ${subject} exam :(');
+  }
+}
+```
+## 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 operators. Here's a suggestion for a program you can implement:
+You have a set of students from two different grading systems.
+
+### Solution :
+```js
+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?
+```js
+function checkSleepTime(taskGoal, tasksDone){
+  if (tasksDone >= taskGoal){
+    console.log('Congrats you can sleep now'); 
+  }
+  else {
+    console.log('You may not sleep now, acheive the target first');
+  }
+}
+```
+```js
+function checkSleepTime(taskGoal, tasksDone){
+
+  let permissionGranted = 'Well done, you can sleep now :)';
+  let permissionDenied = 'You must complete the tasks before sleeping .\/.'
+
+  switch(tasksDone >= taskGoal){
+
+    case true:
+      return permissionGranted;
+    case false:
+      return permissionDenied;
+  } 
+}
+```
+# 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 : 
+```js
+for(let i = 2; i < 20; i += 3){
+    console.log(i+1);
+}
+```
+
+## Challenge :
+1. forEach
+```js
+const array1 = [1,2,3,4,5,6];
+array.forEach((element) => console.log(element));
+```
+2. for of
+```js
+const array = [1,2,3,4,5,6];
+for (const element of array) {
+  console.log(element);
+}
+```
+3. map
+```js
+const array = [1,2,3,4,5,6];
+const mapped = array.map((x) => x);
+console.log(mapped);
+```

2-terrarium/blog.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Blog</title>
+</head>
+<body>
+    <header>
+        <nav>
+            <label class="logo">MyBlog</label>
+            <ul>
+                <li><a href="#home">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#projects">Projects</a></li>
+            </ul>
+            <input type="text" placeholder="search">
+        </nav>
+    </header>
+
+    <aside>
+        <div class="index">
+            <h3>Recent Posts</h3>
+            <ul>
+                <li><a href="#post1">Post 1</a></li>
+                <li><a href="#post2">Post 2</a></li>
+            </ul>
+        </div>
+        <div class="quick-links">
+            <h3>Quick Links</h3>
+            <ul>
+                <li>Instructions</li>
+                <li>Approach</li>
+                <li>Solution</li>
+            </ul>
+        </div>
+    </aside>
+
+    <main class="blog">
+        <article>
+            <h2>Blog Post Title : Assignment Topic-2</h2>
+            <section> 
+                <p>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.
+                (Just a simple design is enough)</p>
+            </section>
+        </article>
+    </main>
+
+    <footer>
+        <p>© 2024 My Blog | Follow me on 
+            <a href="#">Twitter</a> &nbsp;<a href="#">Twitter</a>&nbsp;<a href="#">Instagram</a> 
+            &nbsp; <a href="#">Github</a>
+        </p>
+    </footer>
+
+</body>
+</html>

2-terrarium/refactor.css

@@ -0,0 +1,73 @@
+body {
+	font-family: helvetica, arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+}
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+.container {
+    background-color: #eee;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 15%;
+    position: absolute;
+    top: 0;
+    align-items: center;
+}
+#left-container {
+    left: 0;
+}
+#right-container {
+    right: 0;
+}
+.plant-holder {
+    position: relative;
+    height: 13.7%;
+    width: 90%;
+    left: 5%;
+}
+.plant {
+    width: 80%;
+    max-height: 125%;
+    left: 40px;
+}
+#terrarium {
+    display: flex;
+    flex-direction: row;
+    background-color: blue;
+    width: 100%;
+    height: 100%;
+}
+.jar-top {
+    position: absolute;
+    left: 25%;
+    top: 15%;
+    width: 50%;
+    height: 5%;
+    background-color: #d1e1df;
+}
+.jar-walls {
+    height: 70%;
+	width: 60%;
+	background: #d1e1df;
+	border-top-right-radius: 1rem;
+    border-top-left-radius: 1rem;
+	position: absolute;
+	top: 20%;
+	left: 20%;
+	opacity: 0.5;
+	z-index: 1;
+}
+.jar-bottom {
+	width: 60%;
+	height: 5%;
+	background: #858585;
+	position: absolute;
+	top: 90%;
+	left: 20%;
+    border-bottom-right-radius: 1rem;
+    border-bottom-left-radius: 1rem;
+}

2-terrarium/refactor.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>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" />
+        <link rel="stylesheet" href="./refactor.css" />
+    </head>
+    <body>
+        <h1 style="color: red;">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="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 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>
+    </body>
+</html>