Event Planning App

—

by

in React JS Projects

Step 1: Set Up the Backend

Initialize the ProjectbashCopy codemkdir event-planner cd event-planner npm init -y npm install express cors body-parser
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}`); });

Run the ServerbashCopy codenode server.js

Step 2: Create the Frontend

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>

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; }

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[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

Start the server with node server.js.
Open index.html in your browser.
Create and delete events to see how it works!

Comments

Leave a Reply Cancel reply