{"id":19450580,"url":"https://github.com/subhranil002/30-Days-JS-Challenge-ChaiCode","last_synced_at":"2025-09-14T05:31:12.030Z","repository":{"id":248231960,"uuid":"828111675","full_name":"subhranil002/30-Days-JS-Challenge-ChaiCode","owner":"subhranil002","description":"Welcome to my 30 Days JS Challenge repository! This repo documents my daily tasks, and learning notes as I progress through. Follow along to see my journey and growth in mastering JavaScript.","archived":false,"fork":false,"pushed_at":"2024-08-11T19:50:56.000Z","size":196,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T09:24:28.219Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://courses.chaicode.com/learn/batch/30-days-of-Javascript-challenge","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/subhranil002.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-13T06:41:53.000Z","updated_at":"2025-01-14T17:27:41.000Z","dependencies_parsed_at":"2024-08-11T20:57:19.773Z","dependency_job_id":null,"html_url":"https://github.com/subhranil002/30-Days-JS-Challenge-ChaiCode","commit_stats":null,"previous_names":["subhranil002/30-days-js-challenge","subhranil002/30-days-js-challenge-chaicode"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/subhranil002/30-Days-JS-Challenge-ChaiCode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subhranil002%2F30-Days-JS-Challenge-ChaiCode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subhranil002%2F30-Days-JS-Challenge-ChaiCode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subhranil002%2F30-Days-JS-Challenge-ChaiCode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subhranil002%2F30-Days-JS-Challenge-ChaiCode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/subhranil002","download_url":"https://codeload.github.com/subhranil002/30-Days-JS-Challenge-ChaiCode/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subhranil002%2F30-Days-JS-Challenge-ChaiCode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275063184,"owners_count":25398931,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-14T02:00:10.474Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T16:38:18.632Z","updated_at":"2025-09-14T05:31:11.715Z","avatar_url":"https://github.com/subhranil002.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# My 30 Days JavaScript Challenge\r\n\r\nWelcome to my journey through the **30 Days JavaScript Challenge**! This README will document my progress, including daily tasks.\r\n\r\n## Table of Contents\r\n\r\n- [My 30 Days JavaScript Challenge](#my-30-days-javascript-challenge)\r\n  - [Table of Contents](#table-of-contents)\r\n  - [Overview](#overview)\r\n  - [Progress](#progress)\r\n  - [Daily Tasks](#daily-tasks)\r\n    - [Day 1: Variables and Data Types](#day-1-variables-and-data-types)\r\n    - [Day 2: Operators](#day-2-operators)\r\n    - [Day 3: Control Structures](#day-3-control-structures)\r\n    - [Day 4: Loops](#day-4-loops)\r\n    - [Day 5: Functions](#day-5-functions)\r\n    - [Day 6: Arrays](#day-6-arrays)\r\n    - [Day 7: Objects](#day-7-objects)\r\n    - [Day 8: ES6+ Features](#day-8-es6-features)\r\n    - [Day 9: DOM Manipulation](#day-9-dom-manipulation)\r\n    - [Day 10: Event Handling](#day-10-event-handling)\r\n    - [Day 11: Promises and Async/Await](#day-11-promises-and-asyncawait)\r\n    - [Day 12: Error Handling](#day-12-error-handling)\r\n    - [Day 13: Modules](#day-13-modules)\r\n    - [Day 14: Classes](#day-14-classes)\r\n    - [Day 15: Closures](#day-15-closures)\r\n    - [Day 16: Recursion](#day-16-recursion)\r\n    - [Day 17: Data Structures](#day-17-data-structures)\r\n    - [Day 18: Algorithms](#day-18-algorithms)\r\n    - [Day 19: Regular Expressions](#day-19-regular-expressions)\r\n    - [Day 20: LocalStorage and SessionStorage](#day-20-localstorage-and-sessionstorage)\r\n    - [Day 21: LeetCode Easy](#day-21-leetcode-easy)\r\n    - [Day 22: LeetCode Medium](#day-22-leetcode-medium)\r\n    - [Day 23: LeetCode Hard](#day-23-leetcode-hard)\r\n    - [Day 24: Project 1 - Weather App](#day-24-project-1---weather-app)\r\n    - [Day 25: Project 2 - Movie Search App](#day-25-project-2---movie-search-app)\r\n    - [Day 26: Project 3 - Chat Application](#day-26-project-3---chat-application)\r\n    - [Day 27: Project 4 - Task Management App](#day-27-project-4---task-management-app)\r\n    - [Day 28: Project 5 - E-commerce Website](#day-28-project-5---e-commerce-website)\r\n    - [Day 29: Project 6 - Social Media Dashboard](#day-29-project-6---social-media-dashboard)\r\n    - [Day 30: Final Project - Social Media Dashboard with Full Features](#day-30-final-project---social-media-dashboard-with-full-features)\r\n  - [Resources](#resources)\r\n  - [Credits](#credits)\r\n  - [License](#license)\r\n\r\n## Overview\r\n\r\nI am participating in a 30-day challenge to enhance my JavaScript skills. Each day, I will work on specific tasks related to different JavaScript topics. This README will serve as a log of my progress and a resource for reviewing what I've learned.\r\n\r\n## Progress\r\n\r\n-   [x] **Day 1**: Variables and Data Types\r\n-   [x] **Day 2**: Operators\r\n-   [x] **Day 3**: Control Structures\r\n-   [x] **Day 4**: Loops\r\n-   [x] **Day 5**: Functions\r\n-   [x] **Day 6**: Arrays\r\n-   [x] **Day 7**: Objects\r\n-   [x] **Day 8**: ES6+ Features\r\n-   [x] **Day 9**: DOM Manipulation\r\n-   [x] **Day 10**: Event Handling\r\n-   [x] **Day 11**: Promises and Async/Await\r\n-   [x] **Day 12**: Error Handling\r\n-   [x] **Day 13**: Modules\r\n-   [x] **Day 14**: Classes\r\n-   [x] **Day 15**: Closures\r\n-   [x] **Day 16**: Recursion\r\n-   [x] **Day 17**: Data Structures\r\n-   [x] **Day 18**: Algorithms\r\n-   [x] **Day 19**: Regular Expressions\r\n-   [x] **Day 20**: Local Storage and Session Storage\r\n-   [x] **Day 21**: LeetCode Easy\r\n-   [x] **Day 22**: LeetCode Medium\r\n-   [x] **Day 23**: LeetCode Hard\r\n-   [ ] **Day 24**: Project 1 - Weather App\r\n-   [ ] **Day 25**: Project 2 - Movie Search App\r\n-   [ ] **Day 26**: Project 3 - Chat Application\r\n-   [ ] **Day 27**: Project 4 - Task Management App\r\n-   [ ] **Day 28**: Project 5 - E-commerce Website\r\n-   [ ] **Day 29**: Project 6 - Social Media Dashboard\r\n-   [ ] **Day 30**: Final Project - Social Media Dashboard with Full Features\r\n\r\n## Daily Tasks\r\n\r\n### Day 1: Variables and Data Types\r\n\r\n-   **Task 1**: Declare a variable using `var`, assign it a number, and log the value to the console.\r\n-   **Task 2**: Declare a variable using `let`, assign it a string, and log the value to the console.\r\n-   **Task 3**: Declare a variable using `const`, assign it a boolean value, and log the value to the console.\r\n-   **Task 4**: Create variables of different data types (number, string, boolean, object, array) and log each variable's type using the `typeof` operator.\r\n-   **Task 5**: Declare a variable using `let`, assign it an initial value, reassign a new value, and log both values to the console.\r\n-   **Task 6**: Try reassigning a variable declared with `const` and observe the error.\r\n\r\n### Day 2: Operators\r\n\r\n-   **Task 1**: Write a program to add two numbers and log the result to the console.\r\n-   **Task 2**: Write a program to subtract two numbers and log the result to the console.\r\n-   **Task 3**: Write a program to multiply two numbers and log the result to the console.\r\n-   **Task 4**: Write a program to divide two numbers and log the result to the console.\r\n-   **Task 5**: Write a program to find the remainder when one number is divided by another and log the result to the console.\r\n-   **Task 6**: Use the `+=` operator to add a number to a variable and log the result to the console.\r\n-   **Task 7**: Use the `-=` operator to subtract a number from a variable and log the result to the console.\r\n-   **Task 8**: Write a program to compare two numbers using `\u003e` and `\u003c` and log the result to the console.\r\n-   **Task 9**: Write a program to compare two numbers using `\u003e=` and `\u003c=` and log the result to the console.\r\n-   **Task 10**: Write a program to compare two numbers using `==` and `===` and log the result to the console.\r\n-   **Task 11**: Write a program that uses the `\u0026\u0026` operator to combine two conditions and log the result to the console.\r\n-   **Task 12**: Write a program that uses the `||` operator to combine two conditions and log the result to the console.\r\n-   **Task 13**: Write a program that uses the `!` operator to negate a condition and log the result to the console.\r\n-   **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.\r\n\r\n### Day 3: Control Structures\r\n\r\n-   **Task 1**: Write a program to check if a number is positive, negative, or zero, and log the result to the console.\r\n-   **Task 2**: Write a program to check if a person is eligible to vote (age \u003e= 18) and log the result to the console.\r\n-   **Task 3**: Write a program to find the largest of three numbers using nested if-else statements.\r\n-   **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.\r\n-   **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.\r\n-   **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.\r\n-   **Task 7**: Write a program to check if a year is a leap year using multiple conditions (divisible by 4, but not 100 unless also divisible by 400) and log the result to the console.\r\n\r\n### Day 4: Loops\r\n\r\n-   **Task 1**: Write a program to print numbers from 1 to 10 using a for loop.\r\n-   **Task 2**: Write a program to print the multiplication table of 5 using a for loop.\r\n-   **Task 3**: Write a program to calculate the sum of numbers from 1 to 10 using a while loop.\r\n-   **Task 4**: Write a program to print numbers from 10 to 1 using a while loop.\r\n-   **Task 5**: Write a program to print numbers from 1 to 5 using a do…while loop.\r\n-   **Task 6**: Write a program to calculate the factorial of a number using a do…while loop.\r\n-   **Task 7**: Write a program to print a pattern using nested for loops:\r\n    (ignore color)\r\n    ```\r\n    *\r\n    * *\r\n    * * *\r\n    * * * *\r\n    ```\r\n-   **Task 8**: Write a program to print numbers from 1 to 10, but skip the number 5 using the `continue` statement.\r\n-   **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.\r\n\r\n### Day 5: Functions\r\n\r\n-   **Task 1**: Write a function to check if a number is even or odd and log the result to the console.\r\n-   **Task 2**: Write a function to calculate the square of a number and return the result.\r\n-   **Task 3**: Write a function expression to find the maximum of two numbers and log the result to the console.\r\n-   **Task 4**: Write a function expression to concatenate two strings and return the result.\r\n-   **Task 5**: Write an arrow function to calculate the sum of two numbers and return the result.\r\n-   **Task 6**: Write an arrow function to check if a string contains a specific character and return a boolean value.\r\n-   **Task 7**: Write a function that takes two parameters and returns their product. Provide a default value for the second parameter.\r\n-   **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.\r\n-   **Task 9**: Write a higher-order function that takes a function and a number, and calls the function that many times.\r\n-   **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.\r\n\r\n### Day 6: Arrays\r\n\r\n-   **Task 1**: Create an array of numbers from 1 to 5 and log the array to the console.\r\n-   **Task 2**: Access the first and last elements of the array and log them to the console.\r\n-   **Task 3**: Use the `push` method to add a new number to the end of the array and log the updated array.\r\n-   **Task 4**: Use the `pop` method to remove the last element from the array and log the updated array.\r\n-   **Task 5**: Use the `shift` method to remove the first element from the array and log the updated array.\r\n-   **Task 6**: Use the `unshift` method to add a new number to the beginning of the array and log the updated array.\r\n-   **Task 7**: Use the `map` method to create a new array where each number is doubled and log the new array.\r\n-   **Task 8**: Use the `filter` method to create a new array with only even numbers and log the new array.\r\n-   **Task 9**: Use the `reduce` method to calculate the sum of all numbers in the array and log the result.\r\n-   **Task 10**: Use a `for` loop to iterate over the array and log each element to the console.\r\n-   **Task 11**: Use the `forEach` method to iterate over the array and log each element to the console.\r\n-   **Task 12**: Create a two-dimensional array (matrix) and log the entire array to the console.\r\n-   **Task 13**: Access and log a specific element from the two-dimensional array.\r\n\r\n### Day 7: Objects\r\n\r\n-   **Task 1:** Create an object representing a book with properties like title, author, and year, and log the object to the console.\r\n-   **Task 2:** Access and log the title and author properties of the book object.\r\n-   **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.\r\n-   **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.\r\n-   **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.\r\n-   **Task 6:** Access and log the name of the library and the titles of all the books in the library.\r\n-   **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.\r\n-   **Task 8:** Use a `for...in` loop to iterate over the properties of the book object and log each property and its value.\r\n-   **Task 9:** Use `Object.keys` and `Object.values` methods to log all the keys and values of the book object.\r\n\r\n### Day 8: ES6+ Features\r\n\r\n-   **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.\r\n-   **Task 2**: Create a multi-line string using template literals and log it to the console.\r\n-   **Task 3**: Use array destructuring to extract the first and second elements from an array of numbers and log them to the console.\r\n-   **Task 4**: Use object destructuring to extract the title and author from a book object and log them to the console.\r\n-   **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.\r\n-   **Task 6**: Use the rest operator in a function to accept an arbitrary number of arguments, sum them, and return the result.\r\n-   **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.\r\n-   **Task 8**: Use enhanced object literals to create an object with methods and properties, and log the object to the console.\r\n-   **Task 9**: Create an object with computed property names based on variables and log the object to the console.\r\n\r\n### Day 9: DOM Manipulation\r\n\r\n-   **Task 1**: Select an HTML element by its ID and change its text content.\r\n-   **Task 2**: Select an HTML element by its class and change its background color.\r\n-   **Task 3**: Create a new `div` element with some text content and append it to the body.\r\n-   **Task 4**: Create a new `li` element and add it to an existing `ul` list.\r\n-   **Task 5**: Select an HTML element and remove it from the DOM.\r\n-   **Task 6**: Remove the last child of a specific HTML element.\r\n-   **Task 7**: Select an HTML element and change one of its attributes (e.g., `src` of an `img` tag).\r\n-   **Task 8**: Add and remove a CSS class to/from an HTML element.\r\n-   **Task 9**: Add a click event listener to a button that changes the text content of a paragraph.\r\n-   **Task 10**: Add a mouseover event listener to an element that changes its border color.\r\n\r\n### Day 10: Event Handling\r\n\r\n-   **Task 1:** Add a click event listener to a button that changes the text content of a paragraph.\r\n-   **Task 2:** Add a double-click event listener to an image that toggles its visibility.\r\n-   **Task 3:** Add a mouseover event listener to an element that changes its background color.\r\n-   **Task 4:** Add a mouseout event listener to an element that resets its background color.\r\n-   **Task 5:** Add a keydown event listener to an input field that logs the key pressed to the console.\r\n-   **Task 6:** Add a keyup event listener to an input field that displays the current value in a paragraph.\r\n-   **Task 7:** Add a submit event listener to a form that prevents the default submission and logs the form data to the console.\r\n-   **Task 8:** Add a change event listener to a select dropdown that displays the selected value in a paragraph.\r\n-   **Task 9:** Add a click event listener to a list that logs the text content of the clicked list item using event delegation.\r\n-   **Task 10:** Add an event listener to a parent element that listens for events from dynamically added child elements.\r\n\r\n### Day 11: Promises and Async/Await\r\n\r\n-   **Task 1**: Create a promise that resolves with a message after a 2-second timeout and log the message to the console.\r\n-   **Task 2**: Create a promise that rejects with an error message after a 2-second timeout and handle the error using `.catch()`.\r\n-   **Task 3**: Create a sequence of promises that simulate fetching data from a server. Chain the promises to log messages in a specific order.\r\n-   **Task 4**: Write an async function that waits for a promise to resolve and then logs the resolved value.\r\n-   **Task 5**: Write an async function that handles a rejected promise using try-catch and logs the error message.\r\n-   **Task 6**: Use the `fetch` API to get data from a public API and log the response data to the console using promises.\r\n-   **Task 7**: Use the `fetch` API to get data from a public API and log the response data to the console using async/await.\r\n-   **Task 8**: Use `Promise.all` to wait for multiple promises to resolve and then log all their values.\r\n-   **Task 9**: Use `Promise.race` to log the value of the first promise that resolves among multiple promises.\r\n\r\n### Day 12: Error Handling\r\n\r\n-   **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.\r\n-   **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.\r\n-   **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.\r\n-   **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.\r\n-   **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.\r\n-   **Task 6**: Create a promise that randomly resolves or rejects. Use `.catch()` to handle the rejection and log an appropriate message to the console.\r\n-   **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.\r\n-   **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.\r\n-   **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.\r\n\r\n### Day 13: Modules\r\n\r\n-   **Task 1:** Create a module that exports a function to add two numbers. Import and use this module in another script.\r\n-   **Task 2:** Create a module that exports an object representing a person with properties and methods. Import and use this module in another script.\r\n-   **Task 3:** Create a module that exports multiple functions using named exports. Import and use these functions in another script.\r\n-   **Task 4:** Create a module that exports a single function using default export. Import and use this function in another script.\r\n-   **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.\r\n-   **Task 6:** Install a third-party module (e.g., `lodash`) using npm. Import and use a function from this module in a script.\r\n-   **Task 7:** Install a third-party module (e.g., `axios`) using npm. Import and use this module to make a network request in a script.\r\n-   **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.\r\n\r\n### Day 14: Classes\r\n\r\n-   **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.\r\n-   **Task 2**: Add a method to the `Person` class that updates the `age` property and logs the updated age.\r\n-   **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.\r\n-   **Task 4**: Override the greeting method in the `Student` class to include the student ID in the message. Log the overridden greeting message.\r\n-   **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.\r\n-   **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.\r\n-   **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.\r\n-   **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.\r\n-   **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.\r\n-   **Task 10**: Create an instance of the `Account` class and test the deposit and withdraw methods, logging the balance after each operation.\r\n\r\n### Day 15: Closures\r\n\r\n-   **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.\r\n-   **Task 2**: Create a closure that maintains a private counter. Implement functions to increment and get the current value of the counter.\r\n-   **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.\r\n-   **Task 4**: Create a closure that captures a user's name and returns a function that greets the user by name.\r\n-   **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.\r\n-   **Task 6**: Use closures to create a simple module for managing a collection of items. Implement methods to add, remove, and list items.\r\n-   **Task 7**: Write a function that memoizes the results of another function. Use a closure to store the results of previous computations.\r\n-   **Task 8**: Create a memoized version of a function that calculates the factorial of a number.\r\n\r\n### Day 16: Recursion\r\n\r\n-   **Task 1**: Write a recursive function to calculate the factorial of a number. Log the result for a few test cases.\r\n-   **Task 2**: Write a recursive function to calculate the nth Fibonacci number. Log the result for a few test cases.\r\n-   **Task 3**: Write a recursive function to find the sum of all elements in an array. Log the result for a few test cases.\r\n-   **Task 4**: Write a recursive function to find the maximum element in an array. Log the result for a few test cases.\r\n-   **Task 5**: Write a recursive function to reverse a string. Log the result for a few test cases.\r\n-   **Task 6**: Write a recursive function to check if a string is a palindrome. Log the result for a few test cases.\r\n-   **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.\r\n-   **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.\r\n-   **Task 9**: Write a recursive function to perform an in-order traversal of a binary tree. Log the nodes as they are visited.\r\n-   **Task 10**: Write a recursive function to calculate the depth of a binary tree. Log the result for a few test cases.\r\n\r\n### Day 17: Data Structures\r\n\r\n-   **Task 1**: Implement a `Node` class to represent an element in a linked list with properties `value` and `next`.\r\n-   **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.\r\n-   **Task 3**: Implement a `Stack` class with methods `push` (add element), `pop` (remove element), and `peek` (view the top element).\r\n-   **Task 4**: Use the `Stack` class to reverse a string by pushing all characters onto the stack and then popping them off.\r\n-   **Task 5**: Implement a `Queue` class with methods `enqueue` (add element), `dequeue` (remove element), and `front` (view the first element).\r\n-   **Task 6**: Use the `Queue` class to simulate a simple printer queue where print jobs are added to the queue and processed in order.\r\n-   **Task 7**: Implement a `TreeNode` class to represent a node in a binary tree with properties `value`, `left`, and `right`.\r\n-   **Task 8**: Implement a `BinaryTree` class with methods for inserting values and performing in-order traversal to display nodes.\r\n-   **Task 9**: Implement a `Graph` class with methods to add vertices, add edges, and perform a breadth-first search (BFS).\r\n-   **Task 10**: Use the `Graph` class to represent a simple network and perform BFS to find the shortest path between two nodes.\r\n\r\n### Day 18: Algorithms\r\n\r\n-   **Task 1**: Implement the bubble sort algorithm to sort an array of numbers in ascending order. Log the sorted array.\r\n-   **Task 2**: Implement the selection sort algorithm to sort an array of numbers in ascending order. Log the sorted array.\r\n-   **Task 3**: Implement the quicksort algorithm to sort an array of numbers in ascending order. Log the sorted array.\r\n-   **Task 4**: Implement the linear search algorithm to find a target value in an array. Log the index of the target value.\r\n-   **Task 5**: Implement the binary search algorithm to find a target value in a sorted array. Log the index of the target value.\r\n-   **Task 6**: Write a function to count the occurrences of each character in a string. Log the character counts.\r\n-   **Task 7**: Write a function to find the longest substring without repeating characters in a string. Log the length of the substring.\r\n-   **Task 8**: Write a function to rotate an array by `k` positions. Log the rotated array.\r\n-   **Task 9**: Write a function to merge two sorted arrays into one sorted array. Log the merged array.\r\n-   **Task 10**: (Optional) Write a function to solve the Fibonacci sequence using dynamic programming. Log the Fibonacci numbers.\r\n-   **Task 11**: (Optional) Write a function to solve the knapsack problem using dynamic programming. Log the maximum value that can be obtained.\r\n\r\n### Day 19: Regular Expressions\r\n\r\n-   **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.\r\n-   **Task 2**: Write a regular expression to match all digits in a string. Log the matches.\r\n-   **Task 3**: Write a regular expression to match all words in a string that start with a capital letter. Log the matches.\r\n-   **Task 4**: Write a regular expression to match all sequences of one or more digits in a string. Log the matches.\r\n-   **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.\r\n-   **Task 6**: Write a regular expression to capture the username and domain from an email address. Log the captures.\r\n-   **Task 7**: Write a regular expression to match a word only if it is at the beginning of a string. Log the matches.\r\n-   **Task 8**: Write a regular expression to match a word only if it is at the end of a string. Log the matches.\r\n-   **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.\r\n-   **Task 10**: Write a regular expression to validate a URL. Log whether the URL is valid.\r\n\r\n### Day 20: LocalStorage and SessionStorage\r\n\r\n-   **Task 1**: Write a script to save a string value to localStorage and retrieve it. Log the retrieved value.\r\n-   **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.\r\n-   **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.\r\n-   **Task 4**: Write a script to remove an item from localStorage. Log the localStorage content before and after removal.\r\n-   **Task 5**: Write a script to save a string value to sessionStorage and retrieve it. Log the retrieved value.\r\n-   **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.\r\n-   **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.\r\n-   **Task 8**: Write a script to remove an item from sessionStorage. Log the sessionStorage content before and after removal.\r\n-   **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.\r\n-   **Task 10**: Write a function that clears all data from both localStorage and sessionStorage. Verify that both storages are empty.\r\n\r\n### Day 21: LeetCode Easy\r\n\r\n-   **Task 1**: Solve the \"Two Sum\" problem on LeetCode.\r\n-   **Task 2**: Solve the \"Reverse Integer\" problem on LeetCode.\r\n-   **Task 3**: Solve the \"Palindrome Number\" problem on LeetCode.\r\n-   **Task 4**: Solve the \"Merge Two Sorted Lists\" problem on LeetCode.\r\n-   **Task 5**: Solve the \"Valid Parentheses\" problem on LeetCode.\r\n\r\n### Day 22: LeetCode Medium\r\n\r\n-   **Task 1**: Solve the \"Add Two Numbers\" problem on LeetCode.\r\n-   **Task 2**: Solve the \"Longest Substring Without Repeating Characters\" problem on LeetCode.\r\n-   **Task 3**: Solve the \"Container With Most Water\" problem on LeetCode.\r\n-   **Task 4**: Solve the \"3Sum\" problem on LeetCode.\r\n-   **Task 5**: Solve the \"Group Anagrams\" problem on LeetCode.\r\n\r\n### Day 23: LeetCode Hard\r\n\r\n-   **Task 1**: Solve the \"Median of Two Sorted Arrays\" problem on LeetCode.\r\n-   **Task 2**: Solve the \"Merge k Sorted Lists\" problem on LeetCode.\r\n-   **Task 3**: Solve the \"Trapping Rain Water\" problem on LeetCode.\r\n-   **Task 4**: Solve the \"N-Queens\" problem on LeetCode.\r\n-   **Task 5**: Solve the \"Word Ladder\" problem on LeetCode.\r\n\r\n### Day 24: Project 1 - Weather App\r\n\r\n- **Task 1**: Initialize a new project directory and set up the basic HTML structure for the weather app.\r\n- **Task 2**: Add a basic CSS file to style the weather app, including a container for displaying weather information.\r\n- **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.\r\n- **Task 4**: Parse the weather data and display the current temperature, weather condition, and city name on the web page.\r\n- **Task 5**: Add an input field and a search button to the HTML structure. Style the input and button using CSS.\r\n- **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.\r\n- **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.\r\n- **Task 8**: Parse the forecast data and display the temperature and weather condition for each day in the forecast on the web page.\r\n- **Task 9**: Add icons or images to represent different weather conditions (e.g., sunny, rainy, cloudy) based on the weather data.\r\n- **Task 10**: Add CSS animations or transitions to make the weather app more interactive and visually appealing.\r\n\r\n### Day 25: Project 2 - Movie Search App\r\n\r\n- **Task 1:** Initialize a new project directory and set up the basic HTML structure for the movie search app.\r\n- **Task 2:** Add a basic CSS file to style the movie search app, including a container for displaying movie search results.\r\n- **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.\r\n- **Task 4:** Parse the movie data and display the movie title, poster, and release year on the web page.\r\n- **Task 5:** Add an input field and a search button to the HTML structure. Style the input and button using CSS.\r\n- **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.\r\n- **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.\r\n- **Task 8:** Create a modal or a new section on the page to display the detailed movie information.\r\n- **Task 9:** Add CSS styles to improve the layout and design of the search results and detailed movie information.\r\n- **Task 10:** Add CSS animations or transitions to make the movie search app more interactive and visually appealing.\r\n\r\n### Day 26: Project 3 - Chat Application\r\n\r\n- **Task 1:** Initialize a new project directory and set up the basic HTML structure for the chat application.\r\n- **Task 2:** Add a basic CSS file to style the chat application, including a chat window and input area.\r\n- **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.\r\n- **Task 4:** Test the WebSocket server by logging messages when clients connect and disconnect.\r\n- **Task 5:** Add a script to the HTML file to establish a WebSocket connection to the server.\r\n- **Task 6:** Write functions to handle sending and receiving messages through the WebSocket connection. Log received messages to the console.\r\n- **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.\r\n- **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 clicks a send button.\r\n- **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.\r\n- **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.\r\n\r\n### Day 27: Project 4 - Task Management App\r\n\r\n- **Task 1:** Initialize a new project directory and set up the basic HTML structure for the task management app.\r\n- **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.\r\n- **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.\r\n- **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.\r\n- **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.\r\n- **Task 6:** Style the task list using CSS to make it visually appealing.\r\n- **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.\r\n- **Task 8:** Write a function to update the task object in the array and refresh the task list display after editing a task.\r\n- **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.\r\n- **Task 10:** Add a confirmation dialog before deleting a task to prevent accidental deletions.\r\n\r\n### Day 28: Project 5 - E-commerce Website\r\n\r\n- **Task 1:** Initialize a new project directory and set up the basic HTML structure for the e-commerce website.\r\n- **Task 2:** Add a basic CSS file to style the e-commerce website, including a product listing grid and a shopping cart section.\r\n- **Task 3:** Create a JSON file or an array of product objects with details like name, price, description, and image URL.\r\n- **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.\r\n- **Task 5:** Add an \"Add to Cart\" button to each product card. Write a function to handle adding products to the shopping cart.\r\n- **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.\r\n- **Task 7:** Add functionality to update the quantity of products in the cart. Write a function to handle increasing and decreasing the quantity of items.\r\n- **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.\r\n- **Task 9:** Create a checkout form that collects user information (e.g., name, address, payment details). Style the form using CSS.\r\n- **Task 10:** Write a function to handle form submission, simulating the checkout process. Display a confirmation message with the order details.\r\n\r\n### Day 29: Project 6 - Social Media Dashboard\r\n\r\n- **Task 1:** Initialize a new project directory and set up the basic HTML structure for the social media dashboard.\r\n- **Task 2:** Add a basic CSS file to style the social media dashboard, including a container for posts and a form for creating new posts.\r\n- **Task 3:** Create a simple login form that collects a username and password. Style the form using CSS.\r\n- **Task 4:** Write a script to handle user login and store the logged-in user's information in `localStorage` or `sessionStorage`.\r\n- **Task 5:** Add a form to the HTML structure with fields for entering post details (e.g., text, image). Style the form using CSS.\r\n- **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.\r\n- **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.\r\n- **Task 8:** Style the post feed using CSS to make it visually appealing.\r\n- **Task 9:** Add \"Like\" and \"Comment\" buttons to each post. Write functions to handle liking a post and adding comments to a post.\r\n- **Task 10:** Display the number of likes and comments for each post. Update the display when users interact with the posts.\r\n- **Task 11:** Add CSS styles to differentiate posts by different users. Display the logged-in user's posts with a distinct style.\r\n- **Task 12:** Add CSS animations or transitions to make the social media dashboard more interactive and visually appealing.\r\n\r\n### Day 30: Final Project - Social Media Dashboard with Full Features\r\n\r\n- **Task 1:** Initialize a new project directory and set up the basic HTML structure for the final project.\r\n- **Task 2:** Add a basic CSS file to style the social media dashboard, including containers for posts, a sidebar for user information, and a form for creating new posts.\r\n- **Task 3:** Create a login and registration form that collects a username, email, and password. Style the forms using CSS.\r\n- **Task 4:** Write scripts to handle user registration and login, storing user information in `localStorage` or `sessionStorage`. Include basic validation for input fields.\r\n- **Task 5:** Create a user profile page that displays the logged-in user's information, including their username, email, and a profile picture. Allow users to update their profile information.\r\n- **Task 6:** Write a script to handle updating the user profile information and saving the changes to `localStorage` or `sessionStorage`.\r\n- **Task 7:** Add a form to the HTML structure with fields for entering post details (e.g., text, image). Style the form using CSS.\r\n- **Task 8:** 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, including the username of the logged-in user.\r\n- **Task 9:** Add \"Like\" and \"Comment\" buttons to each post. Write functions to handle liking a post and adding comments to a post.\r\n- **Task 10:** Display the number of likes and comments for each post. Update the display when users interact with the posts.\r\n- **Task 11:** Implement a simple notification system that alerts users when they receive a new like or comment on their posts. Display notifications in a sidebar.\r\n- **Task 12:** Write a script to handle generating and displaying notifications based on user interactions.\r\n- **Task 13:** Add CSS styles to differentiate posts by different users. Display the logged-in user's posts with a distinct style.\r\n- **Task 14:** Add CSS animations or transitions to make the social media dashboard more interactive and visually appealing.\r\n\r\n## Resources\r\n\r\nHere are some resources that I found helpful:\r\n\r\n-   [MDN Web Docs - JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\r\n-   [Chai aur Javascript (YouTube Playlist)](https://youtube.com/playlist?list=PLu71SKxNbfoBuX3f4EOACle2y-tRC5Q37\u0026feature=shared)\r\n\r\n## Credits\r\n\r\nA big thank you to [ChaiCode.com](https://chaicode.com/) and [Hitesh Choudhary](https://github.com/hiteshchoudhary) sir for providing this wonderful challenge and resources. Their guidance and structured approach have been instrumental in my learning journey.\r\n\r\n## License\r\n\r\nThis project is licensed under the [MIT License](https://github.com/subhranil002/30-Days-JS-Challenge?tab=MIT-1-ov-file).\r\n\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\r\n\u003cp align=\"center\"\u003eMade With ❤️\u003c/p\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubhranil002%2F30-Days-JS-Challenge-ChaiCode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubhranil002%2F30-Days-JS-Challenge-ChaiCode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubhranil002%2F30-Days-JS-Challenge-ChaiCode/lists"}