Day 29: Project 6 - Social Media Dashboard
I am a passionate web developer and open-source enthusiast on a captivating journey of coding wonders. With a year of experience in web development, my curiosity led me to the enchanting world of React, where I found a true calling. Embracing the magic of collaboration and knowledge-sharing, I ventured into the realm of open source, contributing to Digital Public Goods (DPGs) for the betterment of the digital universe. A firm believer in learning in public, I share my insights and discoveries through blogging, inspiring fellow coders to embark on their own magical coding odysseys. Join me on this thrilling adventure, where imagination and technology converge, and together, let's shape the future of the digital landscape! 🎩✨
Screenshot:
Task 1: Initialize the Project
HTML: Basic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Social Media Dashboard</h1>
</header>
<main id="dashboard">
<!-- Login Form and Post Feed will go here -->
</main>
<footer>
<p>© 2024 Social Media Dashboard</p>
</footer>
</body>
</html>
Explanation:
This basic HTML structure includes a header, a main content area (where the dashboard content will be displayed), and a footer.
A CSS file
styles.cssis linked to style the dashboard.
Task 2: Basic CSS Styling
CSS: Basic Styling
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 1rem;
text-align: center;
}
main {
padding: 2rem;
max-width: 800px;
margin: 0 auto;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
position: fixed;
width: 100%;
bottom: 0;
}
.container {
background-color: white;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
Explanation:
This CSS styles the page with a clean, minimalistic design.
The body has a light background color, while the header and footer have contrasting colors.
Containers used for posts and forms will have a white background, rounded corners, and a shadow for a modern look.
Activity 2: User Authentication
Task 3: Create a Login Form
HTML: Login Form
<div class="container" id="login-container">
<h2>Login</h2>
<form id="login-form">
<label for="username">Username:</label>
<input type="text" id="username" required>
<label for="password">Password:</label>
<input type="password" id="password" required>
<button type="submit">Login</button>
</form>
</div>
Explanation:
The login form includes input fields for the username and password, along with a submit button.
The form is styled using the
.containerclass for consistency with the rest of the dashboard.
Task 4: User Login Script
JavaScript: Handling User Login
document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username && password) {
localStorage.setItem('loggedInUser', username);
document.getElementById('login-container').style.display = 'none';
document.getElementById('dashboard').style.display = 'block';
loadDashboard();
}
});
function loadDashboard() {
const loggedInUser = localStorage.getItem('loggedInUser');
if (loggedInUser) {
document.getElementById('dashboard').innerHTML = `
<h2>Welcome, ${loggedInUser}!</h2>
<!-- Post creation form and feed will go here -->
`;
}
}
Explanation:
When the form is submitted, the login information is stored in
localStorage.The login form is hidden, and the dashboard is shown, personalized with the logged-in user's name.
Activity 3: Creating Posts
Task 5: Add a Post Creation Form
HTML: Post Creation Form
<div class="container">
<h3>Create a New Post</h3>
<form id="post-form">
<textarea id="post-text" placeholder="What's on your mind?" required></textarea>
<input type="file" id="post-image">
<button type="submit">Post</button>
</form>
</div>
<div id="post-feed" class="container"></div>
Explanation:
This form allows users to create a new post by entering text and optionally uploading an image.
The
#post-feedcontainer will display the list of posts.
Task 6: Post Creation Script
JavaScript: Handling Post Creation
let posts = [];
document.getElementById('post-form').addEventListener('submit', function(event) {
event.preventDefault();
const postText = document.getElementById('post-text').value;
const postImage = document.getElementById('post-image').files[0];
const username = localStorage.getItem('loggedInUser');
const timestamp = new Date().toLocaleString();
const newPost = {
text: postText,
image: postImage ? URL.createObjectURL(postImage) : null,
username: username,
timestamp: timestamp,
likes: 0,
comments: []
};
posts.push(newPost);
document.getElementById('post-text').value = '';
document.getElementById('post-image').value = '';
displayPosts();
});
function displayPosts() {
const postFeed = document.getElementById('post-feed');
postFeed.innerHTML = '';
posts.forEach(post => {
const postElement = document.createElement('div');
postElement.classList.add('post');
postElement.innerHTML = `
<p><strong>${post.username}</strong> <span>${post.timestamp}</span></p>
<p>${post.text}</p>
${post.image ? `<img src="${post.image}" alt="Post Image">` : ''}
<p>Likes: ${post.likes} | Comments: ${post.comments.length}</p>
<button onclick="likePost(${posts.indexOf(post)})">Like</button>
<button onclick="commentOnPost(${posts.indexOf(post)})">Comment</button>
<div id="comments-${posts.indexOf(post)}"></div>
`;
postFeed.appendChild(postElement);
});
}
Explanation:
When a new post is submitted, it's added to the
postsarray and immediately displayed in the feed.The
displayPosts()function iterates through thepostsarray and updates the feed with each post's details.
Activity 4: Displaying Posts
Task 7: Post Display Script
The code for displaying posts is already included in the previous script under displayPosts().
Explanation:
- The function
displayPosts()iterates over the array of posts and creates HTML elements to display each post's content, including the username, text, image, and timestamp.
Activity 5: Post Interactions
Task 8: Handle Post Interactions
JavaScript: Like and Comment Functionality
function likePost(index) {
posts[index].likes++;
displayPosts();
}
function commentOnPost(index) {
const commentText = prompt("Enter your comment:");
if (commentText) {
posts[index].comments.push({
text: commentText,
username: localStorage.getItem('loggedInUser'),
timestamp: new Date().toLocaleString()
});
displayPosts();
}
}
Explanation:
The
likePost()function increments the like count for the selected post.The
commentOnPost()function prompts the user to enter a comment, which is then added to the post'scommentsarray and displayed.
Task 9: Update Display for Likes and Comments
The display update for likes and comments is handled within the displayPosts() function.
Explanation:
- The
displayPosts()function already includes code to display the number of likes and comments for each post, which updates dynamically whenever a post is liked or commented on.
Activity 6: Enhancing the UI
Task 10: Differentiate Posts by Users
CSS: Differentiating Posts
.post {
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
.post img {
max-width: 100%;
height: auto;
margin-top: 1rem;
}
.post strong {
color: #333;
}
.post span {
color: #777;
font-size: 0.9rem;
}
.post-owner {
background-color: #e0f7fa;
border: 1px solid #4CAF50;
}
Explanation:
- The
.post-ownerclass is applied to posts made by the logged-in user, giving them a distinct background and border color to differentiate them from other users' posts.
With these steps completed, you have a fully functional Social Media Dashboard where users can log in, create posts, like, comment, and interact with other posts. The interface is designed to be user-friendly and visually appealing.