## Activities and Tasks

---

### 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 for posts and a form for creating new posts.

---

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

---

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

---

### 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 make it visually appealing.

---

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

---

### Activity 6: Enhancing the UI

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

---

## Feature Requests

- **User Authentication Script:** Write a script to handle user login and store the logged-in user's information.

- **Post Creation Script:** Create a script to handle form submission, creating new posts and displaying them in the feed.

- **Post Display Script:** Write a script to display posts from an array of posts, including post details and styling.

- **Post Interaction Script:** Create a script to handle liking and commenting on posts, updating the display with the number of likes and comments.

- **UI Enhancement Script:** Write a script to enhance the UI with CSS styles and animations, differentiating posts by different users and adding interactivity.