Front End (HTML/CSS/JavaScript) – My Blog

My WordPress Blog

My WordPress Blog

By saqibkhanPosted on October 2, 2024Posted in ProjectsNo Comments

index.html

<!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>Local Business Directory&lt;/title>
&lt;link rel="stylesheet" href="styles.css"></head>
<body>
&lt;div class="container">
    &lt;h1>Local Business Directory&lt;/h1>
    &lt;form id="business-form">
        &lt;input type="text" id="name" placeholder="Business Name" required>
        &lt;input type="text" id="address" placeholder="Business Address" required>
        &lt;button type="submit">Add Business&lt;/button>
    &lt;/form>
    &lt;div id="business-list">&lt;/div>
&lt;/div>
&lt;script src="script.js">&lt;/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 &amp;&amp; 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.

Front End (HTML/CSS/JavaScript)

Leave a Reply Cancel reply