Feedback and Survey Tool

—

by

Step 1: Setup the Project

Initialize a new Node.js project:

mkdir feedback-survey-tool cd feedback-survey-tool npm init -y npm install express body-parser cors

Create the project structure:

feedback-survey-tool/ ├── server.js ├── public/ │ └── index.html └── package.json

Step 2: Create the Backend (server.js)

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

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

let feedbacks = []; // In-memory storage for feedbacks

app.use(cors());
app.use(bodyParser.json());
app.use(express.static('public'));

// Endpoint to submit feedback
app.post('/api/feedback', (req, res) => {
    const feedback = req.body;
    feedbacks.push(feedback);
    res.status(201).json({ message: 'Feedback submitted successfully!' });
});

// Endpoint to retrieve feedbacks
app.get('/api/feedback', (req, res) => {
    res.json(feedbacks);
});

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

Step 3: Create the Frontend (index.html)

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feedback and Survey Tool</title>
    <style>
        body { font-family: Arial, sans-serif; }
        form { margin-bottom: 20px; }
        .feedback-list { margin-top: 20px; }
    </style>
</head>
<body>
    <h1>Feedback and Survey Tool</h1>
    <form id="feedbackForm">
        <label for="name">Name:</label>
        <input type="text" id="name" required>
        <br>
        <label for="message">Feedback:</label>
        <textarea id="message" required></textarea>
        <br>
        <button type="submit">Submit Feedback</button>
    </form>

    <div class="feedback-list" id="feedbackList"></div>

    <script>
        const form = document.getElementById('feedbackForm');
        const feedbackList = document.getElementById('feedbackList');

        // Function to submit feedback
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const name = document.getElementById('name').value;
            const message = document.getElementById('message').value;

            const response = await fetch('/api/feedback', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ name, message })
            });

            if (response.ok) {
                alert('Feedback submitted!');
                form.reset();
                loadFeedbacks();
            }
        });

        // Function to load feedbacks
        async function loadFeedbacks() {
            const response = await fetch('/api/feedback');
            const feedbacks = await response.json();
            feedbackList.innerHTML = feedbacks.map(feedback => 
                `<div><strong>${feedback.name}:</strong> ${feedback.message}</div>`
            ).join('');
        }

        // Load feedbacks on page load
        loadFeedbacks();
    </script>
</body>
</html>

Step 4: Run the Application

Start the server:

node server.js

Open your browser and go to:

http://localhost:3000

Comments

Leave a Reply Cancel reply