Category: React JS Projects

https://static.vecteezy.com/system/resources/thumbnails/016/712/564/small_2x/3d-render-illustration-of-project-management-analysis-result-icon-png.png

  • News Aggregator

    Step 1: Set Up Your Environment

    1. Install Flask and Requests:bashCopy codepip install Flask requests
    2. Sign Up for News API:
      • Go to News API and sign up to get your API key.

    Step 2: Create Your Flask App

    Create a file named app.py:

    pythonCopy codefrom flask import Flask, render_template, request
    import requests
    
    app = Flask(__name__)
    
    API_KEY = 'YOUR_NEWS_API_KEY'  # Replace with your News API key
    
    @app.route('/')
    def index():
    
    query = request.args.get('query', '')
    articles = []
    if query:
        url = f'https://newsapi.org/v2/everything?q={query}&apiKey={API_KEY}'
        response = requests.get(url)
        data = response.json()
        articles = data.get('articles', [])
    return render_template('index.html', articles=articles, query=query)
    if __name__ == '__main__':
    app.run(debug=True)

    Step 3: Create the HTML Template

    Create a folder named templates in the same directory as app.py, and inside that folder, create a file named 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;News Aggregator&lt;/title&gt;
    </head> <body>
    &lt;h1&gt;News Aggregator&lt;/h1&gt;
    &lt;form method="get"&gt;
        &lt;input type="text" name="query" placeholder="Search news..." value="{{ query }}"&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;
    &lt;ul&gt;
        {% for article in articles %}
            &lt;li&gt;
                &lt;a href="{{ article.url }}" target="_blank"&gt;{{ article.title }}&lt;/a&gt;
                &lt;p&gt;{{ article.description }}&lt;/p&gt;
            &lt;/li&gt;
        {% else %}
            &lt;li&gt;No articles found.&lt;/li&gt;
        {% endfor %}
    &lt;/ul&gt;
    </body> </html>

    Step 4: Run Your Application

    To run your application, execute the following command in your terminal:

    bashCopy codepython app.py
    

    Step 5: Access Your News Aggregator

    Open your web browser and go to http://127.0.0.1:5000/. You can enter a search query to fetch news articles related to that query.

  • Markdown Editor

    HTML Structure

    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;Markdown Editor&lt;/title&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    </head> <body>
    &lt;div class="container"&gt;
        &lt;h1&gt;Markdown Editor&lt;/h1&gt;
        &lt;textarea id="markdown" placeholder="Type your Markdown here..."&gt;&lt;/textarea&gt;
        &lt;div id="preview" class="preview"&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;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
    } .container {
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    } h1 {
    text-align: center;
    } textarea {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    } .preview {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
    }

    JavaScript (script.js)

    javascriptCopy code// Function to convert Markdown to HTML
    function markdownToHtml(markdown) {
    
    // Using a simple regex for basic Markdown conversion
    let html = markdown
        .replace(/#/g, '&lt;h1&gt;')
        .replace(/#\s/g, '&lt;/h1&gt;')
        .replace(/\*\*(.*?)\*\*/g, '&lt;strong&gt;$1&lt;/strong&gt;')
        .replace(/\*(.*?)\*/g, '&lt;em&gt;$1&lt;/em&gt;')
        .replace(/\n/g, '&lt;br&gt;');
    
    return html;
    } // Event listener for textarea document.getElementById('markdown').addEventListener('input', function() {
    const markdownText = this.value;
    const html = markdownToHtml(markdownText);
    document.getElementById('preview').innerHTML = html;
    });

    How to Use

    1. Create three files: index.html, styles.css, and script.js.
    2. Copy the respective code into each file.
    3. Open index.html in a web browser.
    4. Start typing Markdown in the textarea, and the HTML preview will update in real-time.
  • Dashboard for IoT Devices

    Step 1: Set Up Your Environment

    1. Install Flask: Make sure you have Python and pip installed. Then, run:bashCopy codepip install Flask
    2. Create Your Project Structure:arduinoCopy code/iot_dashboard ├── app.py ├── static │ └── style.css └── templates └── index.html

    Step 2: Create app.py

    This file will handle the backend logic.

    pythonCopy codefrom flask import Flask, render_template, jsonify, request
    import random
    
    app = Flask(__name__)
    
    # Simulate IoT device data
    devices = {
    
    'device1': {'temperature': 20, 'humidity': 30},
    'device2': {'temperature': 22, 'humidity': 40}
    } @app.route('/') def index():
    return render_template('index.html')
    @app.route('/api/devices', methods=['GET']) def get_devices():
    return jsonify(devices)
    @app.route('/api/update', methods=['POST']) def update_device():
    data = request.json
    device_id = data.get('id')
    if device_id in devices:
        devices&#91;device_id]&#91;'temperature'] = data.get('temperature', devices&#91;device_id]&#91;'temperature'])
        devices&#91;device_id]&#91;'humidity'] = data.get('humidity', devices&#91;device_id]&#91;'humidity'])
        return jsonify(success=True)
    return jsonify(success=False), 404
    if __name__ == '__main__':
    app.run(debug=True)

    Step 3: Create index.html

    This file will be the frontend for your dashboard.

    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;IoT Dashboard&lt;/title&gt;
    &lt;link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"&gt;
    &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
    </head> <body>
    &lt;h1&gt;IoT Device Dashboard&lt;/h1&gt;
    &lt;div id="devices"&gt;&lt;/div&gt;
    &lt;script&gt;
        function fetchDevices() {
            $.getJSON('/api/devices', function(data) {
                $('#devices').empty();
                $.each(data, function(id, device) {
                    $('#devices').append(`&lt;div class="device"&gt;
                        &lt;h3&gt;${id}&lt;/h3&gt;
                        &lt;p&gt;Temperature: ${device.temperature}°C&lt;/p&gt;
                        &lt;p&gt;Humidity: ${device.humidity}%&lt;/p&gt;
                        &lt;button onclick="updateDevice('${id}')"&gt;Update&lt;/button&gt;
                    &lt;/div&gt;`);
                });
            });
        }
        function updateDevice(id) {
            const temperature = prompt("Enter new temperature:");
            const humidity = prompt("Enter new humidity:");
            if (temperature !== null &amp;&amp; humidity !== null) {
                $.ajax({
                    url: '/api/update',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ id: id, temperature: temperature, humidity: humidity }),
                    success: function() {
                        fetchDevices();
                    }
                });
            }
        }
        $(document).ready(function() {
            fetchDevices();
        });
    &lt;/script&gt;
    </body> </html>

    Step 4: Create style.css

    Add some basic styles.

    cssCopy codebody {
    
    font-family: Arial, sans-serif;
    } .device {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
    }

    Step 5: Run Your Application

    1. Navigate to your project directory:bashCopy codecd iot_dashboard
    2. Run your Flask app:bashCopy codepython app.py
    3. Open your web browser and go to http://127.0.0.1:5000.
  • Real-time Polling App

    Backend (Node.js)

    1. Setup your project:
    bashCopy codemkdir polling-app
    cd polling-app
    npm init -y
    npm install express socket.io cors
    
    1. Create a server file (server.js):
    javascriptCopy code// server.js
    const express = require('express');
    const http = require('http');
    const socketIo = require('socket.io');
    const cors = require('cors');
    
    const app = express();
    const server = http.createServer(app);
    const io = socketIo(server, {
      cors: {
    
    origin: '*', // Change this to your frontend URL in production
    methods: &#91;'GET', 'POST']
    } }); app.use(cors()); app.use(express.json()); let pollData = { question: "What's your favorite fruit?", options: ["Apple", "Banana", "Orange"], votes: [0, 0, 0] }; app.get('/poll', (req, res) => { res.json(pollData); }); app.post('/vote', (req, res) => { const { optionIndex } = req.body; if (optionIndex >= 0 && optionIndex < pollData.votes.length) {
    pollData.votes&#91;optionIndex]++;
    io.emit('voteUpdated', pollData);
    res.sendStatus(200);
    } else {
    res.sendStatus(400);
    } }); io.on('connection', (socket) => { console.log('A user connected'); socket.emit('voteUpdated', pollData); }); const PORT = process.env.PORT || 3000; server.listen(PORT, () => { console.log(Server is running on port ${PORT}); });

    Frontend (HTML/CSS/JavaScript)

    1. Create an index.html file:
    htmlCopy code<!-- index.html -->
    <!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;Real-Time Polling App&lt;/title&gt;
    &lt;style&gt;
        body { font-family: Arial, sans-serif; }
        #poll { margin: 20px; }
        button { margin-top: 10px; }
    &lt;/style&gt;
    </head> <body>
    &lt;div id="poll"&gt;
        &lt;h1 id="question"&gt;&lt;/h1&gt;
        &lt;ul id="options"&gt;&lt;/ul&gt;
    &lt;/div&gt;
    &lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        const socket = io();
        
        async function fetchPoll() {
            const response = await fetch('/poll');
            const pollData = await response.json();
            document.getElementById('question').innerText = pollData.question;
            const optionsList = document.getElementById('options');
            optionsList.innerHTML = '';
            pollData.options.forEach((option, index) =&gt; {
                const li = document.createElement('li');
                li.innerHTML = ${option} - &amp;lt;span id="vote-${index}"&amp;gt;0&amp;lt;/span&amp;gt; votes;
                const button = document.createElement('button');
                button.innerText = 'Vote';
                button.onclick = () =&gt; vote(index);
                li.appendChild(button);
                optionsList.appendChild(li);
            });
        }
        async function vote(optionIndex) {
            await fetch('/vote', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ optionIndex })
            });
        }
        socket.on('voteUpdated', (pollData) =&gt; {
            pollData.votes.forEach((voteCount, index) =&gt; {
                document.getElementById(vote-${index}).innerText = voteCount;
            });
        });
        fetchPoll();
    &lt;/script&gt;
    </body> </html>

    Running the Application

    1. Start the server:
    bashCopy codenode server.js
    
    1. Open your browser:

    Navigate to http://localhost:3000 to see your polling app in action.

    Explanation

    • Backend:
      • We set up a basic Express server.
      • We store poll data in memory (for simplicity).
      • When a vote is submitted, we update the votes and emit a Socket.io event to update connected clients.
    • Frontend:
      • We use the Fetch API to get poll data and submit votes.
      • We listen for updates via Socket.io to refresh the vote counts in real-time.
  • 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.