Author: saqibkhan

  • Music Player

    HTML

    htmlCopy code<!DOCTYPE html>
    <html lang="en">
    <head>
    
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Simple Music Player&lt;/title&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    </head> <body>
    &lt;div class="music-player"&gt;
        &lt;h2 id="track-title"&gt;Track Title&lt;/h2&gt;
        &lt;audio id="audio" controls&gt;
            &lt;source src="your-audio-file.mp3" type="audio/mpeg"&gt;
            Your browser does not support the audio element.
        &lt;/audio&gt;
        &lt;div class="controls"&gt;
            &lt;button id="play"&gt;Play&lt;/button&gt;
            &lt;button id="pause"&gt;Pause&lt;/button&gt;
            &lt;button id="stop"&gt;Stop&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    </body> </html>

    CSS (styles.css)

    cssCopy codebody {
    
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    } .music-player {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    } .controls button {
    margin: 5px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    }

    JavaScript (script.js)

    javascriptCopy codeconst audio = document.getElementById('audio');
    const playButton = document.getElementById('play');
    const pauseButton = document.getElementById('pause');
    const stopButton = document.getElementById('stop');
    const trackTitle = document.getElementById('track-title');
    
    playButton.addEventListener('click', () => {
    
    audio.play();
    trackTitle.textContent = "Playing: " + audio.currentSrc.split('/').pop();
    }); pauseButton.addEventListener('click', () => {
    audio.pause();
    }); stopButton.addEventListener('click', () => {
    audio.pause();
    audio.currentTime = 0; // Reset to start
    trackTitle.textContent = "Track Title";
    });

    Instructions

    1. Set Up Your Files: Create three files in the same directory: index.html, styles.css, and script.js.
    2. Add Your Audio File: Replace "your-audio-file.mp3" in the HTML code with the path to your audio file.
    3. Open in a Browser: Open the index.html file in your web browser to test the music player.
  • Virtual Classroom

    Basic Virtual Classroom Structure

    1. HTML: Create the structure of the classroom.
    2. CSS: Style the classroom.
    3. JavaScript: Add interactivity.

    Example Code

    HTML (index.html)

    htmlCopy code<!DOCTYPE html>
    <html lang="en">
    <head>
    
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Virtual Classroom&lt;/title&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    </head> <body>
    &lt;div class="classroom"&gt;
        &lt;header&gt;
            &lt;h1&gt;Virtual Classroom&lt;/h1&gt;
            &lt;div class="controls"&gt;
                &lt;button id="startButton"&gt;Start Class&lt;/button&gt;
                &lt;button id="endButton" disabled&gt;End Class&lt;/button&gt;
            &lt;/div&gt;
        &lt;/header&gt;
        &lt;main&gt;
            &lt;div class="chat-box"&gt;
                &lt;div id="messages"&gt;&lt;/div&gt;
                &lt;input type="text" id="messageInput" placeholder="Type a message..."&gt;
                &lt;button id="sendButton"&gt;Send&lt;/button&gt;
            &lt;/div&gt;
        &lt;/main&gt;
        &lt;footer&gt;
            &lt;p&gt;Class Duration: &lt;span id="timer"&gt;00:00&lt;/span&gt;&lt;/p&gt;
        &lt;/footer&gt;
    &lt;/div&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    </body> </html>

    CSS (styles.css)

    cssCopy codebody {
    
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    } .classroom {
    width: 80%;
    margin: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    } header {
    background: #007bff;
    color: white;
    padding: 10px;
    text-align: center;
    border-radius: 8px 8px 0 0;
    } .controls button {
    margin: 5px;
    } main {
    padding: 20px;
    } .chat-box {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    } #messages {
    height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    } input[type="text"] {
    width: 70%;
    padding: 10px;
    } footer {
    text-align: center;
    padding: 10px;
    border-top: 1px solid #ccc;
    }

    JavaScript (script.js)

    javascriptCopy codelet timerInterval;
    let secondsElapsed = 0;
    
    document.getElementById('startButton').addEventListener('click', startClass);
    document.getElementById('endButton').addEventListener('click', endClass);
    document.getElementById('sendButton').addEventListener('click', sendMessage);
    
    function startClass() {
    
    document.getElementById('startButton').disabled = true;
    document.getElementById('endButton').disabled = false;
    secondsElapsed = 0;
    timerInterval = setInterval(updateTimer, 1000);
    } function endClass() {
    clearInterval(timerInterval);
    document.getElementById('startButton').disabled = false;
    document.getElementById('endButton').disabled = true;
    } function updateTimer() {
    secondsElapsed++;
    const minutes = Math.floor(secondsElapsed / 60);
    const seconds = secondsElapsed % 60;
    document.getElementById('timer').textContent = ${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')};
    } function sendMessage() {
    const messageInput = document.getElementById('messageInput');
    const messageText = messageInput.value;
    if (messageText.trim()) {
        const messagesDiv = document.getElementById('messages');
        const newMessage = document.createElement('div');
        newMessage.textContent = messageText;
        messagesDiv.appendChild(newMessage);
        messageInput.value = '';
        messagesDiv.scrollTop = messagesDiv.scrollHeight; // Auto-scroll
    }
    }

    How to Run

    1. Create the Files: Create index.html, styles.css, and script.js files in the same directory.
    2. Open in Browser: Open index.html in a web browser.
    3. Interactivity: Click “Start Class” to begin the timer and enable message sending. Messages will appear in the chat box.
  • Notes App

    HTML (index.html)

    htmlCopy code<!DOCTYPE html>
    <html lang="en">
    <head>
    
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Simple Notes App&lt;/title&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    </head> <body>
    &lt;div class="container"&gt;
        &lt;h1&gt;Notes App&lt;/h1&gt;
        &lt;textarea id="noteInput" placeholder="Type your note here..."&gt;&lt;/textarea&gt;
        &lt;button id="addNoteBtn"&gt;Add Note&lt;/button&gt;
        &lt;div id="notesList"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    </body> </html>

    CSS (styles.css)

    cssCopy codebody {
    
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    } .container {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    } h1 {
    text-align: center;
    } textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
    } button {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    } button:hover {
    background-color: #218838;
    } .note {
    background-color: #e9ecef;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    position: relative;
    } .deleteBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: red;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    }

    JavaScript (script.js)

    javascriptCopy codedocument.getElementById('addNoteBtn').addEventListener('click', addNote);
    
    function addNote() {
    
    const noteInput = document.getElementById('noteInput');
    const noteText = noteInput.value.trim();
    if (noteText) {
        const notesList = document.getElementById('notesList');
        const noteDiv = document.createElement('div');
        noteDiv.classList.add('note');
        const noteContent = document.createElement('p');
        noteContent.textContent = noteText;
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'Delete';
        deleteBtn.classList.add('deleteBtn');
        deleteBtn.addEventListener('click', () =&gt; {
            notesList.removeChild(noteDiv);
        });
        noteDiv.appendChild(noteContent);
        noteDiv.appendChild(deleteBtn);
        notesList.appendChild(noteDiv);
        noteInput.value = '';
    } else {
        alert('Please enter a note!');
    }
    }

    How to Run

    1. Create a folder on your computer and create three files inside it: index.html, styles.css, and script.js.
    2. Copy the respective code into each file.
    3. Open index.html in your web browser.
  • Job Board

    Project Structure

    Copy codejob-board/
    ├── index.html
    ├── style.css
    └── script.js
    

    1. index.html

    htmlCopy code<!DOCTYPE html>
    <html lang="en">
    <head>
    
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Job Board&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    </head> <body>
    &lt;header&gt;
        &lt;h1&gt;Job Board&lt;/h1&gt;
        &lt;form id="job-form"&gt;
            &lt;input type="text" id="job-title" placeholder="Job Title" required&gt;
            &lt;input type="text" id="job-company" placeholder="Company Name" required&gt;
            &lt;input type="text" id="job-location" placeholder="Location" required&gt;
            &lt;textarea id="job-description" placeholder="Job Description" required&gt;&lt;/textarea&gt;
            &lt;button type="submit"&gt;Post Job&lt;/button&gt;
        &lt;/form&gt;
    &lt;/header&gt;
    &lt;main&gt;
        &lt;h2&gt;Job Listings&lt;/h2&gt;
        &lt;div id="job-listings"&gt;&lt;/div&gt;
    &lt;/main&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    </body> </html>

    2. style.css

    cssCopy codebody {
    
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
    } header {
    background: #007bff;
    color: white;
    padding: 10px 20px;
    } h1, h2 {
    margin: 0;
    } form {
    display: flex;
    flex-direction: column;
    } input, textarea {
    margin: 5px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    } button {
    padding: 10px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    } button:hover {
    background: #218838;
    } #job-listings {
    margin-top: 20px;
    } .job-item {
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
    }

    3. script.js

    javascriptCopy codedocument.getElementById('job-form').addEventListener('submit', function(event) {
    
    event.preventDefault();
    const title = document.getElementById('job-title').value;
    const company = document.getElementById('job-company').value;
    const location = document.getElementById('job-location').value;
    const description = document.getElementById('job-description').value;
    const job = {
        title,
        company,
        location,
        description
    };
    addJobToListings(job);
    // Clear the form
    this.reset();
    }); function addJobToListings(job) {
    const jobListings = document.getElementById('job-listings');
    
    const jobItem = document.createElement('div');
    jobItem.classList.add('job-item');
    jobItem.innerHTML = `
        &lt;h3&gt;${job.title}&lt;/h3&gt;
        &lt;p&gt;&lt;strong&gt;Company:&lt;/strong&gt; ${job.company}&lt;/p&gt;
        &lt;p&gt;&lt;strong&gt;Location:&lt;/strong&gt; ${job.location}&lt;/p&gt;
        &lt;p&gt;${job.description}&lt;/p&gt;
    `;
    jobListings.appendChild(jobItem);
    }

    How It Works

    1. HTML Structure: The index.html file sets up a form for submitting job postings and a section to display job listings.
    2. Styling: The style.css file provides basic styling for the application.
    3. JavaScript Functionality: The script.js file handles the form submission, creates job listings, and appends them to the job listings section.

    Running the Application

    1. Create a folder named job-board and add the three files as shown in the structure.
    2. Open index.html in your web browser.
    3. You can now post jobs, and they’ll appear in the job listings section.
  • Photo Gallery

    HTML

    htmlCopy code<!DOCTYPE html>
    <html lang="en">
    <head>
    
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;title&gt;Photo Gallery&lt;/title&gt;
    </head> <body>
    &lt;div class="gallery"&gt;
        &lt;img src="image1.jpg" alt="Image 1" class="gallery-item"&gt;
        &lt;img src="image2.jpg" alt="Image 2" class="gallery-item"&gt;
        &lt;img src="image3.jpg" alt="Image 3" class="gallery-item"&gt;
        &lt;img src="image4.jpg" alt="Image 4" class="gallery-item"&gt;
        &lt;img src="image5.jpg" alt="Image 5" class="gallery-item"&gt;
        &lt;img src="image6.jpg" alt="Image 6" class="gallery-item"&gt;
    &lt;/div&gt;
    &lt;div class="lightbox" id="lightbox"&gt;
        &lt;span class="close" onclick="closeLightbox()"&gt;&amp;times;&lt;/span&gt;
        &lt;img class="lightbox-content" id="lightbox-img"&gt;
    &lt;/div&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    </body> </html>

    CSS (styles.css)

    cssCopy codebody {
    
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    } .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px;
    } .gallery-item {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s;
    } .gallery-item:hover {
    transform: scale(1.05);
    } .lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    } .lightbox-content {
    max-width: 90%;
    max-height: 90%;
    } .close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
    }

    JavaScript (script.js)

    javascriptCopy codeconst galleryItems = document.querySelectorAll('.gallery-item');
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    
    galleryItems.forEach(item => {
    
    item.addEventListener('click', () =&gt; {
        lightbox.style.display = 'flex';
        lightboxImg.src = item.src;
    });
    }); function closeLightbox() {
    lightbox.style.display = 'none';
    }

    Instructions:

    1. Set Up Your Files: Create three files: index.html, styles.css, and script.js.
    2. Add Your Images: Replace image1.jpg, image2.jpg, etc., with the paths to your own images.
    3. Open in Browser: Open index.html in your browser to see the gallery in action.
  • Online Quiz

    HTML (index.html)

    htmlCopy code<!DOCTYPE html>
    <html lang="en">
    <head>
    
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Online Quiz App&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    </head> <body>
    &lt;div class="container"&gt;
        &lt;h1&gt;Quiz App&lt;/h1&gt;
        &lt;div id="quiz"&gt;&lt;/div&gt;
        &lt;button id="submit" class="btn"&gt;Submit Quiz&lt;/button&gt;
        &lt;div id="result"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    </body> </html>

    2. CSS (style.css)

    cssCopy codebody {
    
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 20px;
    } .container {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    } h1 {
    text-align: center;
    } .question {
    margin: 20px 0;
    } .btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    } .btn:hover {
    background: #218838;
    }

    3. JavaScript (script.js)

    javascriptCopy codeconst quizData = [
    
    {
        question: "What is the capital of France?",
        a: "Berlin",
        b: "Madrid",
        c: "Paris",
        d: "Lisbon",
        correct: "c"
    },
    {
        question: "Who wrote 'To Kill a Mockingbird'?",
        a: "Harper Lee",
        b: "Mark Twain",
        c: "F. Scott Fitzgerald",
        d: "Ernest Hemingway",
        correct: "a"
    },
    {
        question: "What is the largest planet in our solar system?",
        a: "Earth",
        b: "Mars",
        c: "Jupiter",
        d: "Saturn",
        correct: "c"
    },
    {
        question: "What is the smallest prime number?",
        a: "0",
        b: "1",
        c: "2",
        d: "3",
        correct: "c"
    }
    ]; const quizContainer = document.getElementById('quiz'); const submitButton = document.getElementById('submit'); const resultContainer = document.getElementById('result'); let currentQuestionIndex = 0; let score = 0; function loadQuiz() {
    const currentQuizData = quizData&#91;currentQuestionIndex];
    quizContainer.innerHTML = `
        &lt;div class="question"&gt;${currentQuizData.question}&lt;/div&gt;
        &lt;label&gt;&lt;input type="radio" name="answer" value="a"&gt; ${currentQuizData.a}&lt;/label&gt;&lt;br&gt;
        &lt;label&gt;&lt;input type="radio" name="answer" value="b"&gt; ${currentQuizData.b}&lt;/label&gt;&lt;br&gt;
        &lt;label&gt;&lt;input type="radio" name="answer" value="c"&gt; ${currentQuizData.c}&lt;/label&gt;&lt;br&gt;
        &lt;label&gt;&lt;input type="radio" name="answer" value="d"&gt; ${currentQuizData.d}&lt;/label&gt;&lt;br&gt;
    `;
    } function getSelected() {
    const answers = document.querySelectorAll('input&#91;name="answer"]');
    let answer;
    answers.forEach((ans) =&gt; {
        if (ans.checked) {
            answer = ans.value;
        }
    });
    return answer;
    } submitButton.addEventListener('click', () => {
    const answer = getSelected();
    if (answer) {
        if (answer === quizData&#91;currentQuestionIndex].correct) {
            score++;
        }
        currentQuestionIndex++;
        if (currentQuestionIndex &lt; quizData.length) {
            loadQuiz();
        } else {
            resultContainer.innerHTML = `
                &lt;h2&gt;You scored ${score} out of ${quizData.length}&lt;/h2&gt;
            `;
            quizContainer.style.display = 'none';
            submitButton.style.display = 'none';
        }
    } else {
        alert('Please select an answer!');
    }
    }); loadQuiz();

    How to Run the Quiz App

    1. Create the files: Create three files named index.html, style.css, and script.js.
    2. Copy the code: Copy the respective code snippets into the appropriate files.
    3. Open the HTML file: Open index.html in your web browser to see the quiz app in action.

    Features You Can Add

    • Multiple choice with more than one correct answer.
    • Timer for each question.
    • Different categories of questions.
    • User authentication to save scores.
    • Database integration for a larger question pool.
  • Event Planning App

    Step 1: Set Up the Backend

    1. Initialize the ProjectbashCopy codemkdir event-planner cd event-planner npm init -y npm install express cors body-parser
    2. Create the Server (server.js)
    javascriptCopy codeconst express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const app = express(); const PORT = 3000; app.use(cors()); app.use(bodyParser.json()); let events = []; // Create an event app.post('/events', (req, res) => { const { name, date } = req.body; const newEvent = { id: Date.now(), name, date }; events.push(newEvent); res.status(201).json(newEvent); }); // Get all events app.get('/events', (req, res) => { res.json(events); }); // Delete an event app.delete('/events/:id', (req, res) => { const { id } = req.params; events = events.filter(event => event.id != id); res.status(204).send(); }); app.listen(PORT, () => { console.log(Server is running on http://localhost:${PORT}); });
    1. Run the ServerbashCopy codenode server.js

    Step 2: Create the Frontend

    1. Create the HTML Structure (index.html)
    htmlCopy code<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Planner</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Event Planner</h1> <form id="eventForm"> <input type="text" id="eventName" placeholder="Event Name" required> <input type="date" id="eventDate" required> <button type="submit">Create Event</button> </form> <ul id="eventList"></ul> <script src="script.js"></script> </body> </html>
    1. Add Some Styles (styles.css)
    cssCopy codebody { font-family: Arial, sans-serif; margin: 20px; } form { margin-bottom: 20px; } input { margin-right: 10px; } ul { list-style-type: none; padding: 0; } li { margin: 5px 0; }
    1. Add Functionality with JavaScript (script.js)
    javascriptCopy codeconst eventForm = document.getElementById('eventForm'); const eventList = document.getElementById('eventList'); eventForm.addEventListener('submit', async (e) => { e.preventDefault(); const name = document.getElementById('eventName').value; const date = document.getElementById('eventDate').value; const response = await fetch('http://localhost:3000/events', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name, date }), }); const newEvent = await response.json(); addEventToList(newEvent); eventForm.reset(); }); const addEventToList = (event) => { const li = document.createElement('li'); li.textContent = ${event.name} on ${event.date}; li.dataset.id = event.id; const deleteBtn = document.createElement('button'); deleteBtn.textContent = 'Delete'; deleteBtn.onclick = () => deleteEvent(event.id); li.appendChild(deleteBtn); eventList.appendChild(li); }; const deleteEvent = async (id) => { await fetch(http://localhost:3000/events/${id}, { method: 'DELETE', }); document.querySelector(li&#91;data-id='${id}']).remove(); }; const fetchEvents = async () => { const response = await fetch('http://localhost:3000/events'); const events = await response.json(); events.forEach(addEventToList); }; fetchEvents();

    Step 3: Test Your App

    1. Start the server with node server.js.
    2. Open index.html in your browser.
    3. Create and delete events to see how it works!
  • Social Media Dashboard

    Sample Social Media Dashboard

    1. HTML Structure

    <!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 id="posts">&lt;/div>
    &lt;/div>
    &lt;script src="script.js">&lt;/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 = `
            &lt;h2>${post.title}&lt;/h2>
            &lt;p>${post.content}&lt;/p>
            &lt;div class="engagement">
                &lt;span>${post.likes} Likes&lt;/span> | 
                &lt;span>${post.shares} Shares&lt;/span>
            &lt;/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

    1. HTML: The HTML file sets up the structure for the dashboard, including a title and a container for the posts.
    2. CSS: The styles give the dashboard a clean, modern look. You can adjust colors and spacing to fit your needs.
    3. JavaScript:
      • A mock data array simulates posts you’d get from a social media API.
      • The renderPosts function dynamically creates and displays each post.
      • fetchPosts simulates an API call using setTimeout to delay rendering.
  • Fitness Tracker

    Fitness Tracker Project Overview

    1. Objectives:
      • Track daily steps.
      • Record workouts (type, duration).
      • Calculate calories burned based on steps and workouts.
      • Visualize data.
    2. Technologies:
      • Python
      • Pandas for data manipulation
      • Matplotlib for visualization

    Step-by-Step Implementation

    Step 1: Set Up Your Environment

    Make sure you have Python installed along with the required libraries. You can install the necessary libraries using pip:

    pip install pandas matplotlib
    

    Step 2: Define the Fitness Tracker Class

    Create a class to encapsulate the fitness tracking functionality.

    import pandas as pd
    import matplotlib.pyplot as plt
    
    class FitnessTracker:
    
    def __init__(self):
        self.data = pd.DataFrame(columns=&#91;'Date', 'Steps', 'Workout Type', 'Duration', 'Calories Burned'])
    
    def add_steps(self, date, steps):
        self.data = self.data.append({'Date': date, 'Steps': steps, 'Workout Type': None, 'Duration': None, 'Calories Burned': None}, ignore_index=True)
    
    def add_workout(self, date, workout_type, duration):
        # Calculate calories burned (approximate: 5 calories per minute for moderate exercise)
        calories_burned = duration * 5
        self.data = self.data.append({'Date': date, 'Steps': None, 'Workout Type': workout_type, 'Duration': duration, 'Calories Burned': calories_burned}, ignore_index=True)
    
    def total_steps(self):
        return self.data&#91;'Steps'].sum()
    def total_calories(self):
        return self.data&#91;'Calories Burned'].sum()
    def visualize_data(self):
        self.data&#91;'Date'] = pd.to_datetime(self.data&#91;'Date'])
        self.data.set_index('Date', inplace=True)
        
        plt.figure(figsize=(10, 5))
        plt.plot(self.data.index, self.data&#91;'Steps'], label='Steps', marker='o')
        plt.plot(self.data.index, self.data&#91;'Calories Burned'].cumsum(), label='Calories Burned', marker='o')
        plt.title('Fitness Tracker Data')
        plt.xlabel('Date')
        plt.ylabel('Count')
        plt.legend()
        plt.xticks(rotation=45)
        plt.tight_layout()
        plt.show()

    Step 3: Use the Fitness Tracker

    Now, let’s create an instance of the FitnessTracker class and add some data.

    # Initialize the fitness tracker
    tracker = FitnessTracker()
    
    # Adding some sample data
    tracker.add_steps('2023-09-01', 10000)
    tracker.add_steps('2023-09-02', 8000)
    tracker.add_workout('2023-09-02', 'Running', 30)
    tracker.add_steps('2023-09-03', 12000)
    tracker.add_workout('2023-09-03', 'Cycling', 45)
    
    # Display total steps and calories burned
    print(f"Total Steps: {tracker.total_steps()}")
    print(f"Total Calories Burned: {tracker.total_calories()}")
    
    # Visualize the data
    tracker.visualize_data()
    

    Step 4: Run the Project

    1. Save your code in a file, e.g., fitness_tracker.py.
    2. Run the script using Python:
    python fitness_tracker.py
    
  • Online Code Editor

    • Features:
      • Live coding environment with syntax highlighting
      • Support for multiple programming languages
      • Save and share code snippets
      • Collaborative coding in real-time
    • Technologies:
      • Monaco Editor or CodeMirror for the editor interface
      • WebSocket for real-time collaboration
      • Firebase or a custom backend for storing snippets