Feedback and Survey Tool – My Blog

My WordPress Blog

My WordPress Blog

By saqibkhanPosted on October 3, 2024Posted in projectsNo Comments

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>
&lt;meta charset="UTF-8">
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
&lt;title>Feedback and Survey Tool&lt;/title>
&lt;style>
    body { font-family: Arial, sans-serif; }
    form { margin-bottom: 20px; }
    .feedback-list { margin-top: 20px; }
&lt;/style></head>
<body>
&lt;h1>Feedback and Survey Tool&lt;/h1>
&lt;form id="feedbackForm">
    &lt;label for="name">Name:&lt;/label>
    &lt;input type="text" id="name" required>
    &lt;br>
    &lt;label for="message">Feedback:&lt;/label>
    &lt;textarea id="message" required>&lt;/textarea>
    &lt;br>
    &lt;button type="submit">Submit Feedback&lt;/button>
&lt;/form>
&lt;div class="feedback-list" id="feedbackList">&lt;/div>
&lt;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 => 
            &amp;lt;div&gt;&amp;lt;strong&gt;${feedback.name}:&amp;lt;/strong&gt; ${feedback.message}&amp;lt;/div&gt;
        ).join('');
    }
    // Load feedbacks on page load
    loadFeedbacks();
&lt;/script></body>
</html>

Step 4: Run the Application

Start the server:

node server.js

Open your browser and go to:

http://localhost:3000

Feedback and Survey Tool

Leave a Reply Cancel reply