Front End (HTML/CSS/JavaScript)

—

by

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Local Business Directory</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Local Business Directory</h1>
        <form id="business-form">
            <input type="text" id="name" placeholder="Business Name" required>
            <input type="text" id="address" placeholder="Business Address" required>
            <button type="submit">Add Business</button>
        </form>
        <div id="business-list"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

styles.css

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

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

h1 {
    text-align: center;
}

form {
    margin-bottom: 20px;
}

input {
    width: 48%;
    padding: 10px;
    margin-right: 2%;
}

button {
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.business-item {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

script.js

document.getElementById('business-form').addEventListener('submit', function(event) {
    event.preventDefault();

    const name = document.getElementById('name').value;
    const address = document.getElementById('address').value;

    fetch('/api/businesses', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name, address }),
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('name').value = '';
        document.getElementById('address').value = '';
        loadBusinesses();
    })
    .catch(error => console.error('Error:', error));
});

function loadBusinesses() {
    fetch('/api/businesses')
        .then(response => response.json())
        .then(data => {
            const businessList = document.getElementById('business-list');
            businessList.innerHTML = '';
            data.forEach(business => {
                const div = document.createElement('div');
                div.className = 'business-item';
                div.textContent = `${business.name} - ${business.address}`;
                businessList.appendChild(div);
            });
        });
}

loadBusinesses();

Back End (Node.js/Express)

Setup

Create a directory for your project and navigate into it.
Initialize a Node.js project:bashCopy codenpm init -y
Install dependencies:bashCopy codenpm install express body-parser cors

server.js

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(cors());
app.use(bodyParser.json());

let businesses = [];

// Get all businesses
app.get('/api/businesses', (req, res) => {
    res.json(businesses);
});

// Add a new business
app.post('/api/businesses', (req, res) => {
    const { name, address } = req.body;
    if (name && address) {
        const newBusiness = { name, address };
        businesses.push(newBusiness);
        res.status(201).json(newBusiness);
    } else {
        res.status(400).json({ message: 'Name and address are required' });
    }
});

// Start server
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Running the Application

Start the server:

node server.js

Open index.html in a web browser to see your local business directory.

Comments

Leave a Reply Cancel reply