├── .all-contributorsrc ├── .github └── FUNDING.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Day-01_Variables_and_Data_Types ├── 01. Variables and Data Types.js ├── Day-01.png └── README.md ├── Day-02_Operators ├── 01. Operators.js ├── Day-02.png └── README.md ├── Day-03_Control_Structures ├── 01. Control Structures.js ├── Day-03.png └── README.md ├── Day-04_Loops ├── 01. Loops.js ├── Day-04.png ├── Pattern.png └── README.md ├── Day-05_Functions ├── 01. Functions.js ├── Day-05 Code Snap.png └── README.md ├── Day-06_Arrays ├── 01. Arrays.js ├── Day-06 Code Snap.png └── README.md ├── Day-07_Objects ├── 01. Objects.js ├── Day-07 Code Snap.png └── README.md ├── Day-08_ES6+_Features ├── 01. ES6+ Features.js ├── Day-08 Code Snap.png └── README.md ├── Day-09_DOM_Manipulation ├── 01. DOM Manipulation.html ├── 01. DOM Manipulation.js ├── Day-09 Code Snap.png ├── README.md ├── changedImage.png └── firstImage.png ├── Day-10_Event_Handling ├── 01. Event Handling.html ├── 01. Event Handling.js ├── Day-10 Code Snap.png └── README.md ├── Day-11_Promises_and_Async_Await ├── 01. Promises and Async Await.js ├── Day-11 Code Snap.png └── README.md ├── Day-12_Error_Handling ├── 01. Error Handling.js ├── Day-12 Code Snap.png └── README.md ├── Day-13_Modules ├── README.md ├── Task-01 │ ├── Add.js │ └── Main.js ├── Task-02 │ ├── Main.js │ └── Person.js ├── Task-03 │ ├── Main.js │ └── Math.js ├── Task-04 │ ├── Main.js │ └── Multiply.js ├── Task-05 │ ├── Constants.js │ └── Main.js ├── Task-06 │ └── Main.js ├── Task-07 │ └── Main.js └── Task-08 │ ├── dist │ └── bundle.js │ ├── src │ ├── add.js │ ├── index.js │ └── multiply.js │ └── webpack.config.js ├── Day-14_Classes ├── 01. Classes.js ├── Day-14 Code Snap.png └── README.md ├── Day-15_Closures ├── 01. Closures.js ├── Day-15 Code Snap.png └── README.md ├── Day-16_Recursion ├── 01. Recursion.js ├── Day-16 Code Snap.png └── README.md ├── Day-17_Data_Structures ├── 01. Data_Structures.js ├── Day-17 Code Snap.png └── README.md ├── Day-18_Algorithms ├── 01. Algorithms.js ├── Day-18 Code Snap.png └── README.md ├── Day-19_Regular_Expressions ├── 01. Regular Expressions.js ├── Day-19 Code Snap.png └── README.md ├── Day-20_LocalStorage_and_SessionStorage ├── README.md ├── Task-01 │ ├── index.html │ └── script.js ├── Task-02 │ ├── index.html │ └── script.js ├── Task-03 │ ├── index.html │ └── script.js ├── Task-04 │ ├── index.html │ └── script.js ├── Task-05 │ ├── index.html │ └── script.js ├── Task-06 │ ├── index.html │ └── script.js ├── Task-07 │ ├── index.html │ └── script.js ├── Task-08 │ ├── index.html │ └── script.js ├── Task-09 │ ├── index.html │ └── script.js └── Task-10 │ ├── index.html │ └── script.js ├── Day-21_Leetcode_Easy ├── 01. Leetcode Easy.js ├── Day-21 Code Snap.png └── README.md ├── Day-22_Leetcode_Medium ├── 01. Leetcode Medium.js ├── Day-22 Code Snap.png └── README.md ├── Day-23_Leetcode_Hard ├── 01. Leetcode Hard.js ├── Day-23 Code Snap.png └── README.md ├── Day-24_Project-01_Weather_App └── 01. Weather App Project │ ├── Project-01 Weather App │ ├── LICENSE │ ├── README.md │ ├── index.html │ ├── output │ │ ├── Image1.png │ │ └── Image2.png │ ├── script.js │ └── styles.css │ └── README.md ├── Day-25_Project-02_Movie_Search_App ├── Project-02 Movie Search App │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── index.html │ ├── output │ │ ├── Image1.png │ │ └── Image2.png │ ├── script.js │ └── style.css └── README.md ├── Day-26_Project-03_Chat_Application ├── Project-03 Chat Application │ ├── .gitignore │ ├── Chat Application.mp4 │ ├── Client │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── LICENSE │ ├── README.md │ ├── Server │ │ └── server.js │ ├── package-lock.json │ ├── package.json │ └── style.css └── README.md ├── Day-27_Project-04_Task_Management_App ├── Project-04 Task Management App │ ├── LICENSE │ ├── README.md │ ├── favicon-todo.png │ ├── index.html │ ├── output │ │ ├── Image1.png │ │ └── Image2.png │ ├── script.js │ └── style.css └── README.md ├── Day-28_Project-05_E-Commerce_Website ├── Project-05 E-Commerce Website │ ├── E-Commerce Website.mp4 │ ├── LICENSE │ ├── README.md │ ├── assets │ │ ├── Frame 560.png │ │ ├── Frame 600.png │ │ └── frame 900.jpg │ ├── checkout.css │ ├── checkout.html │ ├── checkout.js │ ├── index.html │ ├── output │ │ ├── Image1.png │ │ ├── Image2.png │ │ └── Image3.png │ ├── products │ │ ├── Controller.png │ │ ├── acer.png │ │ ├── backlit-keyboard.png │ │ ├── dell.png │ │ ├── gaming-cpu.png │ │ ├── headphone.png │ │ ├── hp.png │ │ ├── infinix.png │ │ ├── iphone.png │ │ ├── iq7.png │ │ ├── iqo.png │ │ ├── mac-book.png │ │ ├── mouse.png │ │ ├── one+.png │ │ └── victus.png │ ├── script.js │ ├── shopping.js │ └── style.css └── README.md ├── Day-29_Project-06_Social_Media_Dashboard ├── Project-06 Social Media Dashboard │ ├── README.md │ ├── Social Media Dashboard.mp4 │ ├── dashboard │ │ ├── dashboard.css │ │ ├── dashboard.html │ │ └── dashboard.js │ ├── index.html │ ├── loginPage │ │ ├── login.css │ │ ├── login.html │ │ └── login.js │ ├── output │ │ ├── Image1.png │ │ ├── Image2.png │ │ └── Image3.png │ ├── signupPage │ │ ├── signup.css │ │ ├── signup.html │ │ └── signup.js │ ├── social-media-logo.svg │ └── style.css └── README.md ├── Day-30_Project-07_Social_Media_Dashboard_Extra_Features ├── Project-07 Social Media Dashboard Extra Features │ ├── README.md │ ├── dashboard │ │ ├── dashboard.css │ │ ├── dashboard.html │ │ └── dashboard.js │ ├── index.html │ ├── loginPage │ │ ├── login.css │ │ ├── login.html │ │ └── login.js │ ├── output │ │ ├── Image1.png │ │ ├── Image2.png │ │ └── Image3.png │ ├── signupPage │ │ ├── signup.css │ │ ├── signup.html │ │ └── signup.js │ ├── social-media-logo.svg │ └── style.css └── README.md ├── LICENSE ├── README.md └── hero.svg /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "30Days-JavaScript-Challenge", 3 | "projectOwner": "ChinmayKaitade", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "contributors": [ 7 | { 8 | "login": "shitcodebykaushik", 9 | "name": "kaushik raj", 10 | "avatar_url": "https://avatars.githubusercontent.com/u/122168016?v=4", 11 | "profile": "https://github.com/shitcodebykaushik", 12 | "contributions": [ 13 | "code" 14 | ] 15 | }, 16 | { 17 | "login": "khushramnani", 18 | "name": "⚡ KHUSH ⚡", 19 | "avatar_url": "https://avatars.githubusercontent.com/u/123285904?v=4", 20 | "profile": "https://github.com/khushramnani", 21 | "contributions": [ 22 | "code" 23 | ] 24 | } 25 | ], 26 | "files": [ 27 | "README.md" 28 | ], 29 | "imageSize": 100, 30 | "commit": true, 31 | "contributorsPerLine": 7, 32 | "commitType": "docs", 33 | "commitConvention": "angular" 34 | } 35 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [ChinmayKaitade] 4 | patreon: chinmaydotcom 5 | buy_me_a_coffee: chinmaydotcom 6 | custom: [https://github.com/sponsors/ChinmayKaitade] 7 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to [_30 Days of JavaScript Challenge_](https://github.com/ChinmayKaitade/30Days-JavaScript-Challenge) 2 | 3 | We welcome contributions of all kinds! Here are some guidelines to help you get started. 4 | 5 | ## How to Contribute 6 | 7 | 1. **Fork the Repository**: Click the "Fork" button on the top right to create your own copy of the repository. 8 | 9 | 2. **Clone Your Fork**: Clone your forked repository to your local machine using `git clone https://github.com/ChinmayKaitade/30Days-JavaScript-Challenge.git`. 10 | 11 | 3. **Create a Branch**: Create a new branch for your feature or bug fix using `git checkout -b your-branch-name`. 12 | 13 | 4. **Make Changes**: Make your changes to the code. 14 | 15 | 5. **Commit Your Changes**: Commit your changes with a clear and descriptive commit message using `git commit -m "Description of your changes"`. 16 | 17 | 6. **Push to Your Fork**: Push your changes to your forked repository using `git push origin your-branch-name`. 18 | 19 | 7. **Submit a Pull Request**: Open a pull request from your branch to the main repository's `main` branch. 20 | 21 | ## Code of Conduct 22 | 23 | Please read our [Code of Conduct](https://github.com/ChinmayKaitade/30Days-JavaScript-Challenge/blob/main/CODE_OF_CONDUCT.md) to understand the standards we expect for all contributors. 24 | 25 | ## Reporting Issues 26 | 27 | If you find any bugs or have feature requests, please [open an issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-an-issue.). 28 | 29 | ## Style Guide 30 | 31 | - Follow the coding style used in the project. 32 | - Use meaningful variable names and comments. 33 | - Write unit tests for new features or bug fixes. 34 | 35 | ## Contact 36 | 37 | If you have any questions or need assistance, feel free to reach out to [chinmaykaitade123@gmail.com](mailto:chinmaykaitade123@gmail.com) or [GitHub Repository Maintainer](https://github.com/ChinmayKaitade.). 38 | 39 | Thank you for your contributions! 40 | -------------------------------------------------------------------------------- /Day-01_Variables_and_Data_Types/Day-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-01_Variables_and_Data_Types/Day-01.png -------------------------------------------------------------------------------- /Day-01_Variables_and_Data_Types/README.md: -------------------------------------------------------------------------------- 1 | # Day-01 : Variables and Data Types 🍵❤️‍🔥 2 | 3 | ![Day-01 Code Snap](./Day-01.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Variable Declaration**_ 8 | 9 | - **Task 1:** Declare a variable using `var`, assign it a number, and log the value to the console. 10 | - **Task 2:** Declare a variable using `let`, assign it a string, and log the value to the console. 11 | 12 |
13 | 14 | _**Activity 2: Constant Declaration**_ 15 | 16 | - **Task 3:** Declare a variable using `const`, assign it a boolean value, and log the value to the console. 17 | 18 |
19 | 20 | _**Activity 3: Data Types**_ 21 | 22 | - **Task 4:** Create variables of different data types (number, string, boolean, object, array) and log each variable's type using the `typeof` operator. 23 | 24 |
25 | 26 | _**Activity 4: Reassigning Variables**_ 27 | 28 | - **Task 5:** Declare a variable using `let`, assign it an initial value, reassign a new value, and log both values to the console. 29 | 30 |
31 | 32 | _**Activity 5: Understanding `const`**_ 33 | 34 | - **Task 6:** Try reassigning a variable declared with `const` and observe the error. 35 | 36 |
37 | 38 | ### Feature Request 🙇‍♂️ 39 | 40 | 1. **Variable Types Console Log:** Write a script that declares variables of different data types and logs both the values of each variable to the console. 41 | 42 | 2. **Reassignment Demo:** Create a script that demonstrates the difference in behavior between `let` and `const` when it comes to reassignment. 43 | 44 | ### Achievement 🏆 45 | 46 | By the end of these activities, you will: 47 | 48 | - Know how to declare variables using `var`, `let`, and `const`. 49 | - Understand the different data types in JavaScript. 50 | - Be able to use the `typeof` operator to identify the data types of a variable. 51 | - Understand the concept of variable reassignment and the immutability of `const` variables. 52 | -------------------------------------------------------------------------------- /Day-02_Operators/Day-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-02_Operators/Day-02.png -------------------------------------------------------------------------------- /Day-02_Operators/README.md: -------------------------------------------------------------------------------- 1 | # Day-02 : Operators 🍵❤️‍🔥 2 | 3 | ![Day-02 Code Snap](./Day-02.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Arithmetic Operations**_ 8 | 9 | - **Task 1:** Write a program to add two numbers and log the result to the console. 10 | - **Task 2:** Write a Program to subtract two numbers and log the result to the console. 11 | - **Task 3:** Write a program to multiply two numbers and log the result to the console. 12 | - **Task 4:** Write a program to divide two numbers and log the result to the console. 13 | - **Task 5:** Write a program to find the remainder when one number is divided by another and log the result to the console. 14 | 15 |
16 | 17 | _**Activity 2: Assignment Operators**_ 18 | 19 | - **Task 6:** Use the `+=` operator to add a number to a variable and log the result to the console. 20 | - **Task 7:** Use the `-=` operator to subtract a number from a variable and log the result to the console. 21 | 22 |
23 | 24 | _**Activity 3: Comparison Operators**_ 25 | 26 | - **Task 8:** Write a program to compare two numbers using `>` and `<` log the result to the console. 27 | - **Task 9:** Write a program to compare two numbers using `>=` and `<=` log the result to the console. 28 | - **Task 10:** Write a program to compare two numbers using `==` and `===` log the result to the console. 29 | 30 |
31 | 32 | _**Activity 4: Logical Operators**_ 33 | 34 | - **Task 11:** Write a program that uses the `&&` operator to combine two conditions and log the result to the console. 35 | - **Task 12:** Write a program that uses the `||` operator to combine two conditions and log the result to the console. 36 | - **Task 13:** Write a program that uses the `!` operator to negate condition and log the result to the console. 37 | 38 |
39 | 40 | _**Activity 5: Ternary Operator**_ 41 | 42 | - **Task 14:** Write a program that uses the ternary operator to check if a number is positive or negative and log the result to the console. 43 | 44 |
45 | 46 | ### Feature Request 🙇‍♂️ 47 | 48 | 1. **Arithmetic Operations Script:** Write a script that performs basic arithmetic operations (addition, subtraction, multiplication, division, remainder) on two numbers and logs the results. 49 | 50 | 2. **Comparison and Logical Operators:** Create a script that compares two numbers using different comparison operators and combines conditions using logical operators, logging the results. 51 | 52 | 3. **Ternary Operator Script:** Write a script that uses the ternary operator to determine if a number is positive or negative and logs the result. 53 | 54 | ### Achievement 🏆 55 | 56 | By the end of these activities, you will: 57 | 58 | - Understand and use arithmetic operators to perform basic calculations. 59 | - Use assignment operators to modify variable values. 60 | - Compare values using comparison operators. 61 | - Combine conditions using logical operators. 62 | - Use the ternary operator for concise conditional expressions. 63 | -------------------------------------------------------------------------------- /Day-03_Control_Structures/Day-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-03_Control_Structures/Day-03.png -------------------------------------------------------------------------------- /Day-03_Control_Structures/README.md: -------------------------------------------------------------------------------- 1 | # Day-03 : Control Structures 🍵❤️‍🔥 2 | 3 | ![Day-03 Code Snap](./Day-03.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: If-Else Statements**_ 8 | 9 | - **Task 1:** Write a program to check if a number is positive, negative, or zero, and log the result to the console. 10 | - **Task 2:** Write a Program to check if a person is eligible to vote (age >= 18) and log the result to the console. 11 | 12 |
13 | 14 | _**Activity 2: Nested If-Else Statements**_ 15 | 16 | - **Task 3:** Write a program to find the largest of three numbers using nested if-else statements. 17 | 18 |
19 | 20 | _**Activity 3: Switch Case**_ 21 | 22 | - **Task 4:** Write a program that uses a switch case to determine the day of the week based on a number (1-7) and log the day name to the console. 23 | - **Task 5:** Write a program that uses a switch case to assign a grade ('A', 'B', 'C', 'D', 'f') based on a score and log the grade to the console. 24 | 25 |
26 | 27 | _**Activity 4: Conditional (Ternary) Operator**_ 28 | 29 | - **Task 6:** Write a program that uses the ternary operator to check if a number is even or odd and log the result to the console. 30 | 31 |
32 | 33 | _**Activity 5: Combining Conditions**_ 34 | 35 | - **Task 7:** Write a program to check if a year using multiple conditions (divisible by 4, but not 100 unless also divisible by 400) and log the result to the console. 36 | 37 |
38 | 39 | ### Feature Request 🙇‍♂️ 40 | 41 | 1. **Number Check Script:** Write a script that checks if a number is possible, negative, or zero using if-else statements and logs the result. 42 | 43 | 2. **Voting Eligibility Script:** Create a script to check if a person is eligible to vote based on their age and log the result. 44 | 45 | 3. **Day of the Week Script:** Write a script that uses a switch case to determine the day of the week based on a number (1-7) and logs the day name. 46 | 47 | 4. **Grade Assignment Script:** Create a script that uses a switch case to assign a grade based on a score and logs the grade. 48 | 49 | 5. **Leap Year Check Script:** Write a script that checks if a year is a leap year using multiple conditions and logs the result. 50 | 51 | ### Achievement 🏆 52 | 53 | By the end of these activities, you will: 54 | 55 | - Implement and understand basic if-else control flow. 56 | - Use nested if-else statements to handle multiple conditions. 57 | - Ultilize switch cases for control flow based on specific values. 58 | - Apply the ternary operator for concise condition checking. 59 | - Combine multiple conditions to solve more complex problems. 60 | -------------------------------------------------------------------------------- /Day-04_Loops/01. Loops.js: -------------------------------------------------------------------------------- 1 | // Activity 1: For Loop ✅ 2 | 3 | // - Task 1: Write a program to print numbers from 1 to 10 using a for loop. 4 | for (let i = 1; i <= 10; i++) { 5 | console.log(i); 6 | } 7 | 8 | console.log("***Task 1 Ended Here!✅***"); 9 | 10 | // - Task 2: Write a program to print the multiplication table of 5 using a for loop. 11 | for (let i = 1; i <= 10; i++) { 12 | console.log(`5 x ${i} = ${5 * i}`); 13 | } 14 | 15 | console.log("***Task 2 Ended Here!✅***"); 16 | 17 | // ********************************* // 18 | 19 | // Activity 2: While Loop ✅ 20 | 21 | // - Task 3: Write a program to calculate the sum of numbers from 1 to 10 using a while loop. 22 | let sumNum = 0; 23 | let i = 1; 24 | while (i <= 10) { 25 | sumNum += i; 26 | i++; 27 | } 28 | console.log(`Sum of numbers from 1 to 10 is: ${sumNum}`); 29 | 30 | console.log("***Task 3 Ended Here!✅***"); 31 | 32 | // - Task 4: Write a program to print numbers from 10 to 1 using a while loop. 33 | let num = 10; 34 | while (num >= 1) { 35 | console.log(`${num}`); 36 | num--; 37 | } 38 | 39 | console.log("***Task 4 Ended Here!✅***"); 40 | 41 | // ********************************* // 42 | 43 | // Activity 3: Do... While Loop ✅ 44 | 45 | // - Task 5: Write a program to print numbers from 1 to 5 using a do...while loop. 46 | let j = 1; 47 | do { 48 | console.log(j); 49 | j++; 50 | } while (j <= 5); 51 | 52 | console.log("***Task 5 Ended Here!✅***"); 53 | 54 | // - Task 6: Write a program to calculate the factorial of a number using a do...while loop. 55 | let num2 = 7; 56 | let fact = 1; 57 | 58 | let factNum = num2; 59 | do { 60 | fact *= factNum; 61 | factNum--; 62 | } while (factNum > 0); 63 | console.log(`Factorial of ${num2} is: ${fact}`); 64 | 65 | console.log("***Task 6 Ended Here!✅***"); 66 | 67 | // ********************************* // 68 | 69 | // Activity 4: Nested Loops ✅ 70 | 71 | // - Task 7: Write a program to print a pattern using nested for loops: 72 | for (let i = 1; i <= 5; i++) { 73 | let starPattern = ""; 74 | for (let j = 1; j <= i; j++) { 75 | starPattern += "*"; 76 | } 77 | console.log(starPattern); 78 | } 79 | 80 | console.log("***Task 7 Ended Here!✅***"); 81 | 82 | // ********************************* // 83 | 84 | // Activity 5: Loop Control Statements ✅ 85 | 86 | // - Task 8: Write a program to print numbers from 1 to 10, but skip the number 5 using the continue statement. 87 | for (let i = 1; i <= 10; i++) { 88 | if (i === 5) { 89 | continue; 90 | } 91 | console.log(i); 92 | } 93 | 94 | console.log("***Task 8 Ended Here!✅***"); 95 | 96 | // - Task 9: Write a program to print numbers from 1 to 10, but stop the loop when the number is 7 using the break statement. 97 | for (let i = 1; i <= 10; i++) { 98 | if (i === 7) { 99 | break; 100 | } 101 | console.log(i); 102 | } 103 | 104 | console.log("***Task 9 Ended Here!✅***"); 105 | -------------------------------------------------------------------------------- /Day-04_Loops/Day-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-04_Loops/Day-04.png -------------------------------------------------------------------------------- /Day-04_Loops/Pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-04_Loops/Pattern.png -------------------------------------------------------------------------------- /Day-04_Loops/README.md: -------------------------------------------------------------------------------- 1 | # Day 4: Loops 🍵❤️‍🔥 2 | 3 | ![Day-04 Code Snap](Day-04.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: For Loop**_ 8 | 9 | - **Task 1:** Write a program to print numbers from 1 to 10 using a for loop. 10 | 11 | - **Task 2:** Write a program to print the multiplication table of 5 using a for loop. 12 | 13 |
14 | 15 | _**Activity 2: While Loop**_ 16 | 17 | - **Task 3:** Write a program to calculate the sum of numbers from 1 to 10 using a while loop. 18 | 19 | - **Task 4:** Write a program to print numbers from 10 to 1 using a while loop. 20 | 21 |
22 | 23 | _**Activity 3: Do... While Loop**_ 24 | 25 | - **Task 5:** Write a program to print numbers from 1 to 5 using a do...while loop. 26 | 27 | - **Task 6:** Write a program to calculate the factorial of a number using a do...while loop. 28 | 29 |
30 | 31 | _**Activity 4: Nested Loops**_ 32 | 33 | - **Task 7:** Write a program to print a pattern using nested for loops: 34 | 35 | (ignore color) 36 | 37 | ![Loop Pattern](Pattern.png) 38 | 39 |
40 | 41 | _**Activity 5: Loop Control Statements**_ 42 | 43 | - **Task 8:** Write a program to print numbers from 1 to 10, but skip the number 5 using the continue statement. 44 | 45 | - **Task 9:** Write a program to print numbers from 1 to 10, but stop the loop when the number is 7 using the break statement. 46 | 47 |
48 | 49 | Feature Request 🙇‍♂️ 50 | 51 | 1. **Number Printing Script:** Write a script that prints numbers from 1 to 10 using a for loop and a while loop. 52 | 53 | 2. **Multiplication Table Script:** Create a script that prints the multiplication table of 5 using a for loop. 54 | 55 | 3. **Pattern Printing Script:** Write a script that prints a pattern of stars using nested loops. 56 | 57 | 4. **Sum Calculation Script:** Write a script that calculates the sum of numbers from 1 to 10 using a while loop. 58 | 59 | 5. **Factorial Calculation Script:** Create a script that calculates the factorial of a number using a do...while loop. 60 | 61 | ### Achievement 🏆 62 | 63 | By the end of these activities, students will: 64 | 65 | - Understand and use for loops to iterate over a sequence of numbers. 66 | 67 | - Utilize while loops for iteration based on a condition. 68 | 69 | - Apply do...while loops to ensure the loop body is executed at least once. 70 | 71 | - Implement nested loops to solve more complex problems. 72 | 73 | - Use loop control statements (break and continue) to control the flow of loops. 74 | -------------------------------------------------------------------------------- /Day-05_Functions/Day-05 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-05_Functions/Day-05 Code Snap.png -------------------------------------------------------------------------------- /Day-05_Functions/README.md: -------------------------------------------------------------------------------- 1 | # Day-05 : Functions 🍵❤️‍🔥 2 | 3 | ![Day-05 Code Snap](Day-05%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Function Declaration**_ 8 | 9 | - **Task 1:** Write a function to check if a number is even or odd and log the result to the console. 10 | - **Task 2:** Write a function to calculate the square of a number and return the result. 11 | 12 |
13 | 14 | _**Activity 2: Function Expression**_ 15 | 16 | - **Task 3:** Write a function expression to find the maximum of two numbers and log the result to the console. 17 | - **Task 4:** Write a function expression to concatenate two strings and return the result. 18 | 19 |
20 | 21 | _**Activity 3: Arrow Functions**_ 22 | 23 | - **Task 5:** Write an arrow function to calculate the sum of two numbers and return the result. 24 | - **Task 6:** Write an arrow function to check if a string contains a specific character and return a boolean value. 25 | 26 |
27 | 28 | _**Activity 4: Function Parameters and Default Values**_ 29 | 30 | - **Task 7:** Write a function that takes two parameters and returns their product. Provide a default value for the second parameter. 31 | - **Task 8:** Write a function that takes a person's name and age and returns a greeting message. Provide a default value for the age. 32 | 33 |
34 | 35 | _**Activity 5: Higher-Order Functions**_ 36 | 37 | - **Task 9:** Write a higher-order function that takes a function and a number, and calls the function that many times. 38 | - **Task 10:** Write a higher-order function that takes two functions and a value, applies the first function to the value, and then applies the second function to the result. 39 | 40 |
41 | 42 | ### Feature Request 🙇‍♂️ 43 | 44 | 1. **Even or Odd Function Script:** Write a script that includes a function to check if a number is even or odd and logs the result. 45 | 46 | 2. **Square Calculation Function Script:** Create a script that includes a function to calculate the square of a number and returns the result. 47 | 48 | 3. **Concatenation Function Script:** Write a script that includes al function expression to concatenate two strings and returns the result. 49 | 50 | 4. **Sum Calculation Arrow Function Script:** Create a script that includes an arrow function to calculate the sum of two numbers and returns the result. 51 | 52 | 5. **Higher-Order Function Script:** Write a script that includes a higher-order function to apply a given function multiple times. 53 | 54 | ### Achievement 🏆 55 | 56 | By the end of these activities, you will: 57 | 58 | - Understand and define functions using function declarations, expressions, and arrow functions. 59 | - Use function parameters and default values effectively. 60 | - Create and utilize higher-order functions. 61 | - Apply functions to solve common problems and perform calculations. Enhance code reusability and organization using functions. 62 | -------------------------------------------------------------------------------- /Day-06_Arrays/Day-06 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-06_Arrays/Day-06 Code Snap.png -------------------------------------------------------------------------------- /Day-06_Arrays/README.md: -------------------------------------------------------------------------------- 1 | # Day-06 : Arrays 🍵❤️‍🔥 2 | 3 | ![Day-06 Code Snap](./Day-06%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Array Creation and Access**_ 8 | 9 | - **Task 1:** Create an array of numbers from 1 to 5 and log the array to the console. 10 | 11 | - **Task 2:** Access the first and last elements of the array and log them to the console. 12 | 13 |
14 | 15 | _**Activity 2: Array Methods (Basic)**_ 16 | 17 | - **Task 3:** Use the `push` method to add a new number to the end of the array and log the updated array. 18 | - **Task 4:** Use the `pop` method to remove the last element from the array and log the updated array. 19 | - **Task 5:** Use the `shift` method to remove the first element from the array and log the updated array. 20 | - **Task 6:** Use the `unshift` method to add a new number to the beginning of the array and log the updated array. 21 | 22 |
23 | 24 | _**Activity 3: Array Methods (Intermediate)**_ 25 | 26 | - **Task 7:** Use the `map` method to create a new array where each element is doubled and log the new array. 27 | - **Task 8:** Use the `filter` method to create a new array with only even numbers and log the new array. 28 | - **Task 9:** Use the `reduce` method to calculate the sum of all numbers in the array and log the result. 29 | 30 |
31 | 32 | _**Activity 4: Array Iteration**_ 33 | 34 | - **Task 10:** Use a `for` loop to iterate over the array and log each element to the console. 35 | - **Task 11:** Use the `forEach` method to iterate over the array and log each element to the console. 36 | 37 |
38 | 39 | _**Activity 5: Multi-dimensional Arrays**_ 40 | 41 | - **Task 12:** Create a two-dimensional array (matrix) and log the entire array to the console. 42 | - **Task 13:** Access and log a specific element from the two-dimensional array. 43 | 44 |
45 | 46 | ### Feature Request 🙇‍♂️ 47 | 48 | 1. **Array Manipulation Script:** Write a script that demonstrates the creation of an array, adding and removing elements using push, pop, shift, and unshift methods. 49 | 50 | 2. **Array Transformation Script::** Create a script that uses `map`, `filter`, and `reduce` methods to transform and aggregate array data. 51 | 52 | 3. **Array Iteration Script:** Write a script that iterates over an array using both `for` loop and `foreach` method and logs each element. 53 | 54 | 4. **Two-dimensional Array Script:** Create a script that demonstrates the creation and manipulation of two-dimensional array. 55 | 56 | ### Achievement 🏆 57 | 58 | By the end of these activities, you will: 59 | 60 | - Create and manipulate arrays using various methods. 61 | - Transform and aggregate array data using `map`, `filter`, and `reduce`. 62 | - Iterate over arrays using loops and iteration methods. 63 | - Understand and work with multi-dimensional arrays. 64 | -------------------------------------------------------------------------------- /Day-07_Objects/Day-07 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-07_Objects/Day-07 Code Snap.png -------------------------------------------------------------------------------- /Day-07_Objects/README.md: -------------------------------------------------------------------------------- 1 | # Day-07 : Objects 🍵❤️‍🔥 2 | 3 | ![Day-07 Code Snap](Day-07%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Object Creation and Access**_ 8 | 9 | - **Task 1:** Create an object representing a book with properties like title, author, and year, and log the object to the console. 10 | 11 | - **Task 2:** Access and log the title and author properties of the book object. 12 | 13 |
14 | 15 | _**Activity 2: Object Methods**_ 16 | 17 | - **Task 3:** Add a method to the book object that returns a string with the book's title and author, and log the result of calling this method. 18 | 19 | - **Task 4:** Add a method to the book object that takes a parameter (year) and updates the book's year property, then log the updated object. 20 | 21 | 22 |
23 | 24 | _**Activity 3: Nested Objects**_ 25 | 26 | - **Task 5:** Create a nested object representing a library with properties like name and books (an array of book objects), and log the library object to the console. 27 | 28 | - **Task 6:** Access and log the name of the library and the titles of all the books in the library. 29 | 30 | 31 |
32 | 33 | _**Activity 4: The `this` Keyword**_ 34 | 35 | - **Task 7:** Add a method to the book object that uses the `this` keyword to return a string with the book's title and year, and log the result of calling this method. 36 | 37 |
38 | 39 | _**Activity 5: Object Iteration**_ 40 | 41 | - **Task 8:** Use a `for...in` loop to iterate over the properties of the book object and log each property and its value. 42 | 43 | - **Task 9:** Use `Object.keys` and `Object.values` methods to log all the keys and values of the book object. 44 | 45 |
46 | 47 | ### Feature Request 🙇‍♂️ 48 | 49 | 1. **Book Object Script:** Write a script that creates a book object, adds methods to it, and logs its properties and method results. 50 | 51 | 52 | 2. **Library Object Script:** Create a script that defines a library object containing an array of book objects and logs the library's details. 53 | 54 | 3. **Object Iteration Script** Write a script that demonstrates iterating over an object's properties using `for...In` loop and `Object.keys/Object.values`. 55 | 56 | 57 | ### Achievement 🏆 58 | 59 | By the end of these activities, you will: 60 | 61 | - Create and manipulate objects with properties and methods. 62 | - Understand and use the this keyword in object methods. 63 | - Work with nested objects and arrays of objects. 64 | - Iterate over an object's properties using loops and built-in methods. 65 | -------------------------------------------------------------------------------- /Day-08_ES6+_Features/Day-08 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-08_ES6+_Features/Day-08 Code Snap.png -------------------------------------------------------------------------------- /Day-08_ES6+_Features/README.md: -------------------------------------------------------------------------------- 1 | # Day-08 : ES6+ Features 🍵❤️‍🔥 2 | 3 | ![Day-08 Code Snap](Day-08%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Template Literals**_ 8 | 9 | - **Task 1:** Use template literals to create a string that includes variables for a person's name and age, and log the string to the console. 10 | 11 | - **Task 2:** Create a multi-line string using the template literals and log it to the console. 12 | 13 |
14 | 15 | _**Activity 2: Destructuring**_ 16 | 17 | - **Task 3:** Use array destructuring to extract the first and second elements from an array of numbers and log them to the console. 18 | 19 | - **Task 4:** Use Object destructuring to extract the title and author from a book object and log them to the console. 20 | 21 |
22 | 23 | _**Activity 3: Spread and Rest Operators**_ 24 | 25 | - **Task 5:** Use the spread operator to create a new array that includes all elements of an existing array plus additional elements, and log the new array to the console. 26 | 27 | - **Task 6:** Use the rest operator in a function to accept an arbitrary number of arguments, sum them, and return the result. 28 | 29 |
30 | 31 | _**Activity 4: Default Parameters**_ 32 | 33 | - **Task 7:** Write a function that takes two parameters and returns their product, with the second parameter having a default value of 1. Log the result of calling this function with and without the second parameter. 34 | 35 |
36 | 37 | _**Activity 5: Enhanced Object Literals**_ 38 | 39 | - **Task 8:** Use enhanced object literals to create an object with methods and properties, and log the object to the console. 40 | 41 | - **Task 9:** Create an object with computed property names based on variables and log the object to the console. 42 | 43 |
44 | 45 | ### Feature Request 🙇‍♂️ 46 | 47 | 1. **Template Literals Script:** Write a script that demonstrates the use of template literals to create and log strings with embedded variables and multi-line strings. 48 | 49 | 2. **Destructuring Script:** Create a script that uses array and object destructuring to extract values and log them. 50 | 51 | 3. **Spread and Rest Operators Script** Write a script that demonstrates the use of the spread operator to combine arrays and the rest operator to handle multiple function arguments. 52 | 53 | 4. **Default Parameters Script** Create a script that defines a function with default parameters and log the results of calling it with different arguments. 54 | 55 | 5. **Enhanced Object Literals Script** Write a script that uses enhanced object literals to create and log an object with methods and computed property names. 56 | 57 | ### Achievement 🏆 58 | 59 | By the end of these activities, you will: 60 | 61 | - Understand and use template literals for string interpolation and multi-line strings. 62 | - Apply destructuring to extract values from arrays and objects. 63 | - Utilize spread and rest operators for array manipulation and function arguments. 64 | - Define functions with default parameters. 65 | - Create objects using enhanced object literals, including methods and computed property names. 66 | 67 | -------------------------------------------------------------------------------- /Day-09_DOM_Manipulation/01. DOM Manipulation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day-09 DOM Manipulation 7 | 31 | 32 | 33 | 34 |
Original Text Content
35 | 36 | 37 |
Change Background Color
38 | 39 | 40 | 43 | 44 | 45 |
Remove this element
46 | 47 | 48 |
49 |
First child
50 |
Second child
51 |
52 | 53 | 54 | firstImage 55 | 56 | 57 |
Class manipulation
58 | 59 | 60 | 61 |

Original paragraph text

62 | 63 | 64 |
Hover over me
65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /Day-09_DOM_Manipulation/01. DOM Manipulation.js: -------------------------------------------------------------------------------- 1 | // Activity 1: Selecting and Manipulating Elements ✅ 2 | // Task 1 3 | document.getElementById("changeText").textContent = "Text Content Changed"; 4 | 5 | console.log("***Task 1 Ended Here!✅***"); 6 | 7 | // Task 2 8 | document.querySelector(".bgColorChange").style.backgroundColor = "royalblue"; 9 | 10 | console.log("***Task 2 Ended Here!✅***"); 11 | 12 | // ********************************* // 13 | 14 | // Activity 2: Creating and Appending Elements ✅ 15 | // Task 3 16 | const newDiv = document.createElement("div"); 17 | newDiv.textContent = "Creating a new div and adding text content to it."; 18 | document.body.appendChild(newDiv); 19 | 20 | console.log("***Task 3 Ended Here!✅***"); 21 | 22 | // Task 4 23 | const newLi = document.createElement("li"); 24 | newLi.textContent = "List Item Added Successfully."; 25 | document.querySelector("ul").appendChild(newLi); 26 | 27 | console.log("***Task 4 Ended Here!✅***"); 28 | 29 | // ********************************* // 30 | 31 | // Activity 3: Removing Elements ✅ 32 | // Task 5 33 | const elementToRemove = document.getElementById("removeMe"); 34 | elementToRemove.parentNode.removeChild(elementToRemove); 35 | 36 | console.log("***Task 5 Ended Here!✅***"); 37 | 38 | // Task 6 39 | const parentElement = document.getElementById("parentElement"); 40 | parentElement.removeChild(parentElement.lastChild); 41 | 42 | console.log("***Task 6 Ended Here!✅***"); 43 | 44 | // ********************************* // 45 | 46 | // Activity 4: Modifying Attributes and Classes ✅ 47 | // Task 7 48 | const image = document.querySelector(".firstImage"); 49 | image.src = "./changedImage.png"; 50 | 51 | console.log("***Task 7 Ended Here!✅***"); 52 | 53 | // Task 8 54 | const myElement = document.querySelector(".elem"); 55 | myElement.classList.add("addClass"); 56 | myElement.classList.remove("removeClass"); 57 | 58 | console.log("***Task 8 Ended Here!✅***"); 59 | 60 | // ********************************* // 61 | 62 | // Activity 5: Event Handling ✅ 63 | // Task 9 64 | document.querySelector("button").addEventListener("click", () => { 65 | document.querySelector("p").textContent = "Paragraph Text changed!"; 66 | }); 67 | 68 | console.log("***Task 9 Ended Here!✅***"); 69 | 70 | // Task 10 71 | document.querySelector(".hoverElement").addEventListener("mouseover", () => { 72 | document.querySelector(".hoverElement").style.borderColor = "red"; 73 | }); 74 | 75 | console.log("***Task 10 Ended Here!✅***"); 76 | -------------------------------------------------------------------------------- /Day-09_DOM_Manipulation/Day-09 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-09_DOM_Manipulation/Day-09 Code Snap.png -------------------------------------------------------------------------------- /Day-09_DOM_Manipulation/README.md: -------------------------------------------------------------------------------- 1 | # Day-09 : DOM Manipulation 🍵❤️‍🔥 2 | 3 | ![Day-09 Code Snap](Day-09%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Selecting and Manipulating Elements**_ 8 | 9 | - **Task 1:** Select an HTML element by its ID and change its text content. 10 | 11 | - **Task 2:** Select an HTML element by its class and change its background color. 12 | 13 |
14 | 15 | _**Activity 2: Creating and Appending Elements**_ 16 | 17 | - **Task 3:** Create a new `div` element with some text content and append it to the body. 18 | 19 | - **Task 4:** Create a new `1i` element and add it to an existing `ul` list. 20 | 21 |
22 | 23 | _**Activity 3: Removing Elements**_ 24 | 25 | - **Task 5:** Select an HTML element and remove it from the DOM. 26 | 27 | - **Task 6:** Remove the last child of a specific HTML element. 28 | 29 |
30 | 31 | _**Activity 4: Modifying Attributes and Classes**_ 32 | 33 | - **Task 7:** Select an HTML element and change one of its attributes (e.g., `src` of an `img` tag). 34 | 35 | - **Task 8:** Add and remove a CSS class to/from an HTML element. 36 | 37 |
38 | 39 | _**Activity 5: Event Handling**_ 40 | 41 | - **Task 9:** Add a click event listener to a button that changes the text content of a paragraph. 42 | 43 | - **Task 10:** Add a mouseover event listener to an element that changes its border color. 44 | 45 |
46 | 47 | ### Feature Request 🙇‍♂️ 48 | 49 | 1. **Text Content Manipulation Script:** Write a script that selects an HTML element by its ID and changes its text content. 50 | 51 | 2. **Element Creation Script:** Create a script that demonstrates creating a new `div` element and appending it to the body. 52 | 53 | 3. **Element Removal Script** Write a script that selects an HTML element and removes it from the DOM. 54 | 55 | 4. **Attribute Modification Script** Create a script that changes the attributes of an HTML element. 56 | 57 | 5. **Event Handling Script** Write a script that adds event listeners to HTML elements to change their content or style based on user interactions. 58 | 59 | ### Achievement 🏆 60 | 61 | By the end of these activities, you will: 62 | 63 | - Select and manipulate DOM elements using JavaScript. 64 | 65 | - Create and append new elements to the DOM. 66 | 67 | - Remove elements from the DOM. 68 | 69 | - Modify attributes and classes of HTML elements. 70 | 71 | - Add and handle events to make web pages interactive. 72 | -------------------------------------------------------------------------------- /Day-09_DOM_Manipulation/changedImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-09_DOM_Manipulation/changedImage.png -------------------------------------------------------------------------------- /Day-09_DOM_Manipulation/firstImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-09_DOM_Manipulation/firstImage.png -------------------------------------------------------------------------------- /Day-10_Event_Handling/01. Event Handling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day-10 Event Handling 7 | 15 | 16 | 17 |

Event Handling in JavaScript

18 | 19 | 20 | 21 | 22 |

This is a paragraph.

23 | 24 | 25 | Image 26 | 27 | 28 | 29 |
33 | 34 | 35 | 36 | 41 |

Current Value:

42 | 43 | 44 | 45 |
46 | 47 | 48 | 49 |
50 | 51 | 52 | 57 |

Selected Value:

58 | 59 | 60 | 61 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /Day-10_Event_Handling/01. Event Handling.js: -------------------------------------------------------------------------------- 1 | // Activity 1: Basic Event Handling ✅ 2 | // Task 1 3 | document.getElementById("changeTextBtn").addEventListener("click", function () { 4 | document.getElementById("text").textContent = "The text has been changed!"; 5 | }); 6 | 7 | console.log("***Task 1 Ended Here!✅***"); 8 | 9 | // Task 2 10 | document 11 | .getElementById("toggleImage") 12 | .addEventListener("dblclick", function () { 13 | this.classList.toggle("hidden"); 14 | }); 15 | 16 | console.log("***Task 2 Ended Here!✅***"); 17 | 18 | // ********************************* // 19 | 20 | // Activity 2: Mouse Events ✅ 21 | // Task 3 22 | document.getElementById("colorBox").addEventListener("mouseover", function () { 23 | this.style.backgroundColor = "deeppink"; 24 | }); 25 | 26 | console.log("***Task 3 Ended Here!✅***"); 27 | 28 | // Task 4 29 | document.getElementById("colorBox").addEventListener("mouseout", function () { 30 | this.style.backgroundColor = "darkgray"; 31 | }); 32 | 33 | console.log("***Task 4 Ended Here!✅***"); 34 | 35 | // ********************************* // 36 | 37 | // Activity 3: Keyboard Events ✅ 38 | // Task 5 39 | document 40 | .getElementById("keyInput") 41 | .addEventListener("keydown", function (event) { 42 | console.log(`Key pressed: ${event.key}`); 43 | }); 44 | 45 | console.log("***Task 5 Ended Here!✅***"); 46 | 47 | // Task 6 48 | document.getElementById("keyInput").addEventListener("keyup", function () { 49 | document.getElementById( 50 | "displayValue" 51 | ).textContent = `Current Value: ${this.value}`; 52 | }); 53 | 54 | console.log("***Task 6 Ended Here!✅***"); 55 | 56 | // ********************************* // 57 | 58 | // Activity 4: Form Events ✅ 59 | // Task 7 60 | document 61 | .getElementById("userForm") 62 | .addEventListener("submit", function (event) { 63 | event.preventDefault(); 64 | const formData = new FormData(this); 65 | for (let [key, value] of formData.entries()) { 66 | console.log(`${key}: ${value}`); 67 | } 68 | }); 69 | 70 | console.log("***Task 7 Ended Here!✅***"); 71 | 72 | // Task 8 73 | document 74 | .getElementById("selectDropdown") 75 | .addEventListener("change", function () { 76 | document.getElementById( 77 | "displaySelectedValue" 78 | ).textContent = `Selected Value: ${this.value}`; 79 | }); 80 | 81 | console.log("***Task 8 Ended Here!✅***"); 82 | 83 | // ********************************* // 84 | 85 | // Activity 5: Event Delegation ✅ 86 | // Task 9 87 | document.getElementById("myList").addEventListener("click", function (event) { 88 | if (event.target.tagName === "LI") { 89 | console.log(`Clicked item: ${event.target.textContent}`); 90 | } 91 | }); 92 | 93 | console.log("***Task 9 Ended Here!✅***"); 94 | 95 | // Task 10 96 | document.getElementById("addItemBtn").addEventListener("click", function () { 97 | const newItem = document.createElement("li"); 98 | newItem.textContent = `Item ${ 99 | document.getElementById("myList").children.length + 1 100 | }`; 101 | document.getElementById("myList").appendChild(newItem); 102 | }); 103 | 104 | console.log("***Task 10 Ended Here!✅***"); 105 | -------------------------------------------------------------------------------- /Day-10_Event_Handling/Day-10 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-10_Event_Handling/Day-10 Code Snap.png -------------------------------------------------------------------------------- /Day-10_Event_Handling/README.md: -------------------------------------------------------------------------------- 1 | # Day-10 : Event Handling 🍵❤️‍🔥 2 | 3 | ![Day-10 Code Snap](Day-10%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Basic Event Handling**_ 8 | 9 | - **Task 1:** Add a click event listener to a button that changes the text content of a paragraph. 10 | 11 | - **Task 2:** Add a double-click event listener to an image that toggles its visibility. 12 | 13 |
14 | 15 | _**Activity 2: Mouse Events**_ 16 | 17 | - **Task 3:** Add a mouseover event listener to an element that changes its background color. 18 | 19 | - **Task 4:** Add a mouseout event listener to an element that resets its background color. 20 | 21 |
22 | 23 | _**Activity 3: Keyboard Events**_ 24 | 25 | - **Task 5:** Add a keydown event listener to an input field that logs the key pressed to the console. 26 | 27 | - **Task 6:** Add a keyup event listener to an input field that displays the current value in a paragraph. 28 | 29 |
30 | 31 | _**Activity 4: Form Events**_ 32 | 33 | - **Task 7:** Add a submit event listener to a form that prevents the default submission and logs the form data to the console. 34 | 35 | - **Task 8:** Add a change event listener to a select dropdown that displays the selected value in a paragraph. 36 | 37 |
38 | 39 | _**Activity 5: Event Delegation**_ 40 | 41 | - **Task 9:** Add a click event listener to a list that logs the text content of the clicked list item using event delegation. 42 | 43 | - **Task 10:** Add an event listener to a parent element that listens for events from dynamically added child elements. 44 | 45 |
46 | 47 | ### Feature Request 🙇‍♂️ 48 | 49 | 1. **Click Event Script:** Write a script that adds a click event listener to a button to change the the text content of a paragraph. 50 | 51 | 2. **Mouse Events Script:** Create a script that handles mouseover and mouseout events to change the background color of an element. 52 | 53 | 3. **Keyboard Events Script:** Write a script that logs key presses and displays input field values using keydown and keyup event listeners. 54 | 55 | 4. **Form Events Script:** Create a script that handles form submission and change events on a select dropdown. 56 | 57 | 5. **Event Delegation Script:** Write a script that demonstrates event delegation by by handling events on dynamically added child elements. 58 | 59 | ### Achievement 🏆 60 | 61 | By the end of these activities, you will: 62 | 63 | - Add and handle basic events like click, double-click, mouseover, mouseout, keydown, and keyup. 64 | 65 | - Understand and handle form events. 66 | 67 | - Implement event delegation to manage events on dynamically added elements. 68 | 69 | - Make web pages interactive by responding to various user actions. 70 | 71 | 72 | -------------------------------------------------------------------------------- /Day-11_Promises_and_Async_Await/Day-11 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-11_Promises_and_Async_Await/Day-11 Code Snap.png -------------------------------------------------------------------------------- /Day-11_Promises_and_Async_Await/README.md: -------------------------------------------------------------------------------- 1 | # Day-11 : Promises and Async/Await 🍵❤️‍🔥 2 | 3 | ![Day-11 Code Snap](Day-11%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Understanding Promises**_ 8 | 9 | - **Task 1:** Create a promise that resolves with a message after a 2-second timeout and log the message to the console. 10 | 11 | - **Task 2:** Create a promise that rejects with an error message after a 2-second timeout and handle the error using `.catch()`. 12 | 13 |
14 | 15 | _**Activity 2: Chaining Promises**_ 16 | 17 | - **Task 3:** Create a sequence of promises that simulate fetching data from a server. Chain the promises to log messages in a specific order. 18 | 19 |
20 | 21 | _**Activity 3: Using Async/Await**_ 22 | 23 | - **Task 4:** Write an async function that waits for a promise to resolve and then logs the resolved value. 24 | 25 | - **Task 5:** Write an async function that handles a rejected promise using try-catch and logs the error message. 26 | 27 |
28 | 29 | _**Activity 4: Fetching Data from an API**_ 30 | 31 | - **Task 6:** Use the `fetch` API to get data from a public API and log the response data to the console using promises. 32 | 33 | - **Task 7:** Use the `fetch` API to get data from a public API and log the response data to the console using async/await. 34 | 35 |
36 | 37 | _**Activity 5: Concurrent Promises**_ 38 | 39 | - **Task 8:** Use `Promise.all` to wait for multiple promises to resolve and then log all their values. 40 | 41 | - **Task 9:** Use `Promise.race` to log the value of the first promise that resolves among multiple promises. 42 | 43 |
44 | 45 | ### Feature Request 🙇‍♂️ 46 | 47 | 1. **Promise Creation Script:** Write a script that demonstrates creating and handling promises, including both resolved and rejected states. 48 | 49 | 2. **Promise Chaining Script:** Create a script that chains multiple promises and logs messages in a specific sequence. 50 | 51 | 3. **Async/Await Script:** Write a script that uses async/await to handle promises and includes error handling with try-catch. 52 | 53 | 4. **API Fetch Script:** Create a script that fetches data from a public API using both promises and async/await, and logs the response data. 54 | 55 | 5. **Concurrent Promises Script:** Write a script that uses Promise all and Promise.race to handle multiple promises concurrently and logs the results. 56 | 57 | ### Achievement 🏆 58 | 59 | By the end of these activities, you will: 60 | 61 | - Understand and create promises, including handling resolved and rejected states. 62 | 63 | - Chain multiple promises to perform sequential asynchronous operations. 64 | 65 | - Use async/await to handle asynchronous code more readably. 66 | 67 | - Fetch data from public APIs using both `promises` and async/await. 68 | 69 | - Manage multiple concurrent promises using `Promise.all` and `Promise.race`. -------------------------------------------------------------------------------- /Day-12_Error_Handling/Day-12 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-12_Error_Handling/Day-12 Code Snap.png -------------------------------------------------------------------------------- /Day-12_Error_Handling/README.md: -------------------------------------------------------------------------------- 1 | # Day-12 : Error Handling 🍵❤️‍🔥 2 | 3 | ![Day-12 Code Snap](Day-12%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Basic Error Handling with Try-Catch**_ 8 | 9 | - **Task 1:** Write a function that intentionally throws an error and use a try-catch block to handle the error and log an appropriate message to the console. 10 | 11 | - **Task 2:** Create a function that divides two numbers and throws an error if the denominator is zero. Use a try-catch block to handle this error. 12 | 13 |
14 | 15 | _**Activity 2: Finally Block**_ 16 | 17 | - **Task 3:** Write a script that includes a try-catch block and a finally block, Log messages in the try, catch, and finally blocks to observe the execution flow. 18 | 19 |
20 | 21 | _**Activity 3: Custom Error Objects**_ 22 | 23 | - **Task 4:** Create a custom error class that extends the built-in Error class, Throw an instance of this custom error in a function and handle it using a try-catch block 24 | 25 | - **Task 5:** Write a function that validates user input (e.g., checking if a string is not empty) and throws a custom error if the validation fails. Handle the custom error using a try-catch block. 26 | 27 |
28 | 29 | _**Activity 4: Error Handling in Promises**_ 30 | 31 | - **Task 6:** Create a promise that randomly resolves or rejects. Use `.catch()` to handle the rejection and ing an appropriate message to the console. 32 | 33 | - **Task 7:** Use try-catch within an async function to handle errors from a promise that randomly resolves or rejects, and log the error message. 34 | 35 |
36 | 37 | _**Activity 5: Graceful Error Handling in Fetch**_ 38 | 39 | - **Task 8:** Use the `fetch` API to request data from an invalid URL and handle the error using catch() Log an appropriate error message to the console. 40 | 41 | - **Task 9:** Use the `fetch` API to request data from an invalid URL within an async function and handle the error using try-catch. Log an appropriate error message. 42 | 43 |
44 | 45 | ### Feature Request 🙇‍♂️ 46 | 47 | 1. **Basic Error Handling Script:** Write a script that demonstrates basic error handling using try-catch and finally blocks. 48 | 49 | 2. **Custom Error Script:** Create a script that defines and throws custom error, handling them with try-catch blocks. 50 | 51 | 3. **Promise Error Handling Script:** Write a script that handles errors in promises using `.catch()` and try-catch within async functions. 52 | 53 | 4. **Fetch Error Handling Script:** Create a script that handles errors when using the `fetch` API to request data from invalid URLs. 54 | 55 | ### Achievement 🏆 56 | 57 | By the end of these activities, you will: 58 | 59 | - Understand and implement basic error handling using try-catch blocks. 60 | 61 | - Use finally blocks to execute code regardless of the try-catch outcome. 62 | 63 | - Create and use custom error classes. 64 | 65 | - Handle errors in promises using `.catch()` and within async functions using try-catch. 66 | 67 | - Implement graceful error handling when making network requests with the `fetch` API. 68 | -------------------------------------------------------------------------------- /Day-13_Modules/README.md: -------------------------------------------------------------------------------- 1 | # Day-13 : Modules 🍵❤️‍🔥 2 | 3 | ## Tasks | Activities 🌟 4 | 5 | _**Activity 1: Creating and Exporting Modules**_ 6 | 7 | - **Task 1:** Create a module that exports a function to add two numbers. Import and use this module in another script. 8 | 9 | - **Task 2:** Create a module that exports an object representing a person with properties and methods. Import and use this module in another script. 10 | 11 |
12 | 13 | _**Activity 2: Named and Default Exports**_ 14 | 15 | - **Task 3:** Create a module that exports multiple functions using named exports. Import and use these functions in another script. 16 | 17 | - **Task 4:** Create a module that exports a single function using default export. Import and use this function in another script. 18 | 19 |
20 | 21 | _**Activity 3: Importing Entire Module**_ 22 | 23 | - **Task 5:** Create a module that exports multiple constants and functions. Import the entire module as an object in another script and use its properties. 24 | 25 |
26 | 27 | _**Activity 4: Using Third-Party Modules**_ 28 | 29 | - **Task 6:** Install a third-party module (e.g., `lodash`) using npm. Import and use a function from this module in a script. 30 | 31 | - **Task 7:** Install a third-party module (e.g.. `wins`) using npm. Import and use this module to make a network request in a script. 32 | 33 |
34 | 35 | _**Activity 5: Module Bundling (Optional)**_ 36 | 37 | - **Task 8:** Use a module bundler like Webpack or Parcel to bundle multiple JavaScript files into a single file. Write a script to demonstrate the bundling process. 38 | 39 |
40 | 41 | ### Feature Request 🙇‍♂️ 42 | 43 | 1. **Basic Module Script:** Write a script that creates a module exporting a function and imports it in another script. 44 | 45 | 2. **Named and Default Exports Script:** Create a script demonstrating both named and default default exports and their usage 46 | 47 | 3. **Third-Party Module Script:** Write a script that installs, imports, and uses functions from third-party modules like `lodash` and `axios`. 48 | 49 | 4. **Module Bundling Script:** Create a script demonstrating how to bundle JavaScript files using a module bundler (optional). 50 | 51 | ### Achievement 🏆 52 | 53 | By the end of these activities, you will: 54 | 55 | - Create and export functions, objects, and constants using modules. 56 | 57 | - Import modules using named and default imports. 58 | 59 | - Use third-party modules installed via npm. 60 | 61 | - Understand the basics of module bundling (optional). 62 | -------------------------------------------------------------------------------- /Day-13_Modules/Task-01/Add.js: -------------------------------------------------------------------------------- 1 | function add(a, b) { 2 | if (typeof a !== 'number' || typeof b !== 'number') { 3 | throw new Error("Both arguments must be numbers."); 4 | } 5 | return a + b; 6 | } 7 | 8 | export default add; 9 | -------------------------------------------------------------------------------- /Day-13_Modules/Task-01/Main.js: -------------------------------------------------------------------------------- 1 | import add from "./Add.js"; 2 | 3 | try { 4 | console.log(add(6, 7)); // ✅ Should print: 13 5 | console.log(add("6", 7)); // ❌ Will throw error 6 | } catch (error) { 7 | console.error("Error:", error.message); 8 | } 9 | -------------------------------------------------------------------------------- /Day-13_Modules/Task-02/Main.js: -------------------------------------------------------------------------------- 1 | import person from "./Person.js"; 2 | 3 | console.log(person.name); // Output: John Doe 4 | person.greet(); 5 | -------------------------------------------------------------------------------- /Day-13_Modules/Task-02/Person.js: -------------------------------------------------------------------------------- 1 | const person = { 2 | name: "Chinmay Kaitade", 3 | age: 24, 4 | greet() { 5 | console.log(`Hello, my name is ${this.name}`); 6 | }, 7 | }; 8 | export default person; 9 | -------------------------------------------------------------------------------- /Day-13_Modules/Task-03/Main.js: -------------------------------------------------------------------------------- 1 | import { add, subtract } from "./Math.js"; 2 | 3 | console.log(add(2, 3)); 4 | console.log(subtract(2, 3)); 5 | -------------------------------------------------------------------------------- /Day-13_Modules/Task-03/Math.js: -------------------------------------------------------------------------------- 1 | export function add(a, b) { 2 | return a + b; 3 | } 4 | 5 | export function subtract(a, b) { 6 | return a - b; 7 | } -------------------------------------------------------------------------------- /Day-13_Modules/Task-04/Main.js: -------------------------------------------------------------------------------- 1 | import multiply from "./Multiply.js"; 2 | 3 | console.log(multiply(4, 5)); 4 | -------------------------------------------------------------------------------- /Day-13_Modules/Task-04/Multiply.js: -------------------------------------------------------------------------------- 1 | export default function multiply(a, b) { 2 | return a * b; 3 | } -------------------------------------------------------------------------------- /Day-13_Modules/Task-05/Constants.js: -------------------------------------------------------------------------------- 1 | export const PI = 3.14; 2 | export function square(a) { 3 | return a * a; 4 | } 5 | 6 | export function cube(a) { 7 | return a * a * a; 8 | } 9 | -------------------------------------------------------------------------------- /Day-13_Modules/Task-05/Main.js: -------------------------------------------------------------------------------- 1 | import * as constants from "./Constants.js"; 2 | 3 | console.log(constants.PI); 4 | console.log(constants.square(3)); 5 | console.log(constants.cube(2)); 6 | -------------------------------------------------------------------------------- /Day-13_Modules/Task-06/Main.js: -------------------------------------------------------------------------------- 1 | import _ from 'lodash'; 2 | 3 | const array = [1, 2, 3, 4]; 4 | console.log(_.reverse(array)); -------------------------------------------------------------------------------- /Day-13_Modules/Task-07/Main.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | axios 4 | .get("https://fakestoreapi.com/products") 5 | .then((response) => { 6 | console.log(response.data); 7 | }) 8 | .catch((error) => { 9 | console.error(error); 10 | }); 11 | -------------------------------------------------------------------------------- /Day-13_Modules/Task-08/src/add.js: -------------------------------------------------------------------------------- 1 | function add(a, b) { 2 | return a + b; 3 | } 4 | export default add; 5 | -------------------------------------------------------------------------------- /Day-13_Modules/Task-08/src/index.js: -------------------------------------------------------------------------------- 1 | import add from "./add"; 2 | import multiply from "./multiply"; 3 | 4 | console.log(add(1, 2)); 5 | console.log(multiply(2, 3)); 6 | -------------------------------------------------------------------------------- /Day-13_Modules/Task-08/src/multiply.js: -------------------------------------------------------------------------------- 1 | export default function multiply(a, b) { 2 | return a * b; 3 | } -------------------------------------------------------------------------------- /Day-13_Modules/Task-08/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: './src/index.js', 5 | output: { 6 | filename: 'bundle.js', 7 | path: path.resolve(__dirname, 'dist'), 8 | }, 9 | mode: 'development', 10 | }; -------------------------------------------------------------------------------- /Day-14_Classes/Day-14 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-14_Classes/Day-14 Code Snap.png -------------------------------------------------------------------------------- /Day-14_Classes/README.md: -------------------------------------------------------------------------------- 1 | # Day-14 : Classes 🍵❤️‍🔥 2 | 3 | ![Day-14 Code Snap](Day-14%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Class Definition**_ 8 | 9 | - **Task 1:** Define a class `Person` with properties `name` and `age`, and a method to return a greeting message. Create an instance of the class and log the greeting message. 10 | 11 | - **Task 2:** Add a method to the `Person` class that updates the age property and logs the updated age. 12 | 13 |
14 | 15 | _**Activity 2: Class Inheritance**_ 16 | 17 | - **Task 3:** Define a class `Student` that extends the `Person` class. Add a property `studentID` and a method to return the student ID. Create an instance of the `Student` class and log the student ID. 18 | 19 | - **Task 4:** Override the greeting method in the `Student` class to include the student ID in the message. Log the overridden greeting message. 20 | 21 |
22 | 23 | _**Activity 3: Static Methods and Properties**_ 24 | 25 | - **Task 5:** Add a static method to the `Person` class that returns a generic greeting message. Call this static method without creating an instance of the class and log the message. 26 | 27 | - **Task 6:** Add a static property to the `Student` class to keep track of the number of students created. Increment this property in the constructor and log the total number of students. 28 | 29 |
30 | 31 | _**Activity 4: Getters and Setters**_ 32 | 33 | - **Task 7:** Add a getter method to the `Person` class to return the full name (assume a `firstName` and `LastName` property). Create an instance and log the full name using the getter. 34 | 35 | - **Task 8:** Add a setter method to the `Person` class to update the name properties (`firstName` and `LastName`). Update the name using the setter and log the updated full name. 36 | 37 |
38 | 39 | _**Activity 5: Private Fields (Optional)**_ 40 | 41 | - **Task 9:** Define a class `Account` with private fields for `balance` and a method to deposit and withdraw money. Ensure that the balance can only be updated through these methods. 42 | 43 | - **Task 10:** Create an instance of the `Account` class and test the deposit and withdraw methods, logging the balance after each operation. 44 | 45 |
46 | 47 | ### Feature Request 🙇‍♂️ 48 | 49 | 1. **Basic Class Script:** Write a script that defines a `Person` class with properties and methods, creates instances, and logs messages. 50 | 51 | 2. **Class Inheritance Script:** Create a script that defines a `Student` class extending `Person`, overrides methods, and logs the results. 52 | 53 | 3. **Static Methods and Properties Script:** Write a script that demonstrates static methods and properties in classes. 54 | 55 | 4. **Getters and Setters Script:** Create a script that uses getters and setters in a class. 56 | 57 | 5. **Private Fields Script:** Write a script that defines a class with private fields and methods to manipulate these fields (optional). 58 | 59 | ### Achievement 🏆 60 | 61 | By the end of these activities, you will: 62 | 63 | - Define and use classes with properties and methods. 64 | 65 | - Implement inheritance to extend classes. 66 | 67 | - Utilize static methods and properties. 68 | 69 | - Apply getters and setters for encapsulation. 70 | 71 | - Understand and use private fields in classes (optional). 72 | -------------------------------------------------------------------------------- /Day-15_Closures/Day-15 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-15_Closures/Day-15 Code Snap.png -------------------------------------------------------------------------------- /Day-15_Closures/README.md: -------------------------------------------------------------------------------- 1 | # Day-15 : Closures 🍵❤️‍🔥 2 | 3 | ![Day-15 Code Snap](Day-15%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Understanding Closures**_ 8 | 9 | - **Task 1:** Write a function that returns another function, where the inner function accesses a variable from the outer function's scope. Call the inner function and log the result. 10 | 11 | - **Task 2:** Create a closure that maintains a private counter. Implement functions to increment and get the current value of the counter. 12 | 13 |
14 | 15 | _**Activity 2: Practical Closures**_ 16 | 17 | - **Task 3:** Write a function that generates unique IDs. Use a closure to keep track of the last generated ID and increment it with each call. 18 | 19 | - **Task 4:** Create a closure that captures a user's name and returns a function that greets the user by name. 20 | 21 |
22 | 23 | _**Activity 3: Closures in Loops**_ 24 | 25 | - **Task 5:** Write a loop that creates an array of functions. Each function should log its index when called. Use a closure to ensure each function logs the correct index. 26 | 27 |
28 | 29 | _**Activity 4: Module Pattern**_ 30 | 31 | - **Task 6:** Use closures to create a simple module for managing a collection of items. Implement methods to add, remove, and list items. 32 | 33 |
34 | 35 | _**Activity 5: Memoization**_ 36 | 37 | - **Task 7:** Write a function that memoizes the results of another function. Use a closure to store the results of previous computations. 38 | 39 | - **Task 8:** Create a memoized version of a function that calculates the factorial of a number. 40 | 41 |
42 | 43 | ### Feature Request 🙇‍♂️ 44 | 45 | 1. **Basic Closure Script:** Write a script that demonstrates a basic closure with a function returning another function that accesses the outer function's variable. 46 | 47 | 2. **Counter Closure Script:** Create a script that uses a closure to maintain a private counter with increment and get functions. 48 | 49 | 3. **Unique ID Generator Script:** Write a script that generates unique IDs using a closure to keep track of the last generated ID. 50 | 51 | 4. **Loop Closure Script:** Create a script that demonstrates closures in loops to ensure functions log the correct index. 52 | 53 | 5. **Memoization Script:** Write a script that memoizes the results of a function and demonstrates it with a factorial calculation. 54 | 55 | ### Achievement 🏆 56 | 57 | By the end of these activities, you will: 58 | 59 | - Understand and create closures in JavaScript. 60 | 61 | - Use closures to maintain private state and create encapsulated modules. 62 | 63 | - Apply closures in practical scenarios like generating unique IDs and memoization. 64 | 65 | - Use closures in loops to capture and use variables correctly. 66 | -------------------------------------------------------------------------------- /Day-16_Recursion/Day-16 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-16_Recursion/Day-16 Code Snap.png -------------------------------------------------------------------------------- /Day-16_Recursion/README.md: -------------------------------------------------------------------------------- 1 | # Day-16 : Recursion 🍵❤️‍🔥 2 | 3 | ![Day-16 Code Snap](Day-16%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Basic Recursion**_ 8 | 9 | - **Task 1:** Write a recursive function to calculate the factorial of a number. Log the result for a few test cases. 10 | 11 | - **Task 2:** Write a recursive function to calculate the nth Fibonacci number. Log the result for a few test cases. 12 | 13 |
14 | 15 | _**Activity 2: Recursion with Arrays**_ 16 | 17 | - **Task 3:** Write a recursive function to find the sum of all elements in an array. Log the result for a few test cases 18 | 19 | - **Task 4:** Write a recursive function to find the maximum element in an array. Log the result for a few test cases. 20 | 21 |
22 | 23 | _**Activity 3: String Manipulation with Recursion**_ 24 | 25 | - **Task 5:** Write a recursive function to reverse a string. Log the result for a few test cases. 26 | 27 | - **Task 6:** Write a recursive function to check if a string is a palindrome. Log the result for a few test cases. 28 | 29 |
30 | 31 | _**Activity 4: Recursive Search**_ 32 | 33 | - **Task 7:** Write a recursive function to perform a binary search on a sorted array. Log the index of the target element for a few test cases. 34 | 35 | - **Task 8:** Write a recursive function to count the occurrences of a target element in an array. Log the result for a few test cases. 36 | 37 |
38 | 39 | _**Activity 5: Tree Traversal (Optional)**_ 40 | 41 | - **Task 9:** Write a recursive function to perform an in-order traversal of a binary tree. Log the nodes as they are visited. 42 | 43 | - **Task 10:** Write a recursive function to calculate the depth of a binary tree. Log the result for a few test cases. 44 | 45 |
46 | 47 | ### Feature Request 🙇‍♂️ 48 | 49 | 1. **Factorial and Fibonacci Script:** Write a script that includes recursive functions to calculate the factorial and Fibonacci numbers. 50 | 51 | 2. **Array Recursion Script:** Create a script that includes recursive functions to find the sum and maximum element of an array. 52 | 53 | 3. **String Recursion Script:** Write a script that includes recursive functions to reverse a string and check if a string is a palindrome. 54 | 55 | 4. **Recursive Search Script:** Create a script that includes recursive functions for binary search and counting occurrences in an array. 56 | 57 | 5. **Tree Traversal Script:** Write a script that includes recursive functions for in-order traversal and depth calculation of a binary tree (optional). 58 | 59 | ### Achievement 🏆 60 | 61 | By the end of these activities, you will: 62 | 63 | - Understand and implement basic recursion. 64 | 65 | - Apply recursion to solve problems with arrays and strings. 66 | 67 | - Use recursion for searching and counting elements in arrays. 68 | 69 | - Perform tree traversal and calculate tree depth using recursion (optional). 70 | 71 | 72 | -------------------------------------------------------------------------------- /Day-17_Data_Structures/Day-17 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-17_Data_Structures/Day-17 Code Snap.png -------------------------------------------------------------------------------- /Day-17_Data_Structures/README.md: -------------------------------------------------------------------------------- 1 | # Day-17 : Data Structures 🍵❤️‍🔥 2 | 3 | ![Day-17 Code Snap](Day-17%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Linked List**_ 8 | 9 | - **Task 1:** Implement a `Node` class to represent an element in a linked list with properties `value` and `next`. 10 | 11 | - **Task 2:** Implement a `LinkedList` class with methods to add a node to the end, remove a node from the end, and display all nodes. 12 | 13 |
14 | 15 | _**Activity 2: Stack**_ 16 | 17 | - **Task 3:** Implement a `Stack` class with methods `push` (add element), pop (remove element), and `peek` (view the top element). 18 | 19 | - **Task 4:** Use the `Stack` class to reverse a string by pushing all characters onto the stack and then popping them off. 20 | 21 |
22 | 23 | _**Activity 3: Queue**_ 24 | 25 | - **Task 5:** Implement a `Queue` class with methods enqueue (add element), `dequeue` (remove element), and `front` (view the first element). 26 | 27 | - **Task 6:** Use the `Queue` class to simulate a simple printer queue where print jobs are added to the queue and processed in order. 28 | 29 |
30 | 31 | _**Activity 4: Binary Tree**_ 32 | 33 | - **Task 7:** Implement a `TreeNode` class to represent a node in a binary tree with properties `value`, `left`, and `right`. 34 | 35 | - **Task 8:** Implement a `BinaryTree` class with methods for inserting values and performing in-order traversal to display nodes. 36 | 37 |
38 | 39 | _**Activity 5: Graph (Optional)**_ 40 | 41 | - **Task 9:** Implement a `Graph` class with methods to add vertices, add edges, and perform a breadth-first search (BFS). 42 | 43 | - **Task 10:** Use the `Graph` class to represent a simple network and perform BFS to find the shortest path between two nodes. 44 | 45 |
46 | 47 | ### Feature Request 🙇‍♂️ 48 | 49 | 1. **Linked List Script:** Write a script that implements a linked list with methods to add, remove, and display nodes. 50 | 51 | 2. **Stack Script:** Create a script that implements a stack and uses it to reverse a string. 52 | 53 | 3. **Queue Script:** Write a script that implements a queue and simulates a printer queue. 54 | 55 | 4. **Binary Tree Script:** Create a script that implements a binary tree with insertion and in-order traversal methods. 56 | 57 | 5. **Graph Script:** Write a script that implements a graph and performs breadth-first search (optional). 58 | 59 | ### Achievement 🏆 60 | 61 | By the end of these activities, you will: 62 | 63 | - Implement and use linked lists for dynamic data storage. 64 | 65 | - Use stacks for LIFO (Last-In-First-Out) operations and reverse data. 66 | 67 | - Use queues for FIFO (First-in-First-Out) operations and simulate real-world scenarios. 68 | 69 | - Implement binary trees for hierarchical data storage and traversal. 70 | 71 | - Understand and use graphs for network representations and pathfinding (optional). 72 | -------------------------------------------------------------------------------- /Day-18_Algorithms/Day-18 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-18_Algorithms/Day-18 Code Snap.png -------------------------------------------------------------------------------- /Day-18_Algorithms/README.md: -------------------------------------------------------------------------------- 1 | # Day-17 : Algorithms 🍵❤️‍🔥 2 | 3 | ![Day-18 Code Snap](Day-18%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Sorting Algorithms**_ 8 | 9 | - **Task 1:** Implement the bubble sort algorithm to sort an array of numbers in ascending order. Log the sorted array. 10 | 11 | - **Task 2:** Implement the selection sort algorithm to sort an array of numbers in ascending order. Log the sorted array. 12 | 13 | - **Task 3:** Implement the quicksort algorithm to sort an array of numbers in ascending order. Log the sorted array. 14 | 15 |
16 | 17 | _**Activity 2: Searching Algorithms**_ 18 | 19 | - **Task 4:** Implement the linear search algorithm to find a target value in an array. Log the index of the target value. 20 | 21 | - **Task 5:** Implement the binary search algorithm to find a target value in a sorted array. Log the index of the target value. 22 | 23 |
24 | 25 | _**Activity 3: String Algorithms**_ 26 | 27 | - **Task 6:** Write a function to count the occurrences of each character in a string. Log the character counts. 28 | 29 | - **Task 7:** Write a function to find the longest substring without repeating characters in a string. Log the length of the substring. 30 | 31 |
32 | 33 | _**Activity 4: Array Algorithms**_ 34 | 35 | - **Task 8:** Write a function to rotate an array by k positions. Log the rotated array. 36 | 37 | - **Task 9:** Write a function to merge two sorted arrays into one sorted array. Log the merged array 38 | 39 |
40 | 41 | _**Activity 5: Dynamic Programming (Optional)**_ 42 | 43 | - **Task 10:** Write a function to solve the Fibonacci sequence using dynamic programming. Log the Fibonacci numbers. 44 | 45 | - **Task 11:** Write a function to solve the knapsack problem using dynamic programming. Log the maximum value that can be obtained. 46 | 47 |
48 | 49 | ### Feature Request 🙇‍♂️ 50 | 51 | 1. **Sorting Algorithm Script:** Write a script that implements bubble sort, selection sort, and quicksort algorithms to sort arrays. 52 | 53 | 2. **Searching Algorithm Script:** Create a script that implements linear search and binary search algorithms to find values in arrays. 54 | 55 | 3. **String Algorithm Script:** Write a script that counts character occurrences and finds the longest substring without repeating characters. 56 | 57 | 4. **Array Algorithm Script:** Create a script that rotates arrays and merges sorted arrays. 58 | 59 | 5. **Dynamic Programming Script:** Write a script that solves the Fibonacci sequence and knapsack problem using dynamic programming (optional). 60 | 61 | ### Achievement 🏆 62 | 63 | By the end of these activities, you will: 64 | 65 | - Implement and understand common sorting algorithms. 66 | 67 | - Implement and understand common searching algorithms. 68 | 69 | - Solve string manipulation problems using algorithms. 70 | 71 | - Perform array operations using algorithms. 72 | 73 | - Apply dynamic programming to solve complex problems (optional). 74 | -------------------------------------------------------------------------------- /Day-19_Regular_Expressions/01. Regular Expressions.js: -------------------------------------------------------------------------------- 1 | // Activity 1: Basic Regular Expressions ✅ 2 | // - Task 1: 3 | let str = "This is a 30 Days JavaScript Challenge. I Love JavaScript"; 4 | let regex = /JavaScript/g; 5 | let matches = str.match(regex); 6 | console.log(matches); 7 | 8 | console.log("***Task 1 Ended Here!✅***"); 9 | 10 | // - Task 2: 11 | let str2 = "Random Digits are 123 456 789"; 12 | let regex2 = /\d/g; 13 | let matches2 = str2.match(regex2); 14 | console.log(matches2); 15 | 16 | console.log("***Task 2 Ended Here!✅***"); 17 | 18 | // ********************************* // 19 | 20 | // Activity 2: Character Classes and Quantifiers ✅ 21 | // - Task 3: 22 | let str3 = "JavaScript is a Programming Language."; 23 | let regex3 = /\b[A-Z][a-z]*\b/g; 24 | let matches3 = str3.match(regex3); 25 | console.log(matches3); 26 | 27 | console.log("***Task 3 Ended Here!✅***"); 28 | 29 | // - Task 4: Linear Search 30 | let str4 = "30 Days JavaScript Challenge by Hitesh Sir 123."; 31 | let regex4 = /\d+/g; 32 | let matches4 = str4.match(regex4); 33 | console.log(matches4); 34 | 35 | console.log("***Task 4 Ended Here!✅***"); 36 | 37 | // ********************************* // 38 | 39 | // Activity 3: Grouping and Capturing ✅ 40 | // - Task 5: 41 | let str5 = "(123) 456-7890"; 42 | let regex5 = /\((\d{3})\) (\d{3})-(\d{4})/; 43 | let matches5 = str5.match(regex5); 44 | console.log(matches5); 45 | 46 | console.log("***Task 5 Ended Here!✅***"); 47 | 48 | // - Task 6: 49 | let str6 = "user@example.com"; 50 | let regex6 = /(\w+)@(\w+\.\w+)/; 51 | let matches6 = str6.match(regex6); 52 | console.log(matches6); 53 | 54 | console.log("***Task 6 Ended Here!✅***"); 55 | 56 | // ********************************* // 57 | 58 | // Activity 4: Assertions and Boundaries ✅ 59 | // - Task 7: 60 | let str7 = "Hello world!"; 61 | let regex7 = /^\w+/; 62 | let matches7 = str7.match(regex7); 63 | console.log(matches7); 64 | 65 | console.log("***Task 7 Ended Here!✅***"); 66 | 67 | // - Task 8: 68 | let str8 = "Hello world!"; 69 | let regex8 = /\w+$/; 70 | let matches8 = str8.match(regex8); 71 | console.log(matches8); 72 | 73 | console.log("***Task 8 Ended Here!✅***"); 74 | 75 | // ********************************* // 76 | 77 | // Activity 5: Practical Applications ✅ 78 | // - Task 9: 79 | let password = "Passw0rd!"; 80 | let regex9 = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/; 81 | let isValid = regex9.test(password); 82 | console.log(isValid); 83 | 84 | console.log("***Task 9 Ended Here!✅***"); 85 | 86 | // - Task 10: 87 | let url = "https://www.urlinfo.com"; 88 | let regex1 = /^(https?:\/\/)?([\w-]+(\.[\w-]+)+)([\/?]?.*)$/; 89 | let isValid2 = regex1.test(url); 90 | console.log(isValid2); 91 | 92 | console.log("***Task 10 Ended Here!✅***"); 93 | -------------------------------------------------------------------------------- /Day-19_Regular_Expressions/Day-19 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-19_Regular_Expressions/Day-19 Code Snap.png -------------------------------------------------------------------------------- /Day-19_Regular_Expressions/README.md: -------------------------------------------------------------------------------- 1 | # Day-19 : Regular Expressions 🍵❤️‍🔥 2 | 3 | ![Day-19 Code Snap](Day-19%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Basic Regular Expressions**_ 8 | 9 | - **Task 1:** Write a regular expression to match a simple pattern (e.g., match all occurrences of the word "JavaScript in a string). Log the matches. 10 | 11 | - **Task 2:** Write a regular expression to match all digits in a string. Log the matches. 12 | 13 |
14 | 15 | _**Activity 2: Character Classes and Quantifiers**_ 16 | 17 | - **Task 3:** Write a regular expression to match all words in a string that start with a capital letter. Log the matches. 18 | 19 | - **Task 4:** Write a regular expression to match all sequences of one or more digits in a string. Log the matches. 20 | 21 |
22 | 23 | _**Activity 3: Grouping and Capturing**_ 24 | 25 | - **Task 5:** Write a regular expression to capture the area code, central office code, and line number from a US phone number format (e.g., (123) 456-7890). Log the captures. 26 | 27 | - **Task 6:** Write a regular expression to capture the username and domain from an email address. Log the captures. 28 | 29 |
30 | 31 | _**Activity 4: Assertions and Boundaries**_ 32 | 33 | - **Task 7:** Write a regular expression to match a word only if it is at the beginning of a string. Log the matches. 34 | 35 | - **Task 8:** Write a regular expression to match a word only if it is at the end of a string. Log the matches. 36 | 37 |
38 | 39 | _**Activity 5: Practical Applications**_ 40 | 41 | - **Task 9:** Write a regular expression to validate a simple password (must include at least one uppercase letter, one lowercase letter, one digit, and one special character). Log whether the password is valid. 42 | 43 | - **Task 10:** Write a regular expression to validate a URL. Log whether the the URL is valid. 44 | 45 |
46 | 47 | ### Feature Request 🙇‍♂️ 48 | 49 | 1. **Basic Regex Regex Script:** Write a script that uses regular expressions to match simple patterns and log the matches 50 | 51 | 2. **Character Classes and Quantifiers Script:** Create a script that uses regular expressions to match words with specific characteristics and log the matches. 52 | 53 | 3. **Grouping and Capturing Script:** Write a script that uses regular expressions to capture parts of a string, such as phone numbers and email addresses, and log the captures. 54 | 55 | 4. **Assertions and Boundaries Script:** Create a script that uses regular expressions to match words sat specific positions in a string and log the matches. 56 | 57 | 5. **Validation Script:** Write a script that uses regular expressions to ns to validate passwords and URLs and ling whether they are valid. 58 | 59 | ### Achievement 🏆 60 | 61 | By the end of these activities, you will: 62 | 63 | - Understand and create basic regular expressions. 64 | 65 | - Use character classes and quantifiers in regular expressions. 66 | 67 | - Implement grouping and capturing in regular expressions. 68 | 69 | - Apply assertions and boundaries in regular expressions. 70 | 71 | - Use regular expressions for practical applications like validating passwords and URLs. 72 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/README.md: -------------------------------------------------------------------------------- 1 | # Day-20 : LocalStorage and SessionStorage 🍵❤️‍🔥 2 | 3 | ## Tasks | Activities 🌟 4 | 5 | _**Activity 1: Understanding LocalStorage**_ 6 | 7 | - **Task 1:** Write a script to save a string value to localStorage and retrieve it. Log the retrieved value. 8 | 9 | - **Task 2:** Write a script to save an object to localStorage by converting it to a JSON string. Retrieve and parse the object, then log it. 10 | 11 |
12 | 13 | _**Activity 2: Using LocalStorage**_ 14 | 15 | - **Task 3:** Create a simple form that saves user input (e.g., name and email) to localStorage when submitted. Retrieve and display the saved data on page load. 16 | 17 | - **Task 4:** Write a script to remove an item from localStorage. Log the localStorage content before and after removal. 18 | 19 |
20 | 21 | _**Activity 3: Understanding SessionStorage**_ 22 | 23 | - **Task 5:** Write a script to save a string value to sessionStorage and retrieve it. Log the retrieved value. 24 | 25 | - **Task 6:** Write a script to save an object to sessionStorage by converting it to a JSON string. Retrieve and parse the object, then log it. 26 | 27 |
28 | 29 | _**Activity 4: Using SessionStorage**_ 30 | 31 | - **Task 7:** Create a simple form that saves user input (e.g., name and email) to sessionStorage when submitted. Retrieve and display the saved data on page load. 32 | 33 | - **Task 8:** Write a script to remove an item from sessionStorage. Log the sessionStorage content before and after removal. 34 | 35 |
36 | 37 | _**Activity 5: Comparing LocalStorage and SessionStorage**_ 38 | 39 | - **Task 9:** Write a function that accepts a key and a value, and saves the value to both localStorage and sessionStorage. Retrieve and log the values from both storage mechanisms. 40 | 41 | - **Task 10:** Write a function that clears all data from both localStorage and sessionStorage. Verify that both storages are empty. 42 | 43 |
44 | 45 | ### Feature Request 🙇‍♂️ 46 | 47 | 1. **LocalStorage Script:** Write a script that saves, retrieves, and removes items from localStorage, and displays the saved data on page load. 48 | 49 | 2. **SessionStorage Script:** Create a script that saves, retrieves, and removes items from sessionStorage, and display 50 | 51 | 3. **Storage Comparison Script:** Write a script that saves data to both localStorage and sessionStorage, retrieves the data, and compares the results. 52 | 53 | 4. **Clear Storage Script:** Create a script that clears all data from both localStorage and sessionStorage, and verifies the operation. 54 | 55 | ### Achievement 🏆 56 | 57 | By the end of these activities, you will: 58 | 59 | - Understand how to use localStorage and sessionStorage for persistent and session- specific data storage. 60 | 61 | - Save, retrieve, and remove data from both localStorage and sessionStorage. 62 | 63 | - Implement form data storage using localStorage and sessionStorage. 64 | 65 | - Compare and contrast the use cases for localStorage and sessionStorage. 66 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Task-01 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-01/script.js: -------------------------------------------------------------------------------- 1 | // - Task 1: 2 | // Save string to localStorage 3 | localStorage.setItem("myString", "Hello, LocalStorage!"); 4 | 5 | // Retrieve and log the string 6 | const savedString = localStorage.getItem("myString"); 7 | console.log("Saved String:", savedString); 8 | 9 | console.log("***Task 1 Ended Here!✅***"); 10 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Task-02 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-02/script.js: -------------------------------------------------------------------------------- 1 | // - Task 2: 2 | // Save object to localStorage 3 | const user = { name: "Alice", email: "alice@example.com" }; 4 | localStorage.setItem("user", JSON.stringify(user)); 5 | 6 | // Retrieve and parse the object 7 | const savedUser = JSON.parse(localStorage.getItem("user")); 8 | console.log("Saved User:", savedUser); 9 | 10 | console.log("***Task 2 Ended Here!✅***"); 11 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Task-03 7 | 8 | 9 |
10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-03/script.js: -------------------------------------------------------------------------------- 1 | // - Task 3: 2 | 3 | // Save form data to localStorage 4 | document.getElementById("userForm").addEventListener("submit", function (e) { 5 | e.preventDefault(); 6 | const name = document.getElementById("name").value; 7 | const email = document.getElementById("email").value; 8 | localStorage.setItem("userData", JSON.stringify({ name, email })); 9 | displayData(); 10 | }); 11 | 12 | // Display saved data on page load 13 | function displayData() { 14 | const savedData = JSON.parse(localStorage.getItem("userData")); 15 | if (savedData) { 16 | document.getElementById( 17 | "savedData" 18 | ).textContent = `Name: ${savedData.name}, Email: ${savedData.email}`; 19 | } 20 | } 21 | 22 | displayData(); 23 | 24 | console.log("***Task 3 Ended Here!✅***"); 25 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day-04 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-04/script.js: -------------------------------------------------------------------------------- 1 | // - Task 4: Linear Search 2 | // Log localStorage content 3 | console.log("Before Removal:", localStorage.getItem("user")); 4 | 5 | // Remove item 6 | localStorage.removeItem("user"); 7 | 8 | // Log localStorage content after removal 9 | console.log("After Removal:", localStorage.getItem("user")); 10 | 11 | console.log("***Task 4 Ended Here!✅***"); -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Task-05 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-05/script.js: -------------------------------------------------------------------------------- 1 | // - Task 5: 2 | // Save string to sessionStorage 3 | sessionStorage.setItem("sessionString", "Hello, SessionStorage!"); 4 | 5 | // Retrieve and log the string 6 | const sessionString = sessionStorage.getItem("sessionString"); 7 | console.log("Session String:", sessionString); 8 | 9 | console.log("***Task 5 Ended Here!✅***"); -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Task-06 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-06/script.js: -------------------------------------------------------------------------------- 1 | // - Task 6: 2 | // Save object to sessionStorage 3 | const sessionUser = { name: "Bob", email: "bob@example.com" }; 4 | sessionStorage.setItem("sessionUser", JSON.stringify(sessionUser)); 5 | 6 | // Retrieve and parse the object 7 | const sessionSavedUser = JSON.parse(sessionStorage.getItem("sessionUser")); 8 | console.log("Session User:", sessionSavedUser); 9 | 10 | console.log("***Task 6 Ended Here!✅***"); -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Task-07 7 | 8 | 9 |
10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-07/script.js: -------------------------------------------------------------------------------- 1 | // - Task 7: 2 | 3 | // Save form data to sessionStorage 4 | document.getElementById("sessionForm").addEventListener("submit", function (e) { 5 | e.preventDefault(); 6 | const name = document.getElementById("sessionName").value; 7 | const email = document.getElementById("sessionEmail").value; 8 | sessionStorage.setItem("sessionData", JSON.stringify({ name, email })); 9 | displaySessionData(); 10 | }); 11 | 12 | // Display saved data on page load 13 | function displaySessionData() { 14 | const savedSessionData = JSON.parse(sessionStorage.getItem("sessionData")); 15 | if (savedSessionData) { 16 | document.getElementById( 17 | "sessionData" 18 | ).textContent = `Name: ${savedSessionData.name}, Email: ${savedSessionData.email}`; 19 | } 20 | } 21 | 22 | displaySessionData(); 23 | 24 | console.log("***Task 7 Ended Here!✅***"); 25 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Task-08 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-08/script.js: -------------------------------------------------------------------------------- 1 | // - Task 8: 2 | // Log sessionStorage content 3 | console.log("Before Removal:", sessionStorage.getItem("sessionUser")); 4 | 5 | // Remove item 6 | sessionStorage.removeItem("sessionUser"); 7 | 8 | // Log sessionStorage content after removal 9 | console.log("After Removal:", sessionStorage.getItem("sessionUser")); 10 | 11 | console.log("***Task 8 Ended Here!✅***"); -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Task-09 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-09/script.js: -------------------------------------------------------------------------------- 1 | // - Task 9: 2 | function saveToBothStorages(key, value) { 3 | localStorage.setItem(key, value); 4 | sessionStorage.setItem(key, value); 5 | 6 | console.log("LocalStorage Value:", localStorage.getItem(key)); 7 | console.log("SessionStorage Value:", sessionStorage.getItem(key)); 8 | } 9 | 10 | saveToBothStorages("sharedKey", "Shared Value"); 11 | 12 | console.log("***Task 9 Ended Here!✅***"); -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Task-10 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Day-20_LocalStorage_and_SessionStorage/Task-10/script.js: -------------------------------------------------------------------------------- 1 | // - Task 10: 2 | function clearAllStorages() { 3 | localStorage.clear(); 4 | sessionStorage.clear(); 5 | 6 | console.log("LocalStorage after clear:", localStorage.length); 7 | console.log("SessionStorage after clear:", sessionStorage.length); 8 | } 9 | 10 | clearAllStorages(); 11 | 12 | console.log("***Task 10 Ended Here!✅***"); 13 | -------------------------------------------------------------------------------- /Day-21_Leetcode_Easy/Day-21 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-21_Leetcode_Easy/Day-21 Code Snap.png -------------------------------------------------------------------------------- /Day-21_Leetcode_Easy/README.md: -------------------------------------------------------------------------------- 1 | # Day-21 : Leetcode Easy 🍵❤️‍🔥 2 | 3 | ![Day-21 Code Snap](Day-21%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Two Sum**_ 8 | 9 | - **Task 1:** Solve the "Two Sum" problem on LeetCode. 10 | 11 | - Write a function that takes an array of numbers and a target number, and returns the indices of the two numbers that add up to the target. 12 | - Log the indices for a few test cases. 13 | 14 |
15 | 16 | _**Activity 2: Reverse Integer**_ 17 | 18 | - **Task 2:** Solve the "Reverse Integer problem on LeetCode. 19 | 20 | - Write a function that takes an integer and returns it with its digits reversed. 21 | - Handle edge cases like negative numbers and numbers ending in zero. 22 | - Log the reversed integers for a few test cases. 23 | 24 |
25 | 26 | _**Activity 3: Palindrome Number**_ 27 | 28 | - **Task 3:** Solve the "Palindrome Number" problem on LeetCode. 29 | 30 | - Write a function that takes an integer and returns true if it i t is a palindrome, and false otherwise. 31 | - Log the result for a few test cases, including edge cases like negative numbers. 32 | 33 |
34 | 35 | _**Activity 4: Merge Two Sorted Lists**_ 36 | 37 | - **Task 4:** Solve the "Merge Two Sorted Lists problem on LeetCode. 38 | 39 | - Write a function that takes two sorted linked lists and returns a new sorted list by merging them. 40 | - Create a few test cases with linked lists and log the merged list. 41 | 42 |
43 | 44 | _**Activity 5: Valid Parentheses**_ 45 | 46 | - **Task 5:** Solve the 'Valid Parentheses problem on LeetCode. 47 | 48 | - Write a function that takes a string containing just the characters(), [], '' and T', and determines if the input string is valid. 49 | - A string is valid if open brackets are closed in the correct order. 50 | - Log the result for a few test cases. 51 | 52 |
53 | 54 | ### Feature Request 🙇‍♂️ 55 | 56 | 1. **Two Sum Script:** Write a script that includes a function to solve the "Two Sum" problem and logs the indices of the two numbers. 57 | 58 | 2. **Reverse Integer Script:** Create a script that includes a function to reverse an integer and handles edge cases. 59 | 60 | 3. **Palindrome Number Script:** Write a script that includes a function to check if an integer is an palindrome and log the result. 61 | 62 | 4. **Merge Two Sorted Lists Script:** Create a script that includes a function to merge two sorted linked lists and logs the merged list. 63 | 64 | 5. **Valid Parentheses Script:** Write a script that includes a function to check if a string of parentheses is valid and logs the result. 65 | 66 | ### Achievement 🏆 67 | 68 | By the end of these activities, you will: 69 | 70 | - Solve common LeetCode problems. 71 | 72 | - Apply problem-solving skills to implement algorithms. 73 | 74 | - Understand and handle edge cases in algorithmic solutions. 75 | 76 | - Gain confidence in solving easy-level coding challenges on LeetCode. 77 | -------------------------------------------------------------------------------- /Day-22_Leetcode_Medium/Day-22 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-22_Leetcode_Medium/Day-22 Code Snap.png -------------------------------------------------------------------------------- /Day-22_Leetcode_Medium/README.md: -------------------------------------------------------------------------------- 1 | # Day-22 : Leetcode Medium 🍵❤️‍🔥 2 | 3 | ![Day-22 Code Snap](Day-22%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Add Two Numbers**_ 8 | 9 | - **Task 1:** Solve the 'Add Two Numbers" problem on LeetCode. 10 | 11 | - Write a function that takes two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each node contains a single digit. Add the two numbers and return the sum as a linked list. 12 | - Create a few test cases with linked lists and log the sum as a linked list. 13 | 14 |
15 | 16 | _**Activity 2: Longest Substring Without Repeating Characters**_ 17 | 18 | - **Task 2:** Solve the "Longest Substring Without Repeating Characters' problem on LeetCode. 19 | 20 | - Write a function that takes a string and returns the length of the longest substring without repeating characters. 21 | - Log the length for a few test cases, including edge cases. 22 | 23 |
24 | 25 | _**Activity 3: Container With Most Water**_ 26 | 27 | - **Task 3:** Solve the "Container With Most Water" problem on LeetCode. 28 | 29 | - Write a function that takes an array of non-negative integers where each integer represents the height of a line drawn at each point. Find two lines that together with the x-axis form a container, such that the container holds the most water. 30 | - Log the maximum amount of water for a few test cases. 31 | 32 |
33 | 34 | _**Activity 4: 3Sum**_ 35 | 36 | - **Task 4:** Solve the 3Sum problem on LeetCode. 37 | 38 | - Write a function that takes an array of integers and finds all unique triplets in the array which give the sum of zero. 39 | - Log the triplets for a few test cases, including edge cases. 40 | 41 |
42 | 43 | _**Activity 5: Group Anagrams**_ 44 | 45 | - **Task 5:** Solve the "Group Anagrams" problem on LeetCode. 46 | 47 | - Write a function that takes an array of strings and groups anagrams together. 48 | - Log the grouped anagrams for a few test cases. 49 | 50 |
51 | 52 | ### Feature Request 🙇‍♂️ 53 | 54 | 1. **Add Two Numbers Script:** Write a script that includes a function to solve the "Add Two Numbers problem and logs the sum as a linked list. 55 | 56 | 2. **Longest Substring Script:** Create a script that includes a function to find the longest substring without repeating characters and logs the length. 57 | 58 | 3. **Container With Most Water Script:** Write a script that includes a function to find the container with the most water and logs the maximum amount of water. 59 | 60 | 4. **3Sum Script:** Create a script that includes a function to find all unique triplets in an array that sum to zero and logs the triplets. 61 | 62 | 5. **Group Anagrams Script:** Write a script that includes a function to group anagrams and logs the grouped anagrams. 63 | 64 | ### Achievement 🏆 65 | 66 | By the end of these activities, you will: 67 | 68 | - Solve common medium-level LeetCode problems. 69 | 70 | - Apply advanced problem-solving skills to implement algorithms. 71 | 72 | - Understand and handle edge cases in more complex algorithmic solutions. 73 | 74 | - Gain confidence in solving medium-level coding challenges on LeetCode. 75 | -------------------------------------------------------------------------------- /Day-23_Leetcode_Hard/Day-23 Code Snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-23_Leetcode_Hard/Day-23 Code Snap.png -------------------------------------------------------------------------------- /Day-23_Leetcode_Hard/README.md: -------------------------------------------------------------------------------- 1 | # Day-23 : Leetcode Hard 🍵❤️‍🔥 2 | 3 | ![Day-23 Code Snap](Day-23%20Code%20Snap.png) 4 | 5 | ## Tasks | Activities 🌟 6 | 7 | _**Activity 1: Median of Two Sorted Arrays**_ 8 | 9 | - **Task 1:** Solve the "Median of Two Sorted Arrays" problem on LeetCode. 10 | 11 | - Write a function that takes two sorted arrays of integers and returns the median of the two sorted arrays. 12 | - Log the median for a few test cases, including edge cases. 13 | 14 |
15 | 16 | _**Activity 2: Merge k Sorted Lists**_ 17 | 18 | - **Task 2:** Solve the "Merge k Sorted Lists" problem on LeetCode. 19 | 20 | - Write a function that takes an array of ik linked lists, each linked list is sorted in ascending order, and merges all the linked lists into one sorted linked list. 21 | - Create a few test cases with linked lists and log the merged list. 22 | 23 |
24 | 25 | _**Activity 3: Trapping Rain Water**_ 26 | 27 | - **Task 3:** Solve the "Trapping Rain Water" problem on LeetCode. 28 | 29 | - Write a function that takes an array of non-negative integers representing an elevation map where the width of each bar is 1, and computes how much water it can trap after raining. 30 | - Log the amount of trapped water for a few test cases. 31 | 32 |
33 | 34 | _**Activity 4: N-Queens**_ 35 | 36 | - **Task 4:** Solve the 'N-Queens' problem on LeetCode. 37 | 38 | - Write a function that places n queens on an nen chessboard such that no two queens attack each other, and returns all distinct solutions to the n-queens puzzle. 39 | - Log the distinct solutions for a few test cases. 40 | 41 |
42 | 43 | _**Activity 5: Word Ladder**_ 44 | 45 | - **Task 5:** Solve the "Word Ladder" problem on 1 LeetCode. 46 | 47 | - Write a function that takes a begin word, an end word, and a dictionary of words, and finds the length of the shortest transformation sequence from the begin word to the end word, such that only one letter can be changed at a time and each transformed ward must exist in the word list. 48 | - Log the length of the shortest transformation sequence for a few test cases. 49 | 50 |
51 | 52 | ### Feature Request 🙇‍♂️ 53 | 54 | 1. **Median of Two Sorted Arrays Script:** Write a script that includes a function to find the median of two sorted arrays and logs the median. 55 | 56 | 2. **Merge k Sorted Lists Script:** Create a script that includes a function. to merge ki sorted linked lists and logs the merged list. 57 | 58 | 3. **Trapping Rain Water Script:** Write a script that includes a function to to calculate the amount of trapped rainwater and logs the result. 59 | 60 | 4. **N-Queens Script:** Create a script that includes a function to solve the N-Queens problem and logs the distinct solutions. 61 | 62 | 5. **Word Ladder Script:** Write a script that includes a function to find the shortest transformation sequence in a word ladder and logs the sequence length. 63 | 64 | ### Achievement 🏆 65 | 66 | By the end of these activities, you will: 67 | 68 | - Solve complex LeetCode problems. 69 | 70 | - Apply advanced problem-solving skills to implement efficient algorithms. 71 | 72 | - Understand and handle edge cases in hard algorithmic solutions. 73 | 74 | - Gain confidence in solving hard-level coding challenges on LeetCode. 75 | 76 | 77 | -------------------------------------------------------------------------------- /Day-24_Project-01_Weather_App/01. Weather App Project/Project-01 Weather App/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Chinmay Kaitade 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Day-24_Project-01_Weather_App/01. Weather App Project/Project-01 Weather App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Weather App 7 | 8 | 9 | 10 |
11 |

Weather ForeCasts

12 | 13 |
14 |

15 |

16 |

17 |
18 | 19 |
20 | 21 | 22 |
23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Day-24_Project-01_Weather_App/01. Weather App Project/Project-01 Weather App/output/Image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-24_Project-01_Weather_App/01. Weather App Project/Project-01 Weather App/output/Image1.png -------------------------------------------------------------------------------- /Day-24_Project-01_Weather_App/01. Weather App Project/Project-01 Weather App/output/Image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-24_Project-01_Weather_App/01. Weather App Project/Project-01 Weather App/output/Image2.png -------------------------------------------------------------------------------- /Day-24_Project-01_Weather_App/01. Weather App Project/Project-01 Weather App/script.js: -------------------------------------------------------------------------------- 1 | const apiKey = "6685faf716a7f4b64ca8034c64565ca5"; 2 | 3 | // OpenWeatherMap API key 4 | 5 | document.getElementById("search-btn").addEventListener("click", () => { 6 | const city = document.getElementById("city-input").value; 7 | fetchWeatherData(city); 8 | }); 9 | 10 | const weatherIcons = { 11 | clear: "https://openweathermap.org/img/wn/01d.png", // Replace with actual image paths 12 | clouds: "https://openweathermap.org/img/wn/02d.png", 13 | rain: "https://openweathermap.org/img/wn/09d.png", 14 | default: "https://openweathermap.org/img/wn/10d.png", 15 | }; 16 | 17 | function fetchWeatherData(city) { 18 | fetch( 19 | `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric` 20 | ) 21 | .then((response) => response.json()) 22 | .then((data) => { 23 | document.getElementById("city-name").textContent = data.name; 24 | document.getElementById( 25 | "temperature" 26 | ).textContent = `Temperature: ${data.main.temp}°C`; 27 | const weatherCondition = data.weather[0].description; 28 | document.getElementById( 29 | "weather-condition" 30 | ).innerHTML = `Condition: ${weatherCondition} ${weatherCondition}`; 33 | fetchForecastData(city); 34 | }) 35 | .catch((error) => console.error("Error fetching weather data:", error)); 36 | } 37 | 38 | function fetchForecastData(city) { 39 | fetch( 40 | `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiKey}&units=metric` 41 | ) 42 | .then((response) => response.json()) 43 | .then((data) => { 44 | const forecastContainer = document.querySelector(".forecast"); 45 | forecastContainer.innerHTML = ""; // Clear previous forecast 46 | data.list.forEach((forecast, index) => { 47 | if (index % 8 === 0) { 48 | // Display forecast for every 24 hours 49 | const forecastElement = document.createElement("div"); 50 | forecastElement.innerHTML = ` 51 |

Date: ${new Date( 52 | forecast.dt * 1000 53 | ).toLocaleDateString()}

54 |

Temperature: ${forecast.main.temp}°C

55 |

Condition: ${forecast.weather[0].description} ${forecast.weather[0].description}

59 | `; 60 | forecastContainer.appendChild(forecastElement); 61 | } 62 | }); 63 | }) 64 | .catch((error) => console.error("Error fetching forecast data:", error)); 65 | } 66 | -------------------------------------------------------------------------------- /Day-24_Project-01_Weather_App/01. Weather App Project/Project-01 Weather App/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | body { 4 | font-family: "Poppins", sans-serif; 5 | background: #dadada; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | height: 100vh; 10 | margin: 0; 11 | } 12 | 13 | .container { 14 | background-color: #2b2d35; 15 | padding: 28px; 16 | border-radius: 8px; 17 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 18 | height: 480px; 19 | display: flex; 20 | flex-direction: column; 21 | width: 300px; 22 | text-align: center; 23 | } 24 | 25 | .container h1 { 26 | font-size: 2.6rem; 27 | letter-spacing: 0.2rem; 28 | line-height: 1.2; 29 | color: white; 30 | } 31 | 32 | .container span { 33 | font-size: 2.6rem; 34 | color: #ffbd00; 35 | } 36 | 37 | .weather-info { 38 | margin-bottom: 10px; 39 | } 40 | 41 | .search input { 42 | padding: 10px; 43 | width: calc(100% - 22px); 44 | margin-bottom: 10px; 45 | } 46 | 47 | .search button { 48 | padding: 10px; 49 | width: 100%; 50 | margin-top: 18px; 51 | background: #007bff; 52 | color: white; 53 | border: none; 54 | border-radius: 4px; 55 | cursor: pointer; 56 | } 57 | 58 | .search button:hover { 59 | background: #0066da; 60 | } 61 | 62 | .weather-info { 63 | display: flex; 64 | flex-direction: column; 65 | font-size: 1.3rem; 66 | margin-top: -8px; 67 | } 68 | 69 | .weather-info h2 { 70 | color: #51a5ff; 71 | letter-spacing: 1.3px; 72 | text-transform: uppercase; 73 | font-size: 1.8rem; 74 | display: flex; 75 | flex-direction: column; 76 | } 77 | 78 | .weather-info p { 79 | font-size: 1.3rem; 80 | display: flex; 81 | color: #e3f4fe; 82 | flex-direction: column; 83 | margin-top: -8px; 84 | } 85 | 86 | .weather-info p:nth-child(3) { 87 | font-size: 1.3rem; 88 | display: flex; 89 | justify-content: center; 90 | align-items: center; 91 | } 92 | 93 | .weather-icon { 94 | width: 50px; 95 | height: 50px; 96 | } 97 | 98 | .forecast { 99 | margin-top: 40px; 100 | margin-bottom: 40px; 101 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 102 | height: auto; 103 | display: flex; 104 | flex-direction: column; 105 | width: 310px; 106 | text-align: center; 107 | } 108 | 109 | .forecast div { 110 | border: 2px solid gray; 111 | margin: 10px 12px; 112 | border-radius: 7px; 113 | } 114 | 115 | .forecast div p:nth-child(3) { 116 | display: flex; 117 | justify-content: center; 118 | align-items: center; 119 | } 120 | 121 | .forecast div:hover { 122 | background-color: #2f5580; 123 | border: none; 124 | transition: all ease-in 0.3s; 125 | color: white; 126 | } 127 | -------------------------------------------------------------------------------- /Day-24_Project-01_Weather_App/01. Weather App Project/README.md: -------------------------------------------------------------------------------- 1 | # Day-24 : Project 1 Weather App 🍵❤️‍🔥 2 | 3 | ## Tasks | Activities 🌟 4 | 5 | _**Activity 1: Setting Up the Project**_ 6 | 7 | - **Task 1:** Initialize a new project directory and set up the basic HTML structure for the weather app. 8 | 9 | - **Task 2:** Add a basic CSS file to style the weather app, including a container for displaying weather information. 10 | 11 |
12 | 13 | _**Activity 2: Fetching Weather Data**_ 14 | 15 | - **Task 3:** Use the fetch API to get current weather data from a public weather API (e.g., OpenWeatherMap). Log the response data to the console. 16 | 17 | - **Task 4:** Parse the weather data and display the current temperature, weather condition, and city name on the web page. 18 | 19 |
20 | 21 | _**Activity 3: Adding Search Functionality**_ 22 | 23 | - **Task 5:** Add an input field and a search button to the HTML structure. Style the input and button using CSS. 24 | 25 | - **Task 6:** Write a function to fetch and display weather data for a city entered in the search input field. Log any errors to the console. 26 | 27 |
28 | 29 | _**Activity 4: Displaying a 5-Day Forecast**_ 30 | 31 | - **Task 7:** Use the Fetch API to get a 5-day weather forecast from the public weather API. Log the response data to the console. 32 | 33 | - **Task 8:** Parse the forecast data and display the temperature and weather condition for each day in the forecast on the web page. 34 | 35 |
36 | 37 | _**Activity 5: Enhancing the UI**_ 38 | 39 | - **Task 9:** Add icons or images to represent different weather conditions (e.g., sunny, rainy, cloudy) based on the weather data. 40 | 41 | - **Task 10:** Add CSS animations or transitions to make the weather app more interactive and visually appealing. 42 | 43 |
44 | 45 | ### Feature Request 🙇‍♂️ 46 | 47 | 1. **Weather Data Fetching Script:** Write a script that fetches current weather data from a public API and displays the temperature, weather condition, and city name on the web page. 48 | 49 | 2. **Search Functionality Script:** Create a script that allows users to search for weather information by city name and displays the results. 50 | 51 | 3. **5-Day Forecast Script:** Write a script that fetches and displays a 5-day weather forecast on the web page. 52 | 53 | 4. **Ul Enhancement Script:** Create a script that adds icons for different weather conditions and includes CSS animations or transitions for a better user experience. 54 | 55 | ### Achievement 🏆 56 | 57 | By the end of these activities, you will: 58 | 59 | - Set up a basic project structure with HTML and CSS. 60 | 61 | - Use the fetch API to retrieve and display weather data from a public API. 62 | 63 | - Implement search functionality to fetch weather data for different cities. 64 | 65 | - Display a 5-day weather forecast using data from a public API. 66 | 67 | - Enhance the user interface with icons and animations to make the weather app more interactive and visually appealing. 68 | -------------------------------------------------------------------------------- /Day-25_Project-02_Movie_Search_App/Project-02 Movie Search App/.gitignore: -------------------------------------------------------------------------------- 1 | config.js -------------------------------------------------------------------------------- /Day-25_Project-02_Movie_Search_App/Project-02 Movie Search App/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Chinmay Kaitade 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Day-25_Project-02_Movie_Search_App/Project-02 Movie Search App/README.md: -------------------------------------------------------------------------------- 1 | # 🚀 **Project Highlight: Movie Search App 🍿🎬** 2 | 3 | Dive into the world of movies with our **Movie Search App**, a sleek and dynamic web application that allows users to explore and discover movie details with just a few clicks. This project is a blend of modern web technologies and user-centric design, delivering a seamless experience to movie enthusiasts. 4 | 5 | ## **Key Features & Technologies Used:** 6 | 7 | 1. **🎯 Search Functionality:** 8 | 9 | - **Technology:** JavaScript (ES6+), Fetch API 10 | - **Feature:** Users can easily search for movies by title. The app fetches real-time data from a public movie API (e.g., OMDB or The Movie Database API), displaying relevant search results instantly. 11 | 12 | 2. **📊 Movie Data Display:** 13 | 14 | - **Technology:** HTML5, CSS3 15 | - **Feature:** The app elegantly showcases movie details, including titles, posters, and release years, making it visually appealing and easy to navigate. 16 | 17 | 3. **🔍 Detailed Information View:** 18 | 19 | - **Technology:** JavaScript, Fetch API, Modal 20 | - **Feature:** A "More Info" button for each movie provides users with in-depth information, such as the plot, director, and actors. This additional content is displayed in a stylish modal or a dedicated section, enhancing the user's browsing experience. 21 | 22 | 4. **💅 Enhanced UI/UX:** 23 | - **Technology:** CSS3, Animations 24 | - **Feature:** The app is designed with a clean, modern UI. Subtle CSS animations and transitions make interactions smooth and enjoyable, creating a visually appealing and responsive user experience. 25 | 26 | ## **Why This Project Stands Out:** 27 | 28 | - **Interactive Search Experience:** The app's search functionality is robust, providing users with quick access to a vast database of movies. 29 | - **Detailed Insights:** Beyond just the basics, users can delve deeper into movie details, enriching their browsing experience. 30 | - **Aesthetically Pleasing:** The thoughtful design and smooth animations elevate the app's overall feel, making it a pleasure to use. 31 | 32 | ## 📸 Screenshots 33 | 34 | 🔗[Live Demo Link ](https://movieflex-chaicode.netlify.app/) 35 | 36 | ![Image1](./output/Image1.png) 37 | 38 | ![Image2](./output/Image2.png) 39 | 40 | ## 📄 License 41 | 42 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 43 | 44 | ## 📩 Lets Connect 45 | 46 | Chinmay'sLinkedinHandle | Chinmay'sInstagramHandle | Chinmay'sXHandle 47 | -------------------------------------------------------------------------------- /Day-25_Project-02_Movie_Search_App/Project-02 Movie Search App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | MovieFlex 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 | 19 | 20 |
21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 | 29 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /Day-25_Project-02_Movie_Search_App/Project-02 Movie Search App/output/Image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-25_Project-02_Movie_Search_App/Project-02 Movie Search App/output/Image1.png -------------------------------------------------------------------------------- /Day-25_Project-02_Movie_Search_App/Project-02 Movie Search App/output/Image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-25_Project-02_Movie_Search_App/Project-02 Movie Search App/output/Image2.png -------------------------------------------------------------------------------- /Day-25_Project-02_Movie_Search_App/README.md: -------------------------------------------------------------------------------- 1 | # Day-25 : Project 2 - Movie Search App 🍵❤️‍🔥 2 | 3 | ## Tasks | Activities 🌟 4 | 5 | _**Activity 1: Setting Up the Project**_ 6 | 7 | - **Task 1:** Initialize a new project directory and set up the basic HTML structure for the movie search app. 8 | 9 | - **Task 2:** Add a basic CS5 file to style the movie search app, including a container for displaying movie search results. 10 | 11 |
12 | 13 | _**Activity 2: Fetching Movie Data**_ 14 | 15 | - **Task 3:** Use the Fetch API to get movie data from a public movie API (e.g.. OMDB API or The Movie Database API). Log the response data to the console. 16 | 17 | - **Task 4:** Parse the movie data and display the movie title, poster, and release year on the web page. 18 | 19 |
20 | 21 | _**Activity 3: Adding Search Functionality**_ 22 | 23 | - **Task 5:** Add an input field and a search button to the HTML structure. Style the input and button using CSS. 24 | 25 | - **Task 6:** Write a function to fetch and display movie data based on a search query entered in the input field. Log any errors to the console. 26 | 27 |
28 | 29 | _**Activity 4: Displaying Detailed Movie Information**_ 30 | 31 | - **Task 7:** Modify the search results to include a More Info" button for each movie. When clicked, fetch and display additional details about the movie, such as the plot, director, and actors. 32 | 33 | - **Task 8:** Create a modal or a new section on the page to display the detailed movie information. 34 | 35 |
36 | 37 | _**Activity 5: Enhancing the UI**_ 38 | 39 | - **Task 9:** Add CSS styles to improve the layout and design of the search results and detailed movie information. 40 | 41 | - **Task 10:** Add CSS animations or transitions to make the movie search app more interactive and visually appealing. 42 | 43 |
44 | 45 | ### Feature Request 🙇‍♂️ 46 | 47 | 1. ** Movie Data Fetching Script:** Write a script that fetches movie data from a public API and displays the title, poster, and release year on the web page. 48 | 49 | 2. **Search Functionality Script:** Create a script that allows users to search for movies by title and displays the search results. 50 | 51 | 3. **Detailed Information Script:** Write a script that fetches and displays additional details about a selected movie, such as the plot, director, and actors. 52 | 53 | 4. **Ul Enhancement Script:** Create a script that improves the layout and design of the movie search app with CSS styles and animations. 54 | 55 | ### Achievement 🏆 56 | 57 | By the end of these activities, you will: 58 | 59 | - Set up a basic project structure with HTML and CSS. 60 | 61 | - Use the fetch API to retrieve and display movie data from a public API. 62 | 63 | - Implement search functionality to fetch and display movie data based on user input. 64 | 65 | - Fetch and display detailed information about selected movies. 66 | 67 | - Enhance the user interface with CSS styles and animations to make the movie search app more interactive and visually appealing. 68 | -------------------------------------------------------------------------------- /Day-26_Project-03_Chat_Application/Project-03 Chat Application/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /Day-26_Project-03_Chat_Application/Project-03 Chat Application/Chat Application.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-26_Project-03_Chat_Application/Project-03 Chat Application/Chat Application.mp4 -------------------------------------------------------------------------------- /Day-26_Project-03_Chat_Application/Project-03 Chat Application/Client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Chat App 13 | 14 | 15 |
16 |
17 |

Chat App

18 |
19 |
20 | 25 | 26 |
27 | 40 |
41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Day-26_Project-03_Chat_Application/Project-03 Chat Application/Client/script.js: -------------------------------------------------------------------------------- 1 | const loginContainer = document.getElementById('loginContainer'); 2 | const chatContainer = document.getElementById('chatContainer'); 3 | const usernameInput = document.getElementById('usernameInput'); 4 | const loginButton = document.getElementById('loginButton'); 5 | const msgList = document.getElementById('msgList'); 6 | const messageInput = document.getElementById('messageInput'); 7 | const sendButton = document.getElementById('sendButton'); 8 | 9 | let socket; 10 | let username; 11 | 12 | loginButton.addEventListener('click', login); 13 | 14 | function login() { 15 | username = usernameInput.value.trim(); 16 | if (username) { 17 | //* WebSocket connection 18 | socket = new WebSocket('ws://localhost:8080'); 19 | 20 | socket.addEventListener('open', function (event) { 21 | console.log('Connected to WebSocket server'); 22 | socket.send(JSON.stringify({ type: 'auth', username: username })); 23 | 24 | loginContainer.style.display = 'none'; 25 | chatContainer.style.display = 'block'; 26 | }); 27 | 28 | socket.addEventListener('message', function (event) { 29 | const messageData = JSON.parse(event.data); 30 | if (messageData.type === 'chat') { 31 | addMessage(messageData.username, messageData.message, false); 32 | } 33 | }); 34 | 35 | socket.addEventListener('close', function (event) { 36 | console.log('Disconnected from WebSocket server'); 37 | }); 38 | } 39 | } 40 | 41 | function addMessage(username, message, isSent) { 42 | const messageElement = document.createElement('div'); 43 | messageElement.classList.add('message'); 44 | messageElement.classList.add(isSent ? 'sent' : 'received'); 45 | messageElement.innerHTML = `${username}: ${message}`; 46 | msgList.appendChild(messageElement); 47 | msgList.scrollTop = msgList.scrollHeight; 48 | } 49 | 50 | function sendMessage() { 51 | const message = messageInput.value.trim(); 52 | if (message && socket.readyState === WebSocket.OPEN) { 53 | const messageData = { 54 | type: 'chat', 55 | message: message 56 | }; 57 | socket.send(JSON.stringify(messageData)); 58 | addMessage(username, message, true); 59 | messageInput.value = ''; 60 | } 61 | } 62 | 63 | sendButton.addEventListener('click', sendMessage); 64 | 65 | messageInput.addEventListener('keypress', (e) => { 66 | if (e.key === 'Enter') { 67 | sendMessage(); 68 | } 69 | }); -------------------------------------------------------------------------------- /Day-26_Project-03_Chat_Application/Project-03 Chat Application/Client/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: Arial, sans-serif; 11 | background-color: #e5e5e5; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | height: 100vh; 16 | } 17 | 18 | .chat-container { 19 | width: 100%; 20 | max-width: 400px; 21 | background-color: #e8f5e9; 22 | border-radius: 7px; 23 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 24 | overflow: hidden; 25 | } 26 | 27 | header { 28 | background-color: #1a1a1e; 29 | color: #fff; 30 | padding: 15px; 31 | text-align: center; 32 | } 33 | 34 | header h1 { 35 | font-size: 1.5rem; 36 | margin: 0; 37 | } 38 | 39 | .chat-messages { 40 | height: 400px; 41 | overflow-y: auto; 42 | padding: 20px; 43 | /* background-color: #f9f9f9; */ 44 | background-color: #dadada; 45 | } 46 | 47 | .input-area { 48 | display: flex; 49 | padding: 10px; 50 | background-color: #dadada; 51 | border-top: 1px solid #e0e0e0; 52 | } 53 | 54 | #messageInput { 55 | flex-grow: 1; 56 | padding: 10px; 57 | border: none; 58 | border-radius: 20px; 59 | font-size: 1rem; 60 | outline: none; 61 | transition: background-color 0.3s; 62 | /* background-color: #f2f2f2; */ 63 | background-color: #2c2c32; 64 | color: #fff; 65 | } 66 | 67 | #sendButton { 68 | background-color: #128c7e; 69 | color: #ffffff; 70 | border: none; 71 | border-radius: 50%; 72 | width: 45px; 73 | height: 45px; 74 | margin-left: 10px; 75 | cursor: pointer; 76 | transition: background-color 0.3s; 77 | } 78 | 79 | #sendButton:hover { 80 | background-color: #075e54; 81 | } 82 | 83 | .message { 84 | margin-bottom: 12px; 85 | padding: 12px; 86 | border-radius: 12px; 87 | max-width: 70%; 88 | position: relative; 89 | font-size: 0.9rem; 90 | } 91 | 92 | .sent { 93 | background-color: #dcf8c6; 94 | align-self: flex-end; 95 | margin-left: auto; 96 | } 97 | 98 | .received { 99 | background-color: #f1f1f1; 100 | align-self: flex-start; 101 | } 102 | 103 | .message strong { 104 | font-weight: 600; 105 | color: #333; 106 | margin-right: 5px; 107 | } 108 | 109 | .received strong { 110 | color: #333; 111 | } 112 | 113 | #loginContainer { 114 | display: flex; 115 | flex-direction: column; 116 | align-items: center; 117 | padding: 20px; 118 | background-color: #ffffff; 119 | border-radius: 12px; 120 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 121 | } 122 | 123 | #usernameInput { 124 | width: 100%; 125 | padding: 10px; 126 | margin-bottom: 10px; 127 | border: 1px solid #ddd; 128 | border-radius: 4px; 129 | outline: none; 130 | font-size: 1rem; 131 | } 132 | 133 | #loginButton { 134 | padding: 10px 20px; 135 | background-color: #128c7e; 136 | color: white; 137 | border: none; 138 | border-radius: 4px; 139 | cursor: pointer; 140 | font-size: 1rem; 141 | transition: background-color 0.3s; 142 | } 143 | #loginButton:hover { 144 | background-color: #075e54; 145 | } 146 | -------------------------------------------------------------------------------- /Day-26_Project-03_Chat_Application/Project-03 Chat Application/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Chinmay Kaitade 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Day-26_Project-03_Chat_Application/Project-03 Chat Application/Server/server.js: -------------------------------------------------------------------------------- 1 | const WebSocket = require("ws"); 2 | 3 | const wss = new WebSocket.Server({ port: 8080 }); 4 | 5 | const clients = new Map(); 6 | 7 | wss.on("connection", function connection(ws) { 8 | console.log("New client connected"); 9 | 10 | ws.on("message", function incoming(message) { 11 | const messageData = JSON.parse(message); 12 | console.log("Received:", messageData); 13 | 14 | if (messageData.type === "auth") { 15 | const username = messageData.username; 16 | clients.set(ws, username); 17 | console.log(`User ${username} authenticated`); 18 | } else if (messageData.type === "chat") { 19 | const username = clients.get(ws); 20 | const chatMessage = { 21 | type: "chat", 22 | username: username, 23 | message: messageData.message, 24 | }; 25 | 26 | wss.clients.forEach(function each(client) { 27 | if (client !== ws && client.readyState === WebSocket.OPEN) { 28 | client.send(JSON.stringify(chatMessage)); 29 | } 30 | }); 31 | } 32 | }); 33 | 34 | ws.on("close", function close() { 35 | const username = clients.get(ws); 36 | console.log(`User ${username} disconnected`); 37 | clients.delete(ws); 38 | }); 39 | }); 40 | 41 | console.log("WebSocket server is running on ws://localhost:8080"); 42 | -------------------------------------------------------------------------------- /Day-26_Project-03_Chat_Application/Project-03 Chat Application/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chat-app", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "chat-app", 9 | "version": "1.0.0", 10 | "license": "ISC", 11 | "dependencies": { 12 | "ws": "^8.18.0" 13 | } 14 | }, 15 | "node_modules/ws": { 16 | "version": "8.18.0", 17 | "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", 18 | "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", 19 | "license": "MIT", 20 | "engines": { 21 | "node": ">=10.0.0" 22 | }, 23 | "peerDependencies": { 24 | "bufferutil": "^4.0.1", 25 | "utf-8-validate": ">=5.0.2" 26 | }, 27 | "peerDependenciesMeta": { 28 | "bufferutil": { 29 | "optional": true 30 | }, 31 | "utf-8-validate": { 32 | "optional": true 33 | } 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /Day-26_Project-03_Chat_Application/Project-03 Chat Application/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chat-app", 3 | "version": "1.0.0", 4 | "description": "This is a basic chat app project", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "node", 11 | "npm", 12 | "ws", 13 | "websocket" 14 | ], 15 | "author": "Chinmay Kaitade", 16 | "license": "ISC", 17 | "dependencies": { 18 | "ws": "^8.18.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Day-26_Project-03_Chat_Application/Project-03 Chat Application/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: Arial, sans-serif; 11 | background-color: #e5e5e5; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | height: 100vh; 16 | } 17 | 18 | .chat-container { 19 | width: 100%; 20 | max-width: 400px; 21 | background-color: #e8f5e9; 22 | border-radius: 10px; 23 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 24 | overflow: hidden; 25 | } 26 | 27 | header { 28 | /* background-color: #075e54; */ 29 | background-color: #128c7e; 30 | color: #fff; 31 | padding: 15px; 32 | text-align: center; 33 | } 34 | 35 | header h1 { 36 | font-size: 1.5rem; 37 | margin: 0; 38 | } 39 | 40 | .chat-messages { 41 | height: 400px; 42 | overflow-y: auto; 43 | padding: 20px; 44 | background-color: #f9f9f9; 45 | } 46 | 47 | .input-area { 48 | display: flex; 49 | padding: 10px; 50 | background-color: #ffffff; 51 | border-top: 1px solid #e0e0e0; 52 | } 53 | 54 | #messageInput { 55 | flex-grow: 1; 56 | padding: 10px; 57 | border: none; 58 | border-radius: 20px; 59 | font-size: 1rem; 60 | outline: none; 61 | transition: background-color 0.3s; 62 | background-color: #f2f2f2; 63 | } 64 | 65 | #sendButton { 66 | background-color: #128c7e; 67 | color: #ffffff; 68 | border: none; 69 | border-radius: 50%; 70 | width: 45px; 71 | height: 45px; 72 | margin-left: 10px; 73 | cursor: pointer; 74 | transition: background-color 0.3s; 75 | } 76 | 77 | #sendButton:hover { 78 | background-color: #075e54; 79 | } 80 | 81 | .message { 82 | margin-bottom: 12px; 83 | padding: 12px; 84 | border-radius: 12px; 85 | max-width: 70%; 86 | position: relative; 87 | font-size: 0.9rem; 88 | } 89 | 90 | .sent { 91 | background-color: #dcf8c6; 92 | align-self: flex-end; 93 | margin-left: auto; 94 | } 95 | 96 | .received { 97 | background-color: #f1f1f1; 98 | align-self: flex-start; 99 | } 100 | 101 | .message strong { 102 | font-weight: 600; 103 | color: #333; 104 | margin-right: 5px; 105 | } 106 | 107 | .received strong { 108 | color: #333; 109 | } 110 | 111 | #loginContainer { 112 | display: flex; 113 | flex-direction: column; 114 | align-items: center; 115 | padding: 20px; 116 | background-color: #ffffff; 117 | border-radius: 12px; 118 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 119 | } 120 | 121 | #usernameInput { 122 | width: 100%; 123 | padding: 10px; 124 | margin-bottom: 10px; 125 | border: 1px solid #ddd; 126 | border-radius: 4px; 127 | outline: none; 128 | font-size: 1rem; 129 | } 130 | 131 | #loginButton { 132 | padding: 10px 20px; 133 | background-color: #128c7e; 134 | color: white; 135 | border: none; 136 | border-radius: 4px; 137 | cursor: pointer; 138 | font-size: 1rem; 139 | transition: background-color 0.3s; 140 | } 141 | #loginButton:hover { 142 | background-color: #075e54; 143 | } 144 | -------------------------------------------------------------------------------- /Day-26_Project-03_Chat_Application/README.md: -------------------------------------------------------------------------------- 1 | # Day-26 : Project 3 - Chat Application 🍵❤️‍🔥 2 | 3 | ## Tasks | Activities 🌟 4 | 5 | _**Activity 1: Setting Up the Project**_ 6 | 7 | - **Task 1:** Initialize a new project directory and set up the basic HTML structure for the chat application. 8 | 9 | - **Task 2:** Add a basic CSS file to style the chat application, including a chat window and input area. 10 | 11 |
12 | 13 | _**Activity 2: Setting Up WebSocket Server**_ 14 | 15 | - **Task 3:** Set up a simple WebSocket server using Node.js and the `ws` library, Write a script to create the server and handle connections. 16 | 17 | - **Task 4:** Test the WebSocket server by logging messages when clients connect and disconnect. 18 | 19 |
20 | 21 | _**Activity 3: Establishing WebSocket Connection**_ 22 | 23 | - **Task 5:** Add a script to the HTML file to establish a WebSocket connection to the server. 24 | 25 | - **Task 6:** Write functions to handle sending and receiving messages through the WebSocket connection. Log received messages to the console. 26 | 27 |
28 | 29 | _**Activity 4: Building the Chat Interface**_ 30 | 31 | - **Task 7:** Modify the HTML structure to include a chat window and an input area for typing messages. Style the chat window and input area using CSS. 32 | 33 | - **Task 8:** Write a function to display received messages in the chat window. Add event listeners to send messages when the user presses Enter or or clicks a send button. 34 | 35 |
36 | 37 | _**Activity 5: Enhancing the Chat Application**_ 38 | 39 | - **Task 9:** Add user authentication to the chat application. Allow users to enter a username before joining the chat. Display usernames alongside their messages in the chat window. 40 | 41 | - **Task 10:** Add CSS styles to differentiate messages sent by different users. Add CSS animations or transitions to make the chat application more interactive and visually appealing. 42 | 43 |
44 | 45 | ### Feature Request 🙇‍♂️ 46 | 47 | 1. **WebSocket Server Script :** Write a script to set up a WebSocket server using Node.js and the ws library, handling connections and logging messages. 48 | 49 | 2. **WebSocket Connection Script :** Create a script to establish a WebSocket connection from the client side and handle sending and receiving messages. 50 | 51 | 3. **Chat Interface Script :** Write a script to build the chat interface, displaying received messages and sending messages from the input area. 52 | 53 | 4. **User Authentication Script :** Create a script to add user authentication, allowing users to enter usernames and display usernames alongside their messages. 54 | 55 | 5. **Ul Enhancement Script :** Write a script to enhance the chat application's Ul with CSS styles and animations, differentiating messages from different users. 56 | 57 | ### Achievement 🏆 58 | 59 | By the end of these activities, you will: 60 | 61 | - Set up a basic project structure with HTML and CSS. 62 | 63 | - Create a WebSocket server using Node.js and the us library Establish a WebSocket connection from the client side to send and receive messages. 64 | 65 | - Build a chat interface to display and send messages. 66 | 67 | - Add user authentication and display usernames in the chat. 68 | 69 | - Enhance the user interface with CSS styles and animations to make the chat application more interactive and visually appealing. 70 | -------------------------------------------------------------------------------- /Day-27_Project-04_Task_Management_App/Project-04 Task Management App/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Chinmay Kaitade 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Day-27_Project-04_Task_Management_App/Project-04 Task Management App/README.md: -------------------------------------------------------------------------------- 1 | # 📝 Task Management App 2 | 3 | ## Overview 4 | 5 | The **Task Management App** is your go-to tool for keeping track of daily tasks. With features like task creation, editing, updating, and deletion, this app ensures you stay organized and on top of your game! Built with HTML, CSS, and JavaScript, it's lightweight, efficient, and super easy to use. 🎯 6 | 7 | ## ✨ Features 8 | 9 | - **➕ Task Creation**: Easily add new tasks with details like title, description, and due date. 10 | - **📋 Task Display**: View your tasks in a well-organized list with all the essential details. 11 | - **✏️ Task Editing**: Update any task's details with just a click. 12 | - **❌ Task Deletion**: Safely delete tasks with a confirmation prompt to prevent accidents. 13 | - **🎨 User-Friendly Interface**: Enjoy a clean, visually appealing design that enhances your experience. 14 | 15 | ## 💻 Technologies Used 16 | 17 | - **HTML**: Structuring the app’s content. 18 | - **CSS**: Styling the app to make it visually appealing. 19 | - **JavaScript**: Handling all the app’s functionalities, including task creation, reading, updating, and deletion. 20 | 21 | ## 🚀 Usage 22 | 23 | ### 1. Setting Up the Project 24 | 25 | 1. 📂 Clone this repository to your local machine. 26 | 2. 🌐 Open the project directory and launch `index.html` in your browser. 27 | 28 | ### 2. Adding a New Task 29 | 30 | 1. 📝 Fill in the task details (title, description, due date) in the form provided. 31 | 2. ➕ Click the **Add Task** button to create and display the task in the list. 32 | 33 | ### 3. Editing a Task 34 | 35 | 1. ✏️ Click the **Edit** button next to the task you want to edit. 36 | 2. 🛠 Modify the task details in the form. 37 | 3. 💾 Click **Update Task** to save changes and refresh the list. 38 | 39 | ### 4. Deleting a Task 40 | 41 | 1. ❌ Click the **Delete** button next to the task you want to remove. 42 | 2. ⚠️ Confirm the deletion in the dialog to permanently delete the task. 43 | 44 | ## 📸 Screenshots 45 | 46 | 🔗[Live Demo Link](https://task-management-app-chaicode.netlify.app/) 47 | 48 | ![task-management-app-image1](output/Image1.png) 49 | 50 | ![task-management-app-image2](output/Image2.png) 51 | 52 | ## 🎯 Conclusion 53 | 54 | Stay organized and on top of your tasks with this simple, intuitive app. Its clean design and powerful features make task management a breeze. 💪 55 | 56 | ## 🤝 Contributing 57 | 58 | Feel free to fork this repository and contribute by submitting a pull request. For any issues, please open a ticket. 59 | 60 | ## 📄 License 61 | 62 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 63 | 64 | ## 📩 Lets Connect 65 | 66 | Chinmay'sLinkedinHandle | Chinmay'sInstagramHandle | Chinmay'sXHandle 67 | -------------------------------------------------------------------------------- /Day-27_Project-04_Task_Management_App/Project-04 Task Management App/favicon-todo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-27_Project-04_Task_Management_App/Project-04 Task Management App/favicon-todo.png -------------------------------------------------------------------------------- /Day-27_Project-04_Task_Management_App/Project-04 Task Management App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Task Management App 13 | 14 | 15 | 16 |
17 |

Task Management App

18 |
19 | 20 |
21 |
22 |
23 |
24 |
25 | 26 | 32 |
33 | 34 |
35 | 36 | 41 |
42 | 43 |
44 | 45 | 46 |
47 | 48 | 49 |
50 |
51 | 52 |
53 |

Tasks

54 |
55 | 56 |
57 |
58 |
59 |
60 | 61 |

62 | Copyrights © ChinmayKaitade | All Rights Reserved. 63 |

64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /Day-27_Project-04_Task_Management_App/Project-04 Task Management App/output/Image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-27_Project-04_Task_Management_App/Project-04 Task Management App/output/Image1.png -------------------------------------------------------------------------------- /Day-27_Project-04_Task_Management_App/Project-04 Task Management App/output/Image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-27_Project-04_Task_Management_App/Project-04 Task Management App/output/Image2.png -------------------------------------------------------------------------------- /Day-27_Project-04_Task_Management_App/README.md: -------------------------------------------------------------------------------- 1 | # Day-27 : Project 4 - Task Management App 🍵❤️‍🔥 2 | 3 | ## Tasks | Activities 🌟 4 | 5 | _**Activity 1: Setting Up the Project**_ 6 | 7 | - **Task 1:** Initialize a new project directory and set up the basic HTML structure for the task management app. 8 | 9 | - **Task 2:** Add a basic CSS file to style the task management app, including a container for displaying tasks and a form for adding new tasks. 10 | 11 |
12 | 13 | _**Activity 2: Creating Tasks**_ 14 | 15 | - **Task 3:** Add a form to the HTML structure with fields for entering task details (e.g., title, description, due date). Style the form using CSS. 16 | 17 | - **Task 4:** Write a script to handle form submission, creating a new task object and adding it to an array of tasks. Display the new task in the task list. 18 | 19 |
20 | 21 | _**Activity 3: Reading and Displaying Tasks**_ 22 | 23 | - **Task 5:** Write a function to iterate over the array of tasks and display each task in the task list. Include task details like title, description, and due date. 24 | 25 | - **Task 6:** Style the task list using CSS to make it visually appealing. 26 | 27 |
28 | 29 | _**Activity 4: Updating Tasks**_ 30 | 31 | - **Task 7:** Add an "Edit" button to each task item in the task list. Write a function to populate the form with the task details when the "Edit" button is clicked. 32 | 33 | - **Task 8:** Write a function to update the task object in the array and refresh the task list display after editing a task. 34 | 35 |
36 | 37 | _**Activity 5: Deleting Tasks**_ 38 | 39 | - **Task 9:** Add a "Delete" button to each task item in the task list. Write a function to remove the task from the array and refresh the task list display when the "Delete" button is clicked. 40 | 41 | - **Task 10:** Add a confirmation dialog before deleting a task to prevent accidental deletions. 42 | 43 |
44 | 45 | ### Feature Request 🙇‍♂️ 46 | 47 | 1. **Task Creation Script:** Write a script to handle form submission, creating new tasks and displaying them. 48 | 49 | 2. **Task Display Script:** Create a script to display tasks from the array in the task list, including task details and styling. 50 | 51 | 3. **Task Update Script:** Write a script to handle task editing, updating the task in the array and refreshing the display. 52 | 53 | 4. **Task Deletion Script:** Create a script to handle task deletion, removing the task from the array and refreshing the display with a confirmation dialog. 54 | 55 | ### Achievement 🏆 56 | 57 | By the end of these activities, you will: 58 | 59 | - Set up a basic project structure with HTML and CSS. 60 | 61 | - Implement task creation, reading, updating, and deletion functionalities. 62 | 63 | - Handle form submission to create new tasks and display them in the task list. 64 | 65 | - Update existing tasks and refresh the display with edited task details. 66 | 67 | - Delete tasks from the list with a confirmation dialog to prevent accidental deletions. 68 | 69 | - Style the task management app to make it visually appealing and user-friendly. 70 | -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/E-Commerce Website.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/E-Commerce Website.mp4 -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Chinmay Kaitade 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/assets/Frame 560.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/assets/Frame 560.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/assets/Frame 600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/assets/Frame 600.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/assets/frame 900.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/assets/frame 900.jpg -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/checkout.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Poppins", sans-serif; 11 | background-color: #f4f4f4; 12 | } 13 | 14 | .checkout-form { 15 | max-width: 600px; 16 | margin: 2rem auto; 17 | padding: 2rem; 18 | background-color: white; 19 | border-radius: 8px; 20 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 21 | } 22 | 23 | .checkout-form h2 { 24 | margin-bottom: 1rem; 25 | } 26 | 27 | .form-group { 28 | margin-bottom: 1rem; 29 | } 30 | 31 | .form-group label { 32 | display: block; 33 | margin-bottom: 0.5rem; 34 | } 35 | 36 | .form-group input, 37 | .form-group textarea { 38 | width: 100%; 39 | padding: 0.5rem; 40 | border: 1px solid #ddd; 41 | border-radius: 4px; 42 | } 43 | 44 | .submit-btn { 45 | background-color: #2ecc71; 46 | color: white; 47 | border: none; 48 | padding: 10px 20px; 49 | margin-top: 1rem; 50 | cursor: pointer; 51 | font-size: 1.1rem; 52 | border-radius: 4px; 53 | } 54 | 55 | .submit-btn:hover { 56 | background-color: #27ae60; 57 | } 58 | 59 | #order-summary { 60 | margin-top: 1rem; 61 | padding: 1rem; 62 | background-color: #f8f8f8; 63 | border-radius: 4px; 64 | } -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/checkout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Checkout - Gadget Arena 9 | 10 | 11 | 12 | 13 |
14 |
15 |

Checkout

16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 |
34 | 35 | 36 |
37 |
38 | 39 | 40 |
41 |
42 | 43 |
44 |
45 |
46 | 47 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/checkout.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | const cart = JSON.parse(localStorage.getItem('cart')) || []; 3 | const orderSummary = document.getElementById('order-summary'); 4 | let total = 0; 5 | 6 | // Display order summary 7 | orderSummary.innerHTML = '

Order Summary

'; 8 | cart.forEach(item => { 9 | const itemTotal = item.price * item.quantity; 10 | total += itemTotal; 11 | orderSummary.innerHTML += ` 12 |

${item.name} x ${item.quantity}: ₹${itemTotal.toFixed(2)}

13 | `; 14 | }); 15 | orderSummary.innerHTML += `Total: ₹${total.toFixed(2)}`; 16 | 17 | // Handle form submission 18 | document.getElementById('checkout-form').addEventListener('submit', function(e) { 19 | e.preventDefault(); 20 | 21 | // Simulate order processing 22 | setTimeout(() => { 23 | alert('Order placed successfully! Thank you for your purchase.'); 24 | localStorage.removeItem('cart'); // Clear the cart 25 | window.location.href = 'index.html'; // Redirect to home page 26 | }, 1500); 27 | }); 28 | }); -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/output/Image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/output/Image1.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/output/Image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/output/Image2.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/output/Image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/output/Image3.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/Controller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/Controller.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/acer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/acer.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/backlit-keyboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/backlit-keyboard.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/dell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/dell.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/gaming-cpu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/gaming-cpu.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/headphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/headphone.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/hp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/hp.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/infinix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/infinix.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/iphone.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/iq7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/iq7.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/iqo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/iqo.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/mac-book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/mac-book.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/mouse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/mouse.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/one+.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/one+.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/victus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/products/victus.png -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/Project-05 E-Commerce Website/script.js: -------------------------------------------------------------------------------- 1 | let slideIndex = 1; 2 | showSlide(slideIndex); 3 | 4 | function changeSlide(n) { 5 | showSlide(slideIndex += n); 6 | } 7 | 8 | function showSlide(n) { 9 | let slides = document.getElementsByClassName('hero-slide'); 10 | let dots = document.getElementsByClassName('dot'); 11 | 12 | // Loop back to the first slide if at the end 13 | if (n > slides.length) { slideIndex = 1; } 14 | // Loop to the last slide if at the beginning 15 | if (n < 1) { slideIndex = slides.length; } 16 | 17 | // Calculate the offset for the slider 18 | let offset = -(slideIndex - 1) * 100; 19 | 20 | // Apply the offset to the slider 21 | document.querySelector('.hero-slider').style.transform = `translateX(${offset}%)`; 22 | 23 | // Remove the "active" class from all dots 24 | for (let i = 0; i < dots.length; i++) { 25 | dots[i].classList.remove("active"); 26 | } 27 | 28 | // Add the "active" class to the current dot 29 | if (dots.length > 0) { 30 | dots[slideIndex - 1].classList.add("active"); 31 | } 32 | } 33 | 34 | function createDots() { 35 | let slides = document.getElementsByClassName('hero-slide'); 36 | let dotsContainer = document.querySelector('.slider-dots'); 37 | 38 | // Create and append dots 39 | for (let i = 0; i < slides.length; i++) { 40 | let dot = document.createElement('span'); 41 | dot.className = 'dot'; 42 | dot.onclick = function() { currentSlide(i + 1); }; 43 | dotsContainer.appendChild(dot); 44 | } 45 | } 46 | 47 | function currentSlide(n) { 48 | showSlide(slideIndex = n); 49 | } 50 | 51 | // Create dots on page load 52 | createDots(); -------------------------------------------------------------------------------- /Day-28_Project-05_E-Commerce_Website/README.md: -------------------------------------------------------------------------------- 1 | # Day-28 : Project 5 - E-commerce Website 🍵❤️‍🔥 2 | 3 | ## Tasks | Activities 🌟 4 | 5 | _(No need to use database, you can use json files or just an array to simulate database)_ 6 | 7 | _**Activity 1: Setting Up the Project**_ 8 | 9 | - **Task 1:** Initialize a new project directory and set up the basic HTML structure for the e-commerce website. 10 | 11 | - **Task 2:** Add a basic CSS file to style the e-commerce website, including a product listing grid and a shopping cart section. 12 | 13 |
14 | 15 | _**Activity 2: Product Listing**_ 16 | 17 | - **Task 3:** Create a JSON file or an array of product objects with details like name, price, description, and image URL. 18 | 19 | - **Task 4:** Write a script to dynamically generate the product listing from the product data and display it on the web page. Style the product cards using CSS. 20 | 21 |
22 | 23 | _**Activity 3: Shopping Cart**_ 24 | 25 | - **Task 5:** Add an "Add to Cart" button to each product card. Write a function to handle adding products to the shopping cart. 26 | 27 | - **Task 6:** Create a shopping cart section that displays the products added to the cart, including the name, price, and quantity. Update the cart display whenever a product is added. 28 | 29 |
30 | 31 | _**Activity 4: Cart Management**_ 32 | 33 | - **Task 7:** Add functionality to to update the the quantity of products products in the cart. Write a function to handle increasing and decreasing the quantity of items. 34 | 35 | - **Task 8:** Add a "Remove" button to each item in the cart. Write a function to handle removing products from the cart and updating the display. 36 | 37 |
38 | 39 | _**Activity 5: Checkout Process**_ 40 | 41 | - **Task 9:** Create a checkout form that collects user information (e.g., name, address, payment details). Style the form using CSS. 42 | 43 | - **Task 10:** Write a function to handle form submission, simulating the checkout process. Display a confirmation message with the order details. 44 | 45 |
46 | 47 | ### Feature Request 🙇‍♂️ 48 | 49 | 1. **Product Listing Script:** Write a script to generate and display a product listing from an array of product objects or a JSON file 50 | 51 | 2. **Shopping Cart Script:** Create a script to handle adding products to the shopping cart and updating the cart display. 52 | 53 | 3. **Cart Management Script:** Write a script to handle updating the quantity of products in the cart and removing products from the cart. 54 | 55 | 4. **Checkout Process Script:** Create a script to handle the checkout process, including collecting user information and displaying a confirmation message 56 | 57 | ### Achievement 🏆 58 | 59 | By the end of these activities, you will: 60 | 61 | - Set up a basic project structure with HTML and CSS. 62 | 63 | - Dynamically generate and display a product listing from product data. 64 | 65 | - Implement a shopping cart that allows users to add products, update quantities, and remove items. 66 | 67 | - Create a checkout form to collect user information and simulate the checkout process. 68 | 69 | - Enhance the user interface with CSS styles to make the e-commerce website visually appealing and user-friendly. 70 | -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/Social Media Dashboard.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/Social Media Dashboard.mp4 -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/dashboard/dashboard.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | YourBook - Home 7 | 8 | 9 | 13 | 17 | 22 | 23 | 24 |
25 |

Welcome, Guest!

26 |
27 | 30 | 31 | 32 |
33 | 34 |
35 | 36 | 37 | 51 | 52 | 53 | 54 |
55 | 56 | 57 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | YourBook - Welcome 7 | 8 | 9 | 10 | 11 |
12 |
13 | Social Media Demo 18 |
19 |

YourBook

20 |
21 |
22 |

Welcome to the YourBook

23 | Sign Up 24 | Login 25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/loginPage/login.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | body { 4 | font-family: "Poppins", sans-serif; 5 | background-color: #f0f0f0; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | height: 100vh; 10 | margin: 0; 11 | } 12 | 13 | .auth-container { 14 | background-color: #fff; 15 | padding: 20px; 16 | border-radius: 8px; 17 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 18 | width: 300px; 19 | } 20 | 21 | h2 { 22 | text-align: center; 23 | font-size: 1.8rem; 24 | text-transform: uppercase; 25 | letter-spacing: 1.1px; 26 | color: #2c2c2c; 27 | } 28 | 29 | form { 30 | display: flex; 31 | flex-direction: column; 32 | } 33 | 34 | label { 35 | margin-bottom: 8px; 36 | } 37 | 38 | input[type="text"], 39 | input[type="password"] { 40 | padding: 8px; 41 | margin-bottom: 16px; 42 | border: 1px solid #ccc; 43 | border-radius: 4px; 44 | font-size: 14px; 45 | } 46 | 47 | button { 48 | padding: 10px 20px; 49 | background-color: #1877f2; 50 | color: white; 51 | border: none; 52 | border-radius: 4px; 53 | cursor: pointer; 54 | font-size: 14px; 55 | margin-top: 7px; 56 | } 57 | 58 | button:hover { 59 | background-color: #1655c0; 60 | } 61 | 62 | /* Styling for the signup prompt */ 63 | .signup-prompt { 64 | margin-top: 16px; /* Space between the button and the signup prompt */ 65 | } 66 | 67 | .signup-prompt p { 68 | margin: 0; 69 | font-size: 14px; 70 | text-align: center; 71 | } 72 | 73 | .signup-prompt a { 74 | color: #1655c0; /* Same color as the button */ 75 | text-decoration: none; 76 | font-weight: 600; 77 | } 78 | 79 | .signup-prompt a:hover { 80 | text-decoration: underline; 81 | } 82 | -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/loginPage/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | YourBook - Login 7 | 8 | 13 | 14 | 15 |
16 |

Login

17 |
18 | 19 | 26 | 27 | 28 | 35 | 36 | 37 |
38 |
39 |

40 | Don't have an account? Sign up 41 |

42 |
43 |
44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/loginPage/login.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | document.getElementById('loginForm').addEventListener('submit', function(e) { 3 | e.preventDefault(); 4 | 5 | let username = document.getElementById('loginUsername').value; 6 | let password = document.getElementById('loginPassword').value; 7 | 8 | let users = JSON.parse(localStorage.getItem('users')) || []; 9 | let user = users.find(user => user.username === username && user.password === password); 10 | 11 | if (user) { 12 | sessionStorage.setItem('loggedInUser', username); // Store username in sessionStorage 13 | alert('Login successful!'); 14 | window.location.href = '../dashboard/dashboard.html'; // Redirect to dashboard 15 | } else { 16 | alert('Invalid username or password. Please try again.'); 17 | } 18 | }); 19 | }); -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/output/Image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/output/Image1.png -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/output/Image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/output/Image2.png -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/output/Image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/output/Image3.png -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/signupPage/signup.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | body { 4 | font-family: "Poppins", sans-serif; 5 | background-color: #f0f0f0; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | height: 100vh; 10 | margin: 0; 11 | } 12 | 13 | h2 { 14 | text-align: center; 15 | font-size: 1.8rem; 16 | text-transform: uppercase; 17 | letter-spacing: 1.1px; 18 | color: #2c2c2c; 19 | } 20 | 21 | .auth-container { 22 | background-color: #fff; 23 | padding: 20px; 24 | border-radius: 8px; 25 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 26 | width: 300px; 27 | } 28 | 29 | form { 30 | display: flex; 31 | flex-direction: column; 32 | } 33 | 34 | label { 35 | margin-bottom: 8px; 36 | } 37 | 38 | input[type="text"], 39 | input[type="password"] { 40 | padding: 8px; 41 | margin-bottom: 16px; 42 | border: 1px solid #ccc; 43 | border-radius: 4px; 44 | font-size: 14px; 45 | } 46 | 47 | button { 48 | padding: 10px 20px; 49 | background-color: #1877f2; 50 | color: white; 51 | border: none; 52 | border-radius: 4px; 53 | cursor: pointer; 54 | font-size: 14px; 55 | margin-top: 7px; 56 | } 57 | 58 | button:hover { 59 | background-color: #1655c0; 60 | } 61 | 62 | /* Styling for the login prompt */ 63 | .login-prompt { 64 | margin-top: 16px; /* Space between the button and the login prompt */ 65 | } 66 | 67 | .login-prompt p { 68 | margin: 0; 69 | font-size: 14px; 70 | text-align: center; 71 | } 72 | 73 | .login-prompt a { 74 | color: #1655c0; /* Same color as the button */ 75 | text-decoration: none; 76 | font-weight: 600; 77 | } 78 | 79 | .login-prompt a:hover { 80 | text-decoration: underline; 81 | } 82 | -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/signupPage/signup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | YourBook - Sign Up 7 | 12 | 13 | 14 | 15 | 16 |
17 |

Sign Up

18 |
19 | 20 | 27 | 28 | 29 | 36 | 37 | 38 | 45 | 46 | 47 |
48 |
49 |

50 | Already have an account? Login 51 |

52 |
53 |
54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/signupPage/signup.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | let signupForm = document.querySelector('form[action="signupForm"]'); 3 | 4 | signupForm.addEventListener("submit", function (e) { 5 | e.preventDefault(); 6 | 7 | let username = document.getElementById('signup-username').value 8 | let password = document.getElementById('signup-password').value 9 | let confirmPass = document.getElementById('signup-confirmPass').value 10 | 11 | sessionStorage.setItem('loggedInUser', username); 12 | 13 | if (password !== confirmPass) { 14 | alert('Password do not match. Please try again!') 15 | return 16 | } 17 | 18 | let users = JSON.parse(localStorage.getItem('users')) || [] 19 | let userExists = users.some(user => user.username === username) 20 | 21 | if (userExists) { 22 | alert('Username already exits. please choose another one') 23 | } else { 24 | users.push({username:username, password: password}) 25 | localStorage.setItem('users', JSON.stringify(users)) 26 | alert('Sign up successfull!') 27 | window.location.href = '../dashboard/dashboard.html' 28 | } 29 | 30 | 31 | 32 | 33 | }); 34 | }); -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/social-media-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/Project-06 Social Media Dashboard/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Poppins", sans-serif; 11 | background: linear-gradient(135deg, #f4f4f4, #e2e2e2); 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | height: 100vh; 16 | margin: 0; 17 | } 18 | 19 | .container { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | background-color: #ffffff; 24 | border-radius: 12px; 25 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 26 | width: 80%; 27 | max-width: 1000px; 28 | height: 500px; 29 | } 30 | 31 | .image-section { 32 | flex: 1; 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | padding: 20px; 37 | } 38 | 39 | .demo-image { 40 | max-width: 100%; 41 | max-height: 100%; 42 | border-radius: 12px; 43 | } 44 | 45 | .logo-header { 46 | font-size: 2.3rem; 47 | color: #333; 48 | margin-left: 10px; 49 | letter-spacing: 1.2px; 50 | } 51 | 52 | .yourBook { 53 | color: #1655c0; 54 | font-weight: 700; 55 | } 56 | 57 | .button-section { 58 | flex: 1; 59 | padding: 20px; 60 | text-align: center; 61 | } 62 | 63 | .button-section h1 { 64 | font-size: 24px; 65 | color: #333; 66 | margin-bottom: 20px; 67 | font-weight: 600; 68 | } 69 | 70 | .btn { 71 | display: block; 72 | margin: 15px auto; 73 | padding: 12px 20px; 74 | background-color: #1877f2; 75 | color: #ffffff; 76 | text-decoration: none; 77 | border-radius: 8px; 78 | font-size: 16px; 79 | transition: background-color 0.3s ease, transform 0.3s ease; 80 | } 81 | 82 | .btn:hover { 83 | background-color: #1655c0; 84 | transform: scale(1.02); 85 | } 86 | 87 | .btn:active { 88 | background-color: #1655c0; 89 | transform: scale(0.98); 90 | } 91 | -------------------------------------------------------------------------------- /Day-29_Project-06_Social_Media_Dashboard/README.md: -------------------------------------------------------------------------------- 1 | # Day-29 : Project 6 - Social Media Dashboard 🍵❤️‍🔥 2 | 3 | ## Tasks | Activities 🌟 4 | 5 | _**Activity 1: Setting Up the Project**_ 6 | 7 | - **Task 1:** Initialize a new project directory and set up the basic HTML structure for the social media dashboard. 8 | 9 | - **Task 2:** Add a basic CSS file to style the social media dashboard, including a container of post and a form for creating new posts. 10 | 11 |
12 | 13 | _**Activity 2: User Authentication**_ 14 | 15 | - **Task 3:** Create a simple login form that collects a username and password. Style the form using CSS. 16 | 17 | - **Task 4:** Write a script to handle user login and store the logged-in user's information in localStorage or sessionStorage. 18 | 19 |
20 | 21 | _**Activity 3: Creating Posts**_ 22 | 23 | - **Task 5:** Add a form to the HTML structure with fields for entering post details (e.g. text, image). Style the form using CSS. 24 | 25 | - **Task 6:** Write a script to handle form submission, creating a new post object and adding it to an array of posts. Display the new post in the feed. 26 | 27 |
28 | 29 | _**Activity 4: Displaying Posts**_ 30 | 31 | - **Task 7:** Write a function to iterate over the array of posts and display each post in the feed. Include post details like text, image, username, and timestamp. 32 | 33 | - **Task 8:** Style the post feed using CSS to maker it visually appealing. 34 | 35 |
36 | 37 | _**Activity 5: Post Interactions**_ 38 | 39 | - **Task 9:** Add Like and Comment buttons to each post. Write functions to handle liking a post and adding comments to a post. 40 | 41 | - **Task 10:** Display the number of likes and comments for each post. Update the display when users interact with the posts. 42 | 43 |
44 | 45 | _**Activity 6: Enhancing the UI**_ 46 | 47 | - **Task 11:** Add CSS styles to differentiate posts by different users. Display the log logged-in user's posts with a distinct style. 48 | 49 | - **Task 12:** Add CSS animations on transitions to make the social media dashboard more interactive and visually appealing. 50 | 51 |
52 | 53 | ### Feature Request 🙇‍♂️ 54 | 55 | 1. **User Authentication Script:** Write a script to handle user login and store the logged-in user's information. 56 | 57 | 2. **Post Creation Script:** Create a script to handle form submission, creating new posts and displaying them in the feed. 58 | 59 | 3. **Post Display Script:** Write a script to display posts from an array of posts, including post details and styling. 60 | 61 | 4. **Post Interaction Script:** Create a script to handle liking and commenting on posts, updating the display with the number of likes and comments. 62 | 63 | 5. **Ul Enhancement Script:** Write a to script to the enhance the Ul with CS5 styles and animations, differentiating posts by different users and adding interactivity. 64 | 65 | ### Achievement 🏆 66 | 67 | By the end of these activities, you will: 68 | 69 | - Set up a basic project structure with HTML and CSS. 70 | 71 | - Implement user authentication and store user information. 72 | 73 | - Create and display posts with details like text, image, username, and timestamp. 74 | 75 | - Handle post interactions like liking and commenting, and update the display accordingly. 76 | 77 | - Enhance the user interface with CSS styles and animations to make the social media dashboard visually appealing and user-friendly. 78 | -------------------------------------------------------------------------------- /Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/README.md: -------------------------------------------------------------------------------- 1 | # 🗂️ Social Media Dashboard 🚀 2 | 3 | 4 | ## 🎯 Project Overview 5 | 6 | Welcome to the **Social Media Dashboard**! This project is a mini social media platform where users can log in, create posts, like, and comment on posts, all within a beautifully designed dashboard. 🌟 7 | 8 | ## 📌 Features 9 | 10 | - **User Authentication**: Secure login with username and password, with user sessions managed via `localStorage` or `sessionStorage`. 11 | - **Post Creation**: Users can create posts with text and images, which are then displayed in a dynamic feed. 12 | - **Post Display**: Posts are displayed in a visually appealing feed, with details like username, timestamp, and content. 13 | - **Post Interactions**: Users can like posts and add comments, with live updates on the number of likes and comments. 14 | - **UI Enhancements**: The dashboard includes CSS animations, distinct styles for different users, and a responsive layout. 15 | 16 | ## 🛠️ Technologies Used 17 | 18 | - **HTML5**: Structure and content of the social media dashboard. 19 | - **CSS3**: Styling for the dashboard, including animations and responsive design. 20 | - **JavaScript (ES6+)**: Handling user interactions, form submissions, and dynamic content updates. 21 | - **LocalStorage/SessionStorage**: Managing user sessions and storing post data. 22 | 23 | 24 | ## 🚀 Getting Started 25 | 26 | 1. **Clone the Repository**: 27 | 28 | ```bash 29 | git clone https://github.com/ChinmayKaitade/Day-30_Project-07_Social_Media_Dashboard_Extra_Features.git 30 | ``` 31 | 32 | 2. **Navigate to the Project Directory**: 33 | 34 | ```bash 35 | cd Project-07 Social Media Dashboard Extra Features 36 | ``` 37 | 38 | 3. **Open the Project**: 39 | - Open `index.html` in your preferred browser. 40 | 41 | ## 📸 Screenshots 42 | 43 | 🔗 [Live Demo Link](https://yourbook-features-chaicode.netlify.app/) 44 | 45 | ![Image1](output/Image1.png) 46 | 47 | ![Image2](output/Image2.png) 48 | 49 | ![Image3](output/Image3.png) 50 | 51 | ## 🚧 Future Scope 52 | 53 | - **User Registration**: Implement user registration with email verification. 54 | - **Profile Pages**: Add personal profile pages where users can view and edit their information. 55 | - **Advanced Post Interactions**: Add features like sharing posts, saving posts, and reporting inappropriate content. 56 | - **Dark Mode**: Include a dark mode option for better user experience during nighttime. 57 | - **Backend Integration**: Integrate a backend (e.g., Node.js, Firebase) for persistent data storage and more robust authentication. 58 | 59 | ## 💻 Contributing 60 | 61 | Contributions are welcome! Please fork this repository and submit a pull request for any enhancements or bug fixes. 62 | 63 | ## 📄 License 64 | 65 | This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. 66 | 67 | ## 🙌 Acknowledgements 68 | 69 | Special thanks to [Hitesh Choudhary](https://github.com/hiteshchoudhary) for inspiring this project through the **30 Days JavaScript Challenge**. 70 | 71 | --- 72 | 73 | Feel free to replace the placeholder links (like the image link and GitHub repository link) with your actual project details. This README template is designed to be visually appealing and informative, making it easy for others to understand and contribute to your project. 74 | -------------------------------------------------------------------------------- /Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | YourBook - Welcome 7 | 8 | 13 | 14 | 15 |
16 |
17 | Social Media Demo 22 |
23 |

YourBook

24 |
25 |
26 |

Welcome to the YourBook

27 | Sign Up 28 | Login 29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/loginPage/login.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | body { 4 | font-family: "Poppins", sans-serif; 5 | background-color: #f0f0f0; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | height: 100vh; 10 | margin: 0; 11 | } 12 | 13 | .auth-container { 14 | background-color: #fff; 15 | padding: 20px; 16 | border-radius: 8px; 17 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 18 | width: 300px; 19 | } 20 | 21 | h2 { 22 | text-align: center; 23 | font-size: 1.8rem; 24 | text-transform: uppercase; 25 | letter-spacing: 1.1px; 26 | color: #2c2c2c; 27 | } 28 | 29 | form { 30 | display: flex; 31 | flex-direction: column; 32 | } 33 | 34 | label { 35 | margin-bottom: 8px; 36 | } 37 | 38 | input[type="text"], 39 | input[type="password"] { 40 | padding: 8px; 41 | margin-bottom: 16px; 42 | border: 1px solid #ccc; 43 | border-radius: 4px; 44 | font-size: 14px; 45 | } 46 | 47 | button { 48 | padding: 10px 20px; 49 | background-color: #1877f2; 50 | color: white; 51 | border: none; 52 | border-radius: 4px; 53 | cursor: pointer; 54 | font-size: 14px; 55 | margin-top: 7px; 56 | } 57 | 58 | button:hover { 59 | background-color: #1655c0; 60 | } 61 | 62 | /* Styling for the signup prompt */ 63 | .signup-prompt { 64 | margin-top: 16px; /* Space between the button and the signup prompt */ 65 | } 66 | 67 | .signup-prompt p { 68 | margin: 0; 69 | font-size: 14px; 70 | text-align: center; 71 | } 72 | 73 | .signup-prompt a { 74 | color: #1655c0; /* Same color as the button */ 75 | text-decoration: none; 76 | font-weight: bold; 77 | } 78 | 79 | .signup-prompt a:hover { 80 | text-decoration: underline; 81 | } 82 | -------------------------------------------------------------------------------- /Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/loginPage/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | YourBook - Login 7 | 8 | 13 | 14 | 15 |
16 |

Login

17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |

28 | Don't have an account? 29 | Sign up 30 |

31 |
32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/loginPage/login.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | document.getElementById('loginForm').addEventListener('submit', function(e) { 3 | e.preventDefault(); 4 | 5 | let username = document.getElementById('loginUsername').value; 6 | let password = document.getElementById('loginPassword').value; 7 | 8 | let users = JSON.parse(localStorage.getItem('users')) || []; 9 | let user = users.find(user => user.username === username && user.password === password); 10 | 11 | if (user) { 12 | sessionStorage.setItem('loggedInUser', username); // Store username in sessionStorage 13 | sessionStorage.setItem('userEmail', user.email); // Store email in sessionStorage 14 | alert('Login successful!'); 15 | window.location.href = '../dashboard/dashboard.html'; // Redirect to dashboard 16 | } else { 17 | alert('Invalid username or password. Please try again.'); 18 | } 19 | }); 20 | }); -------------------------------------------------------------------------------- /Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/output/Image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/output/Image1.png -------------------------------------------------------------------------------- /Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/output/Image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/output/Image2.png -------------------------------------------------------------------------------- /Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/output/Image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChinmayKaitade/30Days-JavaScript-Challenge/3d6fdb9b640747cb9e86243ee0a6bbd2eff7e46e/Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/output/Image3.png -------------------------------------------------------------------------------- /Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/signupPage/signup.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | body { 4 | font-family: "Poppins", sans-serif; 5 | background-color: #f0f0f0; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | height: 100vh; 10 | margin: 0; 11 | } 12 | 13 | h2 { 14 | text-align: center; 15 | font-size: 1.8rem; 16 | text-transform: uppercase; 17 | letter-spacing: 1.1px; 18 | color: #2c2c2c; 19 | } 20 | 21 | .auth-container { 22 | background-color: #fff; 23 | padding: 20px; 24 | border-radius: 8px; 25 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 26 | width: 300px; 27 | } 28 | 29 | form { 30 | display: flex; 31 | flex-direction: column; 32 | } 33 | 34 | label { 35 | margin-bottom: 8px; 36 | } 37 | 38 | input[type="text"], 39 | input[type="password"], 40 | input[type="email"] { 41 | padding: 8px; 42 | margin-bottom: 16px; 43 | border: 1px solid #ccc; 44 | border-radius: 4px; 45 | font-size: 14px; 46 | } 47 | 48 | button { 49 | padding: 10px 20px; 50 | background-color: #1877f2; 51 | color: white; 52 | border: none; 53 | border-radius: 4px; 54 | cursor: pointer; 55 | font-size: 14px; 56 | margin-top: 7px; 57 | } 58 | 59 | button:hover { 60 | background-color: #1655c0; 61 | } 62 | 63 | /* Styling for the login prompt */ 64 | .login-prompt { 65 | margin-top: 16px; /* Space between the button and the login prompt */ 66 | } 67 | 68 | .login-prompt p { 69 | margin: 0; 70 | font-size: 14px; 71 | text-align: center; 72 | } 73 | 74 | .login-prompt a { 75 | color: #1655c0; /* Same color as the button */ 76 | text-decoration: none; 77 | font-weight: 600; 78 | } 79 | 80 | .login-prompt a:hover { 81 | text-decoration: underline; 82 | } 83 | -------------------------------------------------------------------------------- /Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/signupPage/signup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | YourBook - Sign Up 7 | 12 | 13 | 14 | 15 | 16 |
17 |

Sign Up

18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 36 | 37 | 38 |
39 |
40 |

41 | Already have an account? Login 42 |

43 |
44 |
45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/signupPage/signup.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | let signupForm = document.querySelector('form[action="signupForm"]'); 3 | 4 | signupForm.addEventListener("submit", function (e) { 5 | e.preventDefault(); 6 | 7 | let username = document.getElementById('signup-username').value; 8 | let password = document.getElementById('signup-password').value; 9 | let confirmPass = document.getElementById('signup-confirmPass').value; 10 | let email = document.getElementById('signup-email').value; 11 | 12 | sessionStorage.setItem('loggedInUser', username); 13 | sessionStorage.setItem('userEmail', email); // Store email in sessionStorage 14 | 15 | if (password !== confirmPass) { 16 | alert('Passwords do not match. Please try again!'); 17 | return; 18 | } 19 | 20 | let users = JSON.parse(localStorage.getItem('users')) || []; 21 | let userExists = users.some(user => user.username === username); 22 | 23 | if (userExists) { 24 | alert('Username already exists. Please choose another one'); 25 | } else { 26 | users.push({ username: username, password: password, email: email }); // Store email 27 | localStorage.setItem('users', JSON.stringify(users)); 28 | alert('Sign up successful!'); 29 | window.location.href = '../dashboard/dashboard.html'; 30 | } 31 | }); 32 | }); -------------------------------------------------------------------------------- /Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/social-media-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day-30_Project-07_Social_Media_Dashboard_Extra_Features/Project-07 Social Media Dashboard Extra Features/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Poppins", sans-serif; 11 | background: linear-gradient(135deg, #f4f4f4, #e2e2e2); 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | height: 100vh; 16 | margin: 0; 17 | } 18 | 19 | .container { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | background-color: #ffffff; 24 | border-radius: 12px; 25 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 26 | width: 80%; 27 | max-width: 1000px; 28 | height: 500px; 29 | } 30 | 31 | .image-section { 32 | flex: 1; 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | padding: 20px; 37 | } 38 | 39 | .demo-image { 40 | max-width: 100%; 41 | max-height: 100%; 42 | border-radius: 12px; 43 | } 44 | 45 | .logo-header { 46 | font-size: 2.3rem; 47 | color: #333; 48 | margin-left: 10px; 49 | letter-spacing: 1.2px; 50 | } 51 | 52 | .yourBook { 53 | color: #1655c0; 54 | } 55 | 56 | .button-section { 57 | flex: 1; 58 | padding: 20px; 59 | text-align: center; 60 | } 61 | 62 | .button-section h1 { 63 | font-size: 24px; 64 | color: #333; 65 | margin-bottom: 20px; 66 | font-weight: 600; 67 | } 68 | 69 | .btn { 70 | display: block; 71 | margin: 15px 20px; 72 | padding: 12px 20px; 73 | background-color: #1877f2; 74 | color: #ffffff; 75 | text-decoration: none; 76 | border-radius: 8px; 77 | font-size: 16px; 78 | transition: background-color 0.3s ease, transform 0.3s ease; 79 | } 80 | 81 | .btn:hover { 82 | background-color: #1655c0; 83 | transform: scale(1.02); 84 | } 85 | 86 | .btn:active { 87 | background-color: #1655c0; 88 | transform: scale(0.98); 89 | } 90 | 91 | @media screen and (max-width: 768px) { 92 | .container { 93 | flex-direction: column; 94 | height: auto; 95 | width: 60%; 96 | } 97 | 98 | .image-section, 99 | .button-section { 100 | flex: none; 101 | width: 60%; 102 | } 103 | 104 | .button-section h1 { 105 | font-size: 20px; 106 | } 107 | 108 | .btn { 109 | display: block; 110 | margin: 15px auto; 111 | } 112 | } 113 | 114 | @media screen and (max-width: 480px) { 115 | body { 116 | padding: 10px; 117 | } 118 | 119 | .container { 120 | padding: 10px; 121 | width: 100%; 122 | } 123 | 124 | .button-section h1 { 125 | font-size: 14px; 126 | } 127 | 128 | .btn { 129 | font-size: 14px; 130 | padding: 10px 15px; 131 | } 132 | } 133 | 134 | @media screen and (max-width: 320px) { 135 | .container { 136 | padding: 10px; 137 | width: 100%; 138 | } 139 | 140 | .button-section h1 { 141 | font-size: 14px; 142 | } 143 | 144 | .btn { 145 | font-size: 12px; 146 | padding: 8px 18px; 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Chinmay Kaitade 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | --------------------------------------------------------------------------------