Online Forum or Community Board – My Blog

My WordPress Blog

My WordPress Blog

By saqibkhanPosted on October 2, 2024Posted in ProjectsNo Comments

Step 1: Setting Up the Project

Create a project directory:

mkdir simple-forum cd simple-forum

Initialize a Node.js project:bashCopy codenpm init -y
Install necessary packages:

npm install express body-parser cors

Step 2: Backend Code (Node.js with Express)

Create a file named server.js in your project directory:

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 posts = [];

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

// Create a new post
app.post('/api/posts', (req, res) => {
const { title, content } = req.body;
const newPost = { id: posts.length + 1, title, content };
posts.push(newPost);
res.status(201).json(newPost);});

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

Step 3: Frontend Code (HTML, CSS, and JavaScript)

Create an index.html file in the project directory:

<!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>Simple Forum&lt;/title>
&lt;style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
    }
    h1 {
        text-align: center;
    }
    #postForm {
        margin-bottom: 20px;
    }
    .post {
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 10px;
    }
&lt;/style></head>
<body>

<h1>Simple Forum</h1>

<div id="postForm">
&lt;input type="text" id="title" placeholder="Post Title" required>
&lt;textarea id="content" placeholder="Post Content" required>&lt;/textarea>
&lt;button onclick="submitPost()">Submit&lt;/button></div>

<div id="posts"></div>

<script>
async function fetchPosts() {
    const response = await fetch('http://localhost:3000/api/posts');
    const posts = await response.json();
    displayPosts(posts);
}
function displayPosts(posts) {
    const postsDiv = document.getElementById('posts');
    postsDiv.innerHTML = '';
    posts.forEach(post => {
        const postDiv = document.createElement('div');
        postDiv.classList.add('post');
        postDiv.innerHTML = &amp;lt;h3&gt;${post.title}&amp;lt;/h3&gt;&amp;lt;p&gt;${post.content}&amp;lt;/p&gt;;
        postsDiv.appendChild(postDiv);
    });
}
async function submitPost() {
    const title = document.getElementById('title').value;
    const content = document.getElementById('content').value;
    const response = await fetch('http://localhost:3000/api/posts', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ title, content })
    });
    if (response.ok) {
        document.getElementById('title').value = '';
        document.getElementById('content').value = '';
        fetchPosts();
    }
}
fetchPosts();</script>

</body>
</html>

Step 4: Running the Application

Start the backend server:

node server.js

Open index.html in your web browser.

Online Forum or Community Board

Leave a Reply Cancel reply