From 43eff581a4e8911620f375f4acf52ea56a373dbe Mon Sep 17 00:00:00 2001 From: hishamm-10 Date: Fri, 29 Nov 2024 02:31:38 +0530 Subject: [PATCH 1/3] shopping-cart --- 1-js-basics/1-data-types/solution.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 1-js-basics/1-data-types/solution.md 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..531bb1c --- /dev/null +++ b/1-js-basics/1-data-types/solution.md @@ -0,0 +1,17 @@ +# Data Types in a Shopping Cart + +## Introduction +A shopping cart requires various data types to manage products, user interactions, and calculations. Below is an overview of the data types used, their purposes, and why they are essential. + +--- + +## Data Types + +### 1. **String** +- **Purpose:** Store textual data like product names, user details, and currency symbols. +- **Example:** + ```javascript + let productName = "Wireless Headphones"; + let userName = "John Doe"; + let currency = "$"; + From c14679c234fbd5a29a16b58cd312acf8bfa9f3c8 Mon Sep 17 00:00:00 2001 From: hishamm-10 Date: Sun, 8 Dec 2024 13:43:55 +0530 Subject: [PATCH 2/3] complete js basics --- 1-js-basics/solution.md | 209 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 1-js-basics/solution.md diff --git a/1-js-basics/solution.md b/1-js-basics/solution.md new file mode 100644 index 0000000..1b35aa0 --- /dev/null +++ b/1-js-basics/solution.md @@ -0,0 +1,209 @@ +# Sub Topic 1 - Data Types + + ## Assignment : Data Type Practice + + ### Instruction : + -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 : + Product : + 1, productName : String-> name of products in cart. + 2, qunatityItems : number-> number of each iteem in cart. + 3, itemPrice : number -> price of each item. + 4, availability : boolean -> weather the item is present or not. + + User : + 5, userName : string -> name of the user. + 6, userAddress : object -> as the address might change. + 7, userId : string -> seperate id for each users. + + Cart: + 8, countItem : number -> total items in cart. + 9, items : [prod1,prod2] -> array of objects. + 10, cartTotal : number -> total amount. + 11, isEmpty : boolean -> check wheather the cart is Empty or not. + + ## Challenge : + 1, Try this in your console: let age = 1; let Age = 2; age == Age (resolves false -- why?) : because case sensitivity, as 'a' and 'A'are Different. + a, if '''age == age; Age == Age''' will give True. + +# Sub Topic 2 - functions,methods +## Assignment : Fun with Functions + +### Instruction : +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: +```function addNumbers(a, b) { + return a + b; +} +``` + +2, Function that doesnot return Anything: +```function logMessage(message) { + console.log(message); +} +``` +3, Function with only default parameters: +``` function calculateDiscount(price, discountRate = 0.1) { + return price - price * discountRate; +} +``` +4, Arrow function that return something: +```const multiplyNumbers = (x, y) => x * y;``` +5, Arrow function that doesnot return anything: +```const logDate = () => { + console.log(`Today's date is ${new Date().toDateString()}`); +}; +``` + +## 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 operaators. Heres a suggestion for a program you can implement: +You have a set of students from two different grading system. + +### Solution : + +``` +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? +```function checkVotingEligibility(age) { + if (age >= 18) { + return "Eligible to vote"; + } else { + return "Not eligible to vote"; + } +} + +console.log(checkVotingEligibility(20)); // +console.log(checkVotingEligibility(16)); // +``` +Re-written : +```function checkVotingEligibility(age) { + return age >= 18 ? "Eligible to vote" : "Not eligible to vote"; +} + +console.log(checkVotingEligibility(20)); // +console.log(checkVotingEligibility(16)); // +``` +My preferance : + +Logical Operators (if-else): +Preferred when the logic is complex or involves multiple conditions. +Easier to read and maintain for nested or multi-step logic. + +Ternary Expression: +Ideal for simple conditions with straightforward outcomes. +Compact and efficient for small, clear logic. + +# 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 : +``` +for (let i = 1; i <= 20; i += 3) { + console.log(i); +} +``` +## Challenge: +1, For each : +```let allStudents = [ + 'A', + 'B-', + 1, + 4, + 5, + 2 +]; + +let studentsWhoPass = []; + +allStudents.forEach(grade => { + if (typeof grade === 'number' && grade >= 3) { + studentsWhoPass.push(grade); + } else if (typeof grade === 'string' && ['A', 'A-', 'B', 'B-', 'C'].includes(grade)) { + studentsWhoPass.push(grade); + } +}); + +console.log('Students who pass (forEach):', studentsWhoPass); +``` +2, for-of: +```let studentsWhoPass = []; + +for (let grade of allStudents) { + if (typeof grade === 'number' && grade >= 3) { + studentsWhoPass.push(grade); + } else if (typeof grade === 'string' && ['A', 'A-', 'B', 'B-', 'C'].includes(grade)) { + studentsWhoPass.push(grade); + } +} + +console.log('Students who pass (for-of):', studentsWhoPass); +``` +3,map: +```let studentsWhoPass = allStudents.map(grade => { + if (typeof grade === 'number' && grade >= 3) { + return grade; + } else if (typeof grade === 'string' && ['A', 'A-', 'B', 'B-', 'C'].includes(grade)) { + return grade; + } else { + return null; + } +}).filter(grade => grade !== null); + +console.log('Students who pass (map):', studentsWhoPass); +``` + + + + + + + + + + + + + + + + + + + + + + + + + + From c56dd88c060c32f478fb5c240449da7c64d9ed4a Mon Sep 17 00:00:00 2001 From: hishamm-10 Date: Sun, 8 Dec 2024 14:41:50 +0530 Subject: [PATCH 3/3] 2-terrarium --- 2-terrarium/solution.md | 151 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 2-terrarium/solution.md diff --git a/2-terrarium/solution.md b/2-terrarium/solution.md new file mode 100644 index 0000000..24c2953 --- /dev/null +++ b/2-terrarium/solution.md @@ -0,0 +1,151 @@ +# My Terrarium +## Subtoipc 1: Intro to HTML + +### Assignment + Instruction: + 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. + + Solution : + ``` + + + + + Personal Website + + + +
+ +
+ +
+
+ Your Photo +
+

Hi, I'm [Your Name]

+

A [Your Profession]

+
+
+
+ +
+

My Work

+
+
+ Project 1 +

Project 1

+

Brief description of Project 1.

+
+
+ Project 2 +

Project 2

+

Brief description of Project 2.

+
+
+ Project 3 +

Project 3

+

Brief description of Project 3.

+
+
+ Project 4 +

Project 4

+

Brief description of Project 4.

+
+
+
+ + + + + ``` + +### Challenge + ``` +

Next Task

+ + ``` + +## Suttopic 2: Intro to CSS +### Assignment + + +### Challenge +``` +.jar { + width: 200px; + height: 300px; + background: #b8e994; /* Light green jar color */ + border-radius: 50px; + position: relative; + overflow: hidden; +} + +.jar-glossy-long { + position: absolute; + width: 50px; + height: 200px; + background: linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); + border-radius: 25px; + bottom: 20px; + left: 20px; + transform: rotate(-15deg); +} + +.jar-glossy-short { + position: absolute; + width: 30px; + height: 100px; + background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%); + border-radius: 15px; + bottom: 40px; + left: 60px; + transform: rotate(-10deg); +} +``` + +## SubTopic-3: Intro to DOM and Closures +### Assignment + Insrtructions :Research the DOM a little more by 'adopting' a DOM element. Visit the MDN's list of DOM interfaces and pick one. Find it being used on a web site in the web, and write an explanation of how it is used. + + Solution : One common use of IntersectionObserver is for lazy loading images. For example, on websites like Medium or Unsplash, images outside the viewport are not immediately loaded to save bandwidth and improve performance. + +This technique is used on modern web platforms to: + Optimize Performance: Only load assets when needed. + Enhance User Experience: Faster page loads and reduced initial bandwidth consumption. + SEO-Friendly: Images still load for search engines that index content. + +### Challenge +```terrariumElement.addEventListener("dblclick", (event) => { + let highlightColor = "#FFD700"; + terrariumElement.style.border = "solid black 2px"; + terrariumElement.style.maxWidth = "85%"; + terrariumElement.style.background = highlightColor; + }); +``` + + + + + + + + + + + +