https://github.com/subhranil002/30-days-js-challenge

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.
https://github.com/subhranil002/30-days-js-challenge

Last synced: 4 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/subhranil002/30-days-js-challenge
• Owner: subhranil002
• License: mit
• Created: 2024-07-13T06:41:53.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-08-11T19:50:56.000Z (3 months ago)
• Last Synced: 2024-08-11T20:52:43.452Z (3 months ago)
• Language: JavaScript
• Homepage: https://courses.chaicode.com/learn/batch/30-days-of-Javascript-challenge
• Size: 191 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# My 30 Days JavaScript Challenge

Welcome to my journey through the **30 Days JavaScript Challenge**! This README will document my progress, including daily tasks.

## Table of Contents

- [My 30 Days JavaScript Challenge](#my-30-days-javascript-challenge)

  - [Table of Contents](#table-of-contents)

  - [Overview](#overview)

  - [Progress](#progress)

  - [Daily Tasks](#daily-tasks)

    - [Day 1: Variables and Data Types](#day-1-variables-and-data-types)

    - [Day 2: Operators](#day-2-operators)

    - [Day 3: Control Structures](#day-3-control-structures)

    - [Day 4: Loops](#day-4-loops)

    - [Day 5: Functions](#day-5-functions)

    - [Day 6: Arrays](#day-6-arrays)

    - [Day 7: Objects](#day-7-objects)

    - [Day 8: ES6+ Features](#day-8-es6-features)

    - [Day 9: DOM Manipulation](#day-9-dom-manipulation)

    - [Day 10: Event Handling](#day-10-event-handling)

    - [Day 11: Promises and Async/Await](#day-11-promises-and-asyncawait)

    - [Day 12: Error Handling](#day-12-error-handling)

    - [Day 13: Modules](#day-13-modules)

    - [Day 14: Classes](#day-14-classes)

    - [Day 15: Closures](#day-15-closures)

    - [Day 16: Recursion](#day-16-recursion)

    - [Day 17: Data Structures](#day-17-data-structures)

    - [Day 18: Algorithms](#day-18-algorithms)

    - [Day 19: Regular Expressions](#day-19-regular-expressions)

    - [Day 20: LocalStorage and SessionStorage](#day-20-localstorage-and-sessionstorage)

    - [Day 21: LeetCode Easy](#day-21-leetcode-easy)

    - [Day 22: LeetCode Medium](#day-22-leetcode-medium)

    - [Day 23: LeetCode Hard](#day-23-leetcode-hard)

    - [Day 24: Project 1 - Weather App](#day-24-project-1---weather-app)

    - [Day 25: Project 2 - Movie Search App](#day-25-project-2---movie-search-app)

    - [Day 26: Project 3 - Chat Application](#day-26-project-3---chat-application)

    - [Day 27: Project 4 - Task Management App](#day-27-project-4---task-management-app)

    - [Day 28: Project 5 - E-commerce Website](#day-28-project-5---e-commerce-website)

    - [Day 29: Project 6 - Social Media Dashboard](#day-29-project-6---social-media-dashboard)

    - [Day 30: Final Project - Social Media Dashboard with Full Features](#day-30-final-project---social-media-dashboard-with-full-features)

  - [Resources](#resources)

  - [Credits](#credits)

  - [License](#license)

## Overview

I 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.

## Progress

-   [x] **Day 1**: Variables and Data Types

-   [x] **Day 2**: Operators

-   [x] **Day 3**: Control Structures

-   [x] **Day 4**: Loops

-   [x] **Day 5**: Functions

-   [x] **Day 6**: Arrays

-   [x] **Day 7**: Objects

-   [x] **Day 8**: ES6+ Features

-   [x] **Day 9**: DOM Manipulation

-   [x] **Day 10**: Event Handling

-   [x] **Day 11**: Promises and Async/Await

-   [x] **Day 12**: Error Handling

-   [x] **Day 13**: Modules

-   [x] **Day 14**: Classes

-   [x] **Day 15**: Closures

-   [x] **Day 16**: Recursion

-   [x] **Day 17**: Data Structures

-   [x] **Day 18**: Algorithms

-   [x] **Day 19**: Regular Expressions

-   [x] **Day 20**: Local Storage and Session Storage

-   [x] **Day 21**: LeetCode Easy

-   [x] **Day 22**: LeetCode Medium

-   [x] **Day 23**: LeetCode Hard

-   [ ] **Day 24**: Project 1 - Weather App

-   [ ] **Day 25**: Project 2 - Movie Search App

-   [ ] **Day 26**: Project 3 - Chat Application

-   [ ] **Day 27**: Project 4 - Task Management App

-   [ ] **Day 28**: Project 5 - E-commerce Website

-   [ ] **Day 29**: Project 6 - Social Media Dashboard

-   [ ] **Day 30**: Final Project - Social Media Dashboard with Full Features

## Daily Tasks

### Day 1: Variables and Data Types

-   **Task 1**: Declare a variable using `var`, assign it a number, and log the value to the console.

-   **Task 2**: Declare a variable using `let`, assign it a string, and log the value to the console.

-   **Task 3**: Declare a variable using `const`, assign it a boolean value, and log the value to the console.

-   **Task 4**: Create variables of different data types (number, string, boolean, object, array) and log each variable's type using the `typeof` operator.

-   **Task 5**: Declare a variable using `let`, assign it an initial value, reassign a new value, and log both values to the console.

-   **Task 6**: Try reassigning a variable declared with `const` and observe the error.

### Day 2: Operators

-   **Task 1**: Write a program to add two numbers and log the result to the console.

-   **Task 2**: Write a program to subtract two numbers and log the result to the console.

-   **Task 3**: Write a program to multiply two numbers and log the result to the console.

-   **Task 4**: Write a program to divide two numbers and log the result to the console.

-   **Task 5**: Write a program to find the remainder when one number is divided by another and log the result to the console.

-   **Task 6**: Use the `+=` operator to add a number to a variable and log the result to the console.

-   **Task 7**: Use the `-=` operator to subtract a number from a variable and log the result to the console.

-   **Task 8**: Write a program to compare two numbers using `>` and `<` and log the result to the console.

-   **Task 9**: Write a program to compare two numbers using `>=` and `<=` and log the result to the console.

-   **Task 10**: Write a program to compare two numbers using `==` and `===` and log the result to the console.

-   **Task 11**: Write a program that uses the `&&` operator to combine two conditions and log the result to the console.

-   **Task 12**: Write a program that uses the `||` operator to combine two conditions and log the result to the console.

-   **Task 13**: Write a program that uses the `!` operator to negate a condition and log the result to the console.

-   **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.

### Day 3: Control Structures

-   **Task 1**: Write a program to check if a number is positive, negative, or zero, and log the result to the console.

-   **Task 2**: Write a program to check if a person is eligible to vote (age >= 18) and log the result to the console.

-   **Task 3**: Write a program to find the largest of three numbers using nested if-else statements.

-   **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.

-   **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.

-   **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.

-   **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.

### Day 4: Loops

-   **Task 1**: Write a program to print numbers from 1 to 10 using a for loop.

-   **Task 2**: Write a program to print the multiplication table of 5 using a for loop.

-   **Task 3**: Write a program to calculate the sum of numbers from 1 to 10 using a while loop.

-   **Task 4**: Write a program to print numbers from 10 to 1 using a while loop.

-   **Task 5**: Write a program to print numbers from 1 to 5 using a do…while loop.

-   **Task 6**: Write a program to calculate the factorial of a number using a do…while loop.

-   **Task 7**: Write a program to print a pattern using nested for loops:

    (ignore color)

    ```

    *

    * *

    * * *

    * * * *

    ```

-   **Task 8**: Write a program to print numbers from 1 to 10, but skip the number 5 using the `continue` statement.

-   **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.

### Day 5: Functions

-   **Task 1**: Write a function to check if a number is even or odd and log the result to the console.

-   **Task 2**: Write a function to calculate the square of a number and return the result.

-   **Task 3**: Write a function expression to find the maximum of two numbers and log the result to the console.

-   **Task 4**: Write a function expression to concatenate two strings and return the result.

-   **Task 5**: Write an arrow function to calculate the sum of two numbers and return the result.

-   **Task 6**: Write an arrow function to check if a string contains a specific character and return a boolean value.

-   **Task 7**: Write a function that takes two parameters and returns their product. Provide a default value for the second parameter.

-   **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.

-   **Task 9**: Write a higher-order function that takes a function and a number, and calls the function that many times.

-   **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.

### Day 6: Arrays

-   **Task 1**: Create an array of numbers from 1 to 5 and log the array to the console.

-   **Task 2**: Access the first and last elements of the array and log them to the console.

-   **Task 3**: Use the `push` method to add a new number to the end of the array and log the updated array.

-   **Task 4**: Use the `pop` method to remove the last element from the array and log the updated array.

-   **Task 5**: Use the `shift` method to remove the first element from the array and log the updated array.

-   **Task 6**: Use the `unshift` method to add a new number to the beginning of the array and log the updated array.

-   **Task 7**: Use the `map` method to create a new array where each number is doubled and log the new array.

-   **Task 8**: Use the `filter` method to create a new array with only even numbers and log the new array.

-   **Task 9**: Use the `reduce` method to calculate the sum of all numbers in the array and log the result.

-   **Task 10**: Use a `for` loop to iterate over the array and log each element to the console.

-   **Task 11**: Use the `forEach` method to iterate over the array and log each element to the console.

-   **Task 12**: Create a two-dimensional array (matrix) and log the entire array to the console.

-   **Task 13**: Access and log a specific element from the two-dimensional array.

### Day 7: Objects

-   **Task 1:** Create an object representing a book with properties like title, author, and year, and log the object to the console.

-   **Task 2:** Access and log the title and author properties of the book object.

-   **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.

-   **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.

-   **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.

-   **Task 6:** Access and log the name of the library and the titles of all the books in the library.

-   **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.

-   **Task 8:** Use a `for...in` loop to iterate over the properties of the book object and log each property and its value.

-   **Task 9:** Use `Object.keys` and `Object.values` methods to log all the keys and values of the book object.

### Day 8: ES6+ Features

-   **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.

-   **Task 2**: Create a multi-line string using template literals and log it to the console.

-   **Task 3**: Use array destructuring to extract the first and second elements from an array of numbers and log them to the console.

-   **Task 4**: Use object destructuring to extract the title and author from a book object and log them to the console.

-   **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.

-   **Task 6**: Use the rest operator in a function to accept an arbitrary number of arguments, sum them, and return the result.

-   **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.

-   **Task 8**: Use enhanced object literals to create an object with methods and properties, and log the object to the console.

-   **Task 9**: Create an object with computed property names based on variables and log the object to the console.

### Day 9: DOM Manipulation

-   **Task 1**: Select an HTML element by its ID and change its text content.

-   **Task 2**: Select an HTML element by its class and change its background color.

-   **Task 3**: Create a new `div` element with some text content and append it to the body.

-   **Task 4**: Create a new `li` element and add it to an existing `ul` list.

-   **Task 5**: Select an HTML element and remove it from the DOM.

-   **Task 6**: Remove the last child of a specific HTML element.

-   **Task 7**: Select an HTML element and change one of its attributes (e.g., `src` of an `img` tag).

-   **Task 8**: Add and remove a CSS class to/from an HTML element.

-   **Task 9**: Add a click event listener to a button that changes the text content of a paragraph.

-   **Task 10**: Add a mouseover event listener to an element that changes its border color.

### Day 10: Event Handling

-   **Task 1:** Add a click event listener to a button that changes the text content of a paragraph.

-   **Task 2:** Add a double-click event listener to an image that toggles its visibility.

-   **Task 3:** Add a mouseover event listener to an element that changes its background color.

-   **Task 4:** Add a mouseout event listener to an element that resets its background color.

-   **Task 5:** Add a keydown event listener to an input field that logs the key pressed to the console.

-   **Task 6:** Add a keyup event listener to an input field that displays the current value in a paragraph.

-   **Task 7:** Add a submit event listener to a form that prevents the default submission and logs the form data to the console.

-   **Task 8:** Add a change event listener to a select dropdown that displays the selected value in a paragraph.

-   **Task 9:** Add a click event listener to a list that logs the text content of the clicked list item using event delegation.

-   **Task 10:** Add an event listener to a parent element that listens for events from dynamically added child elements.

### Day 11: Promises and Async/Await

-   **Task 1**: Create a promise that resolves with a message after a 2-second timeout and log the message to the console.

-   **Task 2**: Create a promise that rejects with an error message after a 2-second timeout and handle the error using `.catch()`.

-   **Task 3**: Create a sequence of promises that simulate fetching data from a server. Chain the promises to log messages in a specific order.

-   **Task 4**: Write an async function that waits for a promise to resolve and then logs the resolved value.

-   **Task 5**: Write an async function that handles a rejected promise using try-catch and logs the error message.

-   **Task 6**: Use the `fetch` API to get data from a public API and log the response data to the console using promises.

-   **Task 7**: Use the `fetch` API to get data from a public API and log the response data to the console using async/await.

-   **Task 8**: Use `Promise.all` to wait for multiple promises to resolve and then log all their values.

-   **Task 9**: Use `Promise.race` to log the value of the first promise that resolves among multiple promises.

### Day 12: Error Handling

-   **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.

-   **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.

-   **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.

-   **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.

-   **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.

-   **Task 6**: Create a promise that randomly resolves or rejects. Use `.catch()` to handle the rejection and log an appropriate message to the console.

-   **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.

-   **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.

-   **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.

### Day 13: Modules

-   **Task 1:** Create a module that exports a function to add two numbers. Import and use this module in another script.

-   **Task 2:** Create a module that exports an object representing a person with properties and methods. Import and use this module in another script.

-   **Task 3:** Create a module that exports multiple functions using named exports. Import and use these functions in another script.

-   **Task 4:** Create a module that exports a single function using default export. Import and use this function in another script.

-   **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.

-   **Task 6:** Install a third-party module (e.g., `lodash`) using npm. Import and use a function from this module in a script.

-   **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.

-   **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.

### Day 14: Classes

-   **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.

-   **Task 2**: Add a method to the `Person` class that updates the `age` property and logs the updated age.

-   **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.

-   **Task 4**: Override the greeting method in the `Student` class to include the student ID in the message. Log the overridden greeting message.

-   **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.

-   **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.

-   **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.

-   **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.

-   **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.

-   **Task 10**: Create an instance of the `Account` class and test the deposit and withdraw methods, logging the balance after each operation.

### Day 15: Closures

-   **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.

-   **Task 2**: Create a closure that maintains a private counter. Implement functions to increment and get the current value of the counter.

-   **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.

-   **Task 4**: Create a closure that captures a user's name and returns a function that greets the user by name.

-   **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.

-   **Task 6**: Use closures to create a simple module for managing a collection of items. Implement methods to add, remove, and list items.

-   **Task 7**: Write a function that memoizes the results of another function. Use a closure to store the results of previous computations.

-   **Task 8**: Create a memoized version of a function that calculates the factorial of a number.

### Day 16: Recursion

-   **Task 1**: Write a recursive function to calculate the factorial of a number. Log the result for a few test cases.

-   **Task 2**: Write a recursive function to calculate the nth Fibonacci number. Log the result for a few test cases.

-   **Task 3**: Write a recursive function to find the sum of all elements in an array. Log the result for a few test cases.

-   **Task 4**: Write a recursive function to find the maximum element in an array. Log the result for a few test cases.

-   **Task 5**: Write a recursive function to reverse a string. Log the result for a few test cases.

-   **Task 6**: Write a recursive function to check if a string is a palindrome. Log the result for a few test cases.

-   **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.

-   **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.

-   **Task 9**: Write a recursive function to perform an in-order traversal of a binary tree. Log the nodes as they are visited.

-   **Task 10**: Write a recursive function to calculate the depth of a binary tree. Log the result for a few test cases.

### Day 17: Data Structures

-   **Task 1**: Implement a `Node` class to represent an element in a linked list with properties `value` and `next`.

-   **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.

-   **Task 3**: Implement a `Stack` class with methods `push` (add element), `pop` (remove element), and `peek` (view the top element).

-   **Task 4**: Use the `Stack` class to reverse a string by pushing all characters onto the stack and then popping them off.

-   **Task 5**: Implement a `Queue` class with methods `enqueue` (add element), `dequeue` (remove element), and `front` (view the first element).

-   **Task 6**: Use the `Queue` class to simulate a simple printer queue where print jobs are added to the queue and processed in order.

-   **Task 7**: Implement a `TreeNode` class to represent a node in a binary tree with properties `value`, `left`, and `right`.

-   **Task 8**: Implement a `BinaryTree` class with methods for inserting values and performing in-order traversal to display nodes.

-   **Task 9**: Implement a `Graph` class with methods to add vertices, add edges, and perform a breadth-first search (BFS).

-   **Task 10**: Use the `Graph` class to represent a simple network and perform BFS to find the shortest path between two nodes.

### Day 18: Algorithms

-   **Task 1**: Implement the bubble sort algorithm to sort an array of numbers in ascending order. Log the sorted array.

-   **Task 2**: Implement the selection sort algorithm to sort an array of numbers in ascending order. Log the sorted array.

-   **Task 3**: Implement the quicksort algorithm to sort an array of numbers in ascending order. Log the sorted array.

-   **Task 4**: Implement the linear search algorithm to find a target value in an array. Log the index of the target value.

-   **Task 5**: Implement the binary search algorithm to find a target value in a sorted array. Log the index of the target value.

-   **Task 6**: Write a function to count the occurrences of each character in a string. Log the character counts.

-   **Task 7**: Write a function to find the longest substring without repeating characters in a string. Log the length of the substring.

-   **Task 8**: Write a function to rotate an array by `k` positions. Log the rotated array.

-   **Task 9**: Write a function to merge two sorted arrays into one sorted array. Log the merged array.

-   **Task 10**: (Optional) Write a function to solve the Fibonacci sequence using dynamic programming. Log the Fibonacci numbers.

-   **Task 11**: (Optional) Write a function to solve the knapsack problem using dynamic programming. Log the maximum value that can be obtained.

### Day 19: Regular Expressions

-   **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.

-   **Task 2**: Write a regular expression to match all digits in a string. Log the matches.

-   **Task 3**: Write a regular expression to match all words in a string that start with a capital letter. Log the matches.

-   **Task 4**: Write a regular expression to match all sequences of one or more digits in a string. Log the matches.

-   **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.

-   **Task 6**: Write a regular expression to capture the username and domain from an email address. Log the captures.

-   **Task 7**: Write a regular expression to match a word only if it is at the beginning of a string. Log the matches.

-   **Task 8**: Write a regular expression to match a word only if it is at the end of a string. Log the matches.

-   **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.

-   **Task 10**: Write a regular expression to validate a URL. Log whether the URL is valid.

### Day 20: LocalStorage and SessionStorage

-   **Task 1**: Write a script to save a string value to localStorage and retrieve it. Log the retrieved value.

-   **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.

-   **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.

-   **Task 4**: Write a script to remove an item from localStorage. Log the localStorage content before and after removal.

-   **Task 5**: Write a script to save a string value to sessionStorage and retrieve it. Log the retrieved value.

-   **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.

-   **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.

-   **Task 8**: Write a script to remove an item from sessionStorage. Log the sessionStorage content before and after removal.

-   **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.

-   **Task 10**: Write a function that clears all data from both localStorage and sessionStorage. Verify that both storages are empty.

### Day 21: LeetCode Easy

-   **Task 1**: Solve the "Two Sum" problem on LeetCode.

-   **Task 2**: Solve the "Reverse Integer" problem on LeetCode.

-   **Task 3**: Solve the "Palindrome Number" problem on LeetCode.

-   **Task 4**: Solve the "Merge Two Sorted Lists" problem on LeetCode.

-   **Task 5**: Solve the "Valid Parentheses" problem on LeetCode.

### Day 22: LeetCode Medium

-   **Task 1**: Solve the "Add Two Numbers" problem on LeetCode.

-   **Task 2**: Solve the "Longest Substring Without Repeating Characters" problem on LeetCode.

-   **Task 3**: Solve the "Container With Most Water" problem on LeetCode.

-   **Task 4**: Solve the "3Sum" problem on LeetCode.

-   **Task 5**: Solve the "Group Anagrams" problem on LeetCode.

### Day 23: LeetCode Hard

-   **Task 1**: Solve the "Median of Two Sorted Arrays" problem on LeetCode.

-   **Task 2**: Solve the "Merge k Sorted Lists" problem on LeetCode.

-   **Task 3**: Solve the "Trapping Rain Water" problem on LeetCode.

-   **Task 4**: Solve the "N-Queens" problem on LeetCode.

-   **Task 5**: Solve the "Word Ladder" problem on LeetCode.

### Day 24: Project 1 - Weather App

- **Task 1**: Initialize a new project directory and set up the basic HTML structure for the weather app.

- **Task 2**: Add a basic CSS file to style the weather app, including a container for displaying weather information.

- **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.

- **Task 4**: Parse the weather data and display the current temperature, weather condition, and city name on the web page.

- **Task 5**: Add an input field and a search button to the HTML structure. Style the input and button using CSS.

- **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.

- **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.

- **Task 8**: Parse the forecast data and display the temperature and weather condition for each day in the forecast on the web page.

- **Task 9**: Add icons or images to represent different weather conditions (e.g., sunny, rainy, cloudy) based on the weather data.

- **Task 10**: Add CSS animations or transitions to make the weather app more interactive and visually appealing.

### Day 25: Project 2 - Movie Search App

- **Task 1:** Initialize a new project directory and set up the basic HTML structure for the movie search app.

- **Task 2:** Add a basic CSS file to style the movie search app, including a container for displaying movie search results.

- **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.

- **Task 4:** Parse the movie data and display the movie title, poster, and release year on the web page.

- **Task 5:** Add an input field and a search button to the HTML structure. Style the input and button using CSS.

- **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.

- **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.

- **Task 8:** Create a modal or a new section on the page to display the detailed movie information.

- **Task 9:** Add CSS styles to improve the layout and design of the search results and detailed movie information.

- **Task 10:** Add CSS animations or transitions to make the movie search app more interactive and visually appealing.

### Day 26: Project 3 - Chat Application

- **Task 1:** Initialize a new project directory and set up the basic HTML structure for the chat application.

- **Task 2:** Add a basic CSS file to style the chat application, including a chat window and input area.

- **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.

- **Task 4:** Test the WebSocket server by logging messages when clients connect and disconnect.

- **Task 5:** Add a script to the HTML file to establish a WebSocket connection to the server.

- **Task 6:** Write functions to handle sending and receiving messages through the WebSocket connection. Log received messages to the console.

- **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.

- **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.

- **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.

- **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.

### Day 27: Project 4 - Task Management App

- **Task 1:** Initialize a new project directory and set up the basic HTML structure for the task management app.

- **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.

- **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.

- **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.

- **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.

- **Task 6:** Style the task list using CSS to make it visually appealing.

- **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.

- **Task 8:** Write a function to update the task object in the array and refresh the task list display after editing a task.

- **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.

- **Task 10:** Add a confirmation dialog before deleting a task to prevent accidental deletions.

### Day 28: Project 5 - E-commerce Website

- **Task 1:** Initialize a new project directory and set up the basic HTML structure for the e-commerce website.

- **Task 2:** Add a basic CSS file to style the e-commerce website, including a product listing grid and a shopping cart section.

- **Task 3:** Create a JSON file or an array of product objects with details like name, price, description, and image URL.

- **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.

- **Task 5:** Add an "Add to Cart" button to each product card. Write a function to handle adding products to the shopping cart.

- **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.

- **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.

- **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.

- **Task 9:** Create a checkout form that collects user information (e.g., name, address, payment details). Style the form using CSS.

- **Task 10:** Write a function to handle form submission, simulating the checkout process. Display a confirmation message with the order details.

### Day 29: Project 6 - Social Media Dashboard

- **Task 1:** Initialize a new project directory and set up the basic HTML structure for the social media dashboard.

- **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.

- **Task 3:** Create a simple login form that collects a username and password. Style the form using CSS.

- **Task 4:** Write a script to handle user login and store the logged-in user's information in `localStorage` or `sessionStorage`.

- **Task 5:** Add a form to the HTML structure with fields for entering post details (e.g., text, image). Style the form using CSS.

- **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.

- **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.

- **Task 8:** Style the post feed using CSS to make it visually appealing.

- **Task 9:** Add "Like" and "Comment" buttons to each post. Write functions to handle liking a post and adding comments to a post.

- **Task 10:** Display the number of likes and comments for each post. Update the display when users interact with the posts.

- **Task 11:** Add CSS styles to differentiate posts by different users. Display the logged-in user's posts with a distinct style.

- **Task 12:** Add CSS animations or transitions to make the social media dashboard more interactive and visually appealing.

### Day 30: Final Project - Social Media Dashboard with Full Features

- **Task 1:** Initialize a new project directory and set up the basic HTML structure for the final project.

- **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.

- **Task 3:** Create a login and registration form that collects a username, email, and password. Style the forms using CSS.

- **Task 4:** Write scripts to handle user registration and login, storing user information in `localStorage` or `sessionStorage`. Include basic validation for input fields.

- **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.

- **Task 6:** Write a script to handle updating the user profile information and saving the changes to `localStorage` or `sessionStorage`.

- **Task 7:** Add a form to the HTML structure with fields for entering post details (e.g., text, image). Style the form using CSS.

- **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.

- **Task 9:** Add "Like" and "Comment" buttons to each post. Write functions to handle liking a post and adding comments to a post.

- **Task 10:** Display the number of likes and comments for each post. Update the display when users interact with the posts.

- **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.

- **Task 12:** Write a script to handle generating and displaying notifications based on user interactions.

- **Task 13:** Add CSS styles to differentiate posts by different users. Display the logged-in user's posts with a distinct style.

- **Task 14:** Add CSS animations or transitions to make the social media dashboard more interactive and visually appealing.

## Resources

Here are some resources that I found helpful:

-   [MDN Web Docs - JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

-   [Chai aur Javascript (YouTube Playlist)](https://youtube.com/playlist?list=PLu71SKxNbfoBuX3f4EOACle2y-tRC5Q37&feature=shared)

## Credits

A 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.

## License

This project is licensed under the [MIT License](https://github.com/subhranil002/30-Days-JS-Challenge?tab=MIT-1-ov-file).






Made With ❤️