From 43eff581a4e8911620f375f4acf52ea56a373dbe Mon Sep 17 00:00:00 2001 From: hishamm-10 Date: Fri, 29 Nov 2024 02:31:38 +0530 Subject: [PATCH 1/4] 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/4] 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/4] 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; + }); +``` + + + + + + + + + + + + From baaf8c9213623f0d868ea57bddc074ea85401cd8 Mon Sep 17 00:00:00 2001 From: hishamm-10 Date: Sun, 8 Dec 2024 16:22:56 +0530 Subject: [PATCH 4/4] typing-game --- 3-typing-game/image.png | Bin 0 -> 38544 bytes 3-typing-game/solution.md | 303 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 303 insertions(+) create mode 100644 3-typing-game/image.png create mode 100644 3-typing-game/solution.md diff --git a/3-typing-game/image.png b/3-typing-game/image.png new file mode 100644 index 0000000000000000000000000000000000000000..4fd64df6880624b8f1d358a150e1df186729f9c9 GIT binary patch literal 38544 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 literal 0 HcmV?d00001 diff --git a/3-typing-game/solution.md b/3-typing-game/solution.md new file mode 100644 index 0000000..46a385b --- /dev/null +++ b/3-typing-game/solution.md @@ -0,0 +1,303 @@ +# 3-typing-game + +## my-typing game: + +index.html +``` + + + + + + Typing Game + + + +

Typing Game!

+

Practice your typing skills with a quote from Sherlock Holmes. Click Start to begin!

+

+

+
+ + +
+ + + +``` +style.css +``` +body { + font-family: Arial, sans-serif; + text-align: center; + margin: 0; + padding: 20px; + background-color: #f4f4f9; + } + + h1 { + color: #333; + } + + p { + font-size: 1.2em; + margin: 10px 0; + } + + #quote { + font-size: 1.5em; + font-weight: bold; + margin: 20px auto; + max-width: 600px; + line-height: 1.6; + text-align: justify; + } + + .highlight { + background-color: yellow; + } + + .error { + background-color: lightcoral; + border: 2px solid red; + } + + input[type="text"] { + font-size: 1em; + padding: 10px; + margin-right: 10px; + } + + button { + padding: 10px 15px; + font-size: 1em; + background-color: #007bff; + color: #fff; + border: none; + cursor: pointer; + } + + button:hover { + background-color: #0056b3; + } +``` +script.js +```// inside script.js +// all of our quotes +const quotes = [ + 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.', + 'There is nothing more deceptive than an obvious fact.', + 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.', + 'I never make exceptions. An exception disproves the rule.', + 'What one man can invent another can discover.', + 'Nothing clears up a case so much as stating it to another person.', + 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', +]; +// store the list of words and the index of the word the player is currently typing +let words = []; +let wordIndex = 0; +// the starting time +let startTime = Date.now(); +// page elements +const quoteElement = document.getElementById('quote'); +const messageElement = document.getElementById('message'); +const typedValueElement = document.getElementById('typed-value'); + +// at the end of script.js +document.getElementById('start').addEventListener('click', () => { + // get a quote + const quoteIndex = Math.floor(Math.random() * quotes.length); + const quote = quotes[quoteIndex]; + // Put the quote into an array of words + words = quote.split(' '); + // reset the word index for tracking + wordIndex = 0; + + // UI updates + // Create an array of span elements so we can set a class + const spanWords = words.map(function(word) { return `${word} `}); + // Convert into string and set as innerHTML on quote display + quoteElement.innerHTML = spanWords.join(''); + // Highlight the first word + quoteElement.childNodes[0].className = 'highlight'; + // Clear any prior messages + messageElement.innerText = ''; + + // Setup the textbox + // Clear the textbox + typedValueElement.value = ''; + // set focus + typedValueElement.focus(); + // set the event handler + + // Start the timer + startTime = new Date().getTime(); + }); + + // at the end of script.js +typedValueElement.addEventListener('input', () => { + // Get the current word + const currentWord = words[wordIndex]; + // get the current value + const typedValue = typedValueElement.value; + + if (typedValue === currentWord && wordIndex === words.length - 1) { + // end of sentence + // Display success + const elapsedTime = new Date().getTime() - startTime; + const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; + messageElement.innerText = message; + } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { + // end of word + // clear the typedValueElement for the new word + typedValueElement.value = ''; + // move to the next word + wordIndex++; + // reset the class name for all elements in quote + for (const wordElement of quoteElement.childNodes) { + wordElement.className = ''; + } + // highlight the new word + quoteElement.childNodes[wordIndex].className = 'highlight'; + } else if (currentWord.startsWith(typedValue)) { + // currently correct + // highlight the next word + typedValueElement.className = ''; + } else { + // error state + typedValueElement.className = 'error'; + } + }); + ``` + +## Assignment +Instructions: +Create a small game that uses keyboard events to do tasks. It may be a different kind of typing game, or an art type game that paints pixels to the screen on keystrokes. Get creative! Try to implement concepts that you have learnt in this topic. + +Solution: + + +![alt text](image.png) +index.html +``` + + + + + hishams Pixel Painter + + + +

Pixel Painter

+

Use arrow keys to move the cursor and press the spacebar to paint!

+
+ + + +``` +style.css +``` +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #f4f4f9; + margin: 0; + padding: 20px; + } + + h1 { + color: #333; + margin-bottom: 10px; + } + + p { + font-size: 1.2em; + } + + .grid { + display: grid; + grid-template-columns: repeat(10, 30px); + grid-gap: 2px; + margin: 20px auto; + width: fit-content; + } + + .cell { + width: 30px; + height: 30px; + background-color: white; + border: 1px solid #ddd; + } + + .cursor { + border: 2px solid red; + } + + .painted { + background-color: #ffeb3b; + } + ``` + + script.js + ```const grid = document.getElementById('grid'); + +// Create a 10x10 grid +for (let i = 0; i < 100; i++) { + const cell = document.createElement('div'); + cell.classList.add('cell'); + grid.appendChild(cell); +} + +// Initialize cursor position +let cursorX = 0; +let cursorY = 0; + +// Helper function to get cell index +const getCellIndex = (x, y) => y * 10 + x; + +// Get all cells +const cells = document.querySelectorAll('.cell'); + +// Add initial cursor +cells[getCellIndex(cursorX, cursorY)].classList.add('cursor'); + +// Event listener for keyboard events +document.addEventListener('keydown', (e) => { + // Remove the cursor class from the current cell + cells[getCellIndex(cursorX, cursorY)].classList.remove('cursor'); + + // Move the cursor based on keypress + if (e.key === 'ArrowUp' && cursorY > 0) cursorY--; + if (e.key === 'ArrowDown' && cursorY < 9) cursorY++; + if (e.key === 'ArrowLeft' && cursorX > 0) cursorX--; + if (e.key === 'ArrowRight' && cursorX < 9) cursorX++; + + // Paint the cell if spacebar is pressed + if (e.key === ' ') { + cells[getCellIndex(cursorX, cursorY)].classList.add('painted'); + } + + // Clear the grid if 'C' is pressed + if (e.key.toLowerCase() === 'c') { + cells.forEach(cell => cell.classList.remove('painted')); + } + + // Add the cursor class to the new cell + cells[getCellIndex(cursorX, cursorY)].classList.add('cursor'); +}); +``` + + + + + + + + + + + + + + +