Sample Social Media Dashboard
1. HTML 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>
<div class="dashboard">
<h1>Social Media Dashboard</h1>
<div id="posts"></div>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS Styles (styles.css)
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.dashboard {
max-width: 800px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.post {
border-bottom: 1px solid #ddd;
padding: 10px 0;
}
.post:last-child {
border-bottom: none;
}
.post h2 {
margin: 0;
font-size: 18px;
}
.post p {
margin: 5px 0;
}
.post .engagement {
color: #888;
}
3. JavaScript Logic (script.js)
const postsContainer = document.getElementById('posts');
// Mock API data
const mockApiData = [
{
id: 1,
title: "Post One",
content: "This is the content of post one.",
likes: 25,
shares: 5
},
{
id: 2,
title: "Post Two",
content: "This is the content of post two.",
likes: 15,
shares: 3
},
{
id: 3,
title: "Post Three",
content: "This is the content of post three.",
likes: 30,
shares: 10
}
];
// Function to render posts
function renderPosts(posts) {
posts.forEach(post => {
const postDiv = document.createElement('div');
postDiv.classList.add('post');
postDiv.innerHTML = `
<h2>${post.title}</h2>
<p>${post.content}</p>
<div class="engagement">
<span>${post.likes} Likes</span> |
<span>${post.shares} Shares</span>
</div>
`;
postsContainer.appendChild(postDiv);
});
}
// Simulate fetching data from an API
function fetchPosts() {
// Simulating an API call with setTimeout
setTimeout(() => {
renderPosts(mockApiData);
}, 1000);
}
// Initialize the dashboard
fetchPosts();
Explanation
- HTML: The HTML file sets up the structure for the dashboard, including a title and a container for the posts.
- CSS: The styles give the dashboard a clean, modern look. You can adjust colors and spacing to fit your needs.
- JavaScript:
- A mock data array simulates posts you’d get from a social media API.
- The
renderPostsfunction dynamically creates and displays each post. fetchPostssimulates an API call usingsetTimeoutto delay rendering.
Social Media Dashboard