Social Media Dashboard

Written by

in

Step 1: Basic Structure (HTML)

Create an index.html file with the following code:

<!DOCTYPE html>
<html lang="en">
<head>
&lt;meta charset="UTF-8">
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
&lt;title>Social Media Dashboard&lt;/title>
&lt;link rel="stylesheet" href="styles.css"></head>
<body>
&lt;div class="dashboard">
    &lt;h1>Social Media Dashboard&lt;/h1>
    &lt;div class="cards">
        &lt;div class="card" id="followers-card">
            &lt;h2>Followers&lt;/h2>
            &lt;p id="followers-count">0&lt;/p>
        &lt;/div>
        &lt;div class="card" id="likes-card">
            &lt;h2>Likes&lt;/h2>
            &lt;p id="likes-count">0&lt;/p>
        &lt;/div>
        &lt;div class="card" id="posts-card">
            &lt;h2>Posts&lt;/h2>
            &lt;p id="posts-count">0&lt;/p>
        &lt;/div>
    &lt;/div>
    &lt;button id="update-data">Update Data&lt;/button>
&lt;/div>
&lt;script src="script.js">&lt;/script></body>
</html>

Step 2: Basic Styling (CSS)

Create a styles.css file for the dashboard styling:

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;}

.dashboard {
max-width: 800px;
margin: auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}

h1 {
text-align: center;}

.cards {
display: flex;
justify-content: space-between;
margin-top: 20px;}

.card {
flex: 1;
margin: 0 10px;
padding: 20px;
background: #e7e7e7;
border-radius: 10px;
text-align: center;}

button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;}

button:hover {
background: #0056b3;}

Step 3: Adding Functionality (JavaScript)

Create a script.js file to handle updating the dashboard:

const followersCount = document.getElementById('followers-count');
const likesCount = document.getElementById('likes-count');
const postsCount = document.getElementById('posts-count');

document.getElementById('update-data').addEventListener('click', updateData);

function updateData() {
// Simulated random data for demonstration
followersCount.textContent = Math.floor(Math.random() * 1000);
likesCount.textContent = Math.floor(Math.random() * 500);
postsCount.textContent = Math.floor(Math.random() * 200);}

Explanation

HTML Structure: The HTML creates a basic layout with sections for followers, likes, and posts.
CSS Styling: The CSS styles the dashboard, making it visually appealing with responsive design.
JavaScript Functionality: The JavaScript code simulates updating the data when the button is clicked. In a real application, you’d replace this with API calls to fetch real data.

Comments

Leave a Reply Cancel reply

More posts