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