Added Task files for Day 26 to Day 30 projects, outlining tasks and activities for the Chat Application, Task Management App, E-commerce Website, Social Media Dashboard, and Final Project with full features.

Author: avinashyadav16

Day 26 - Project 3 - Chat Application/README.md

@@ -0,0 +1,69 @@
+# Day-26 : Project 3 - Chat Application 🍵❤️‍🔥
+
+## Tasks | Activities 🌟
+
+_**Activity 1: Setting Up the Project**_
+
+- **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.
+
+<hr/>
+
+_**Activity 2: Setting Up WebSocket Server**_
+
+- **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.
+
+<hr/>
+
+_**Activity 3: Establishing WebSocket Connection**_
+
+- **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.
+
+<hr/>
+
+_**Activity 4: Building the Chat Interface**_
+
+- **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 or clicks a send button.
+
+<hr/>
+
+_**Activity 5: Enhancing the Chat Application**_
+
+- **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.
+
+<hr/>
+
+### Feature Request 🙇‍♂️
+
+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.
+
+2. **WebSocket Connection Script :** Create a script to establish a WebSocket connection from the client side and handle sending and receiving messages.
+
+3. **Chat Interface Script :** Write a script to build the chat interface, displaying received messages and sending messages from the input area. 
+
+4. **User Authentication Script :** Create a script to add user authentication, allowing users to enter usernames and display usernames alongside their messages.
+
+5. **Ul Enhancement Script :** Write a script to enhance the chat application's Ul with CSS styles and animations, differentiating messages from different users.
+
+### Achievement 🏆
+
+By the end of these activities, you will:
+
+- Set up a basic project structure with HTML and CSS.
+
+- Create a WebSocket server using Node.js and the us library Establish a WebSocket connection from the client side to send and receive messages.
+
+- Build a chat interface to display and send messages.
+
+- Add user authentication and display usernames in the chat.
+
+- Enhance the user interface with CSS styles and animations to make the chat application more interactive and visually appealing.

Day 27 - Project 4 - Task Management App/README.md

@@ -0,0 +1,69 @@
+# Day-27 : Project 4 - Task Management App 🍵❤️‍🔥
+
+## Tasks | Activities 🌟
+
+_**Activity 1: Setting Up the Project**_
+
+- **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.
+
+<hr/>
+
+_**Activity 2: Creating 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.
+
+<hr/>
+
+_**Activity 3: Reading and Displaying Tasks**_
+
+- **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.
+
+<hr/>
+
+_**Activity 4: Updating Tasks**_
+
+- **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.
+
+<hr/>
+
+_**Activity 5: Deleting Tasks**_
+
+- **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.
+
+<hr/>
+
+### Feature Request 🙇‍♂️
+
+1. **Task Creation Script:** Write a script to handle form submission, creating new tasks and displaying them.
+
+2. **Task Display Script:** Create a script to display tasks from the array in the task list, including task details and styling.
+
+3. **Task Update Script:** Write a script to handle task editing, updating the task in the array and refreshing the display.
+
+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.
+
+### Achievement 🏆
+
+By the end of these activities, you will:
+
+- Set up a basic project structure with HTML and CSS.
+
+- Implement task creation, reading, updating, and deletion functionalities.
+
+- Handle form submission to create new tasks and display them in the task list.
+
+- Update existing tasks and refresh the display with edited task details.
+
+- Delete tasks from the list with a confirmation dialog to prevent accidental deletions.
+
+- Style the task management app to make it visually appealing and user-friendly.

Day 28 - Project 5 - E-Commerce Website/README.md

@@ -0,0 +1,69 @@
+# Day-28 : Project 5 - E-commerce Website 🍵❤️‍🔥
+
+## Tasks | Activities 🌟
+
+_(No need to use database, you can use json files or just an array to simulate database)_
+
+_**Activity 1: Setting Up the Project**_
+
+- **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.
+
+<hr/>
+
+_**Activity 2: Product Listing**_
+
+- **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.
+
+<hr/>
+
+_**Activity 3: Shopping Cart**_
+
+- **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.
+
+<hr/>
+
+_**Activity 4: Cart Management**_
+
+- **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.
+
+- **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.
+
+<hr/>
+
+_**Activity 5: Checkout Process**_
+
+- **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.
+
+<hr/>
+
+### Feature Request 🙇‍♂️
+
+1. **Product Listing Script:** Write a script to generate and display a product listing from an array of product objects or a JSON file
+
+2. **Shopping Cart Script:** Create a script to handle adding products to the shopping cart and updating the cart display.
+
+3. **Cart Management Script:** Write a script to handle updating the quantity of products in the cart and removing products from the cart.
+
+4. **Checkout Process Script:** Create a script to handle the checkout process, including collecting user information and displaying a confirmation message
+
+### Achievement 🏆
+
+By the end of these activities, you will:
+
+- Set up a basic project structure with HTML and CSS.
+
+- Dynamically generate and display a product listing from product data.
+
+- Implement a shopping cart that allows users to add products, update quantities, and remove items.
+
+- Create a checkout form to collect user information and simulate the checkout process.
+
+- Enhance the user interface with CSS styles to make the e-commerce website visually appealing and user-friendly.

Day 29 - Project 6 - Social Media Dashboard/README.md

@@ -0,0 +1,77 @@
+# Day-29 : Project 6 - Social Media Dashboard 🍵❤️‍🔥
+
+## Tasks | Activities 🌟
+
+_**Activity 1: Setting Up the Project**_
+
+- **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 of post and a form for creating new posts.
+
+<hr/>
+
+_**Activity 2: User Authentication**_
+
+- **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.
+
+<hr/>
+
+_**Activity 3: Creating Posts**_
+
+- **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.
+
+<hr/>
+
+_**Activity 4: Displaying Posts**_
+
+- **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 maker it visually appealing.
+
+<hr/>
+
+_**Activity 5: Post Interactions**_
+
+- **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.
+
+<hr/>
+
+_**Activity 6: Enhancing the UI**_
+
+- **Task 11:** Add CSS styles to differentiate posts by different users. Display the log logged-in user's posts with a distinct style.
+
+- **Task 12:** Add CSS animations on transitions to make the social media dashboard more interactive and visually appealing.
+
+<hr/>
+
+### Feature Request 🙇‍♂️
+
+1. **User Authentication Script:** Write a script to handle user login and store the logged-in user's information.
+
+2. **Post Creation Script:** Create a script to handle form submission, creating new posts and displaying them in the feed.
+
+3. **Post Display Script:** Write a script to display posts from an array of posts, including post details and styling.
+
+4. **Post Interaction Script:** Create a script to handle liking and commenting on posts, updating the display with the number of likes and comments.
+
+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.
+
+### Achievement 🏆
+
+By the end of these activities, you will:
+
+- Set up a basic project structure with HTML and CSS.
+
+- Implement user authentication and store user information.
+
+- Create and display posts with details like text, image, username, and timestamp.
+
+- Handle post interactions like liking and commenting, and update the display accordingly.
+
+- Enhance the user interface with CSS styles and animations to make the social media dashboard visually appealing and user-friendly.

Day 30 - Final Social Media Dashboard With Full Features/README.md

@@ -0,0 +1,91 @@
+# Day-30 : Project 7 - Final Project - Social Media Dashboard with Full Features 🍵❤️‍🔥
+
+## Tasks | Activities 🌟
+
+_**Activity 1: Setting Up the Project**_
+
+- **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.
+
+<hr/>
+
+_**Activity 2: User Authentication**_
+
+- **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.
+
+<hr/>
+
+_**Activity 3: User Profiles**_
+
+- **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 up the user profile information and saving the changes to localStorage or sessionStorage.
+
+<hr/>
+
+_**Activity 4: Creating and Displaying Posts**_
+
+- **Task 7:** Add a form to the HTML 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.
+
+<hr/>
+
+_**Activity 5: Post Interactions**_
+
+- **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.
+
+<hr/>
+
+_**Activity 6: Notifications**_
+
+- **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.
+
+<hr/>
+
+_**Activity 7: Enhancing the UI**_
+
+- **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.
+
+<hr/>
+
+### Feature Request 🙇‍♂️
+
+1. **User Authentication Script:** Write scripts to handle user registration and login, with basic validation and storing user information.
+
+2. **User Profile Script:** Create a script to display and update user profile information, saving changes to localStorage or sessionStorage.
+
+3. **Post Creation and Display Script:** Write a script to handle form submission for creating pos and displaying them in the feed.
+
+4. **Post Interaction Script:** Create a script to handle liking and commenting on posts, updating the display with the number of likes and comments.
+
+5. **Notification System Script:** Write a script to generate and display notifications for user interactions on posts.
+
+6. **Ul Enhancement Script:** Create a script to enhance the Ul with CS5 styles and animations, differentiating posts by different users and adding interactivity.
+
+### Achievement 🏆
+
+By the end of these activities, you will:
+
+- Set up a comprehensive project structure with HTML and CSS.
+
+- Implement user authentication, including registration and login, with input validation.
+
+- Create and update user profiles, displaying user information and allowing updates.
+
+- Handle creating and displaying posts with user-specific details.
+
+- Implement, post interactions like liking and commenting, with real-time updates.
+
+- Create a notification system to alert users of new interactions on their posts.
+
+- Enhance the user interface with CSS styles and animations to create a visually appealing and interactive social media dashboard.