codeasylums-bootcamp · vignesh-codes · Jun 28, 2020
diff --git a/Backend/ForumsPlatform/README.md b/Backend/ForumsPlatform/README.md
@@ -0,0 +1,20 @@
+Forums Page with DB integration.
+Added:
+A global forums page with
+Bad-words filter
+excess req filter
+mongodb using monk. with _ID
+loading gif
+date and time of post
+
+Need to add:
+Post Questions
+Reply options
+
+
+To setup:
+cd server/
+npm install
+npm run dev
+Server Page at localhost:5000
+Client page at localhost:5500
diff --git a/Backend/ForumsPlatform/client/client.js b/Backend/ForumsPlatform/client/client.js
@@ -0,0 +1,88 @@
+console.log("Hi");
+const form= document.querySelector("form");
+const loadingElement = document.querySelector(".loading"); //get the element with loading class
+//apiurl- post req to send object to server
+const API_URL = 'http://localhost:5000/news';
+const newsElement=document.querySelector(".news");
+
+
+
+
+loadingElement.style.display = ''; //to hide 
+
+
+listAllNews();
+
+
+
+form.addEventListener("submit", (event)=> {
+    event.preventDefault();
+    const formData = new FormData(form); //grab user input from page
+    const name = formData.get("name");
+    const content = formData.get("content");
+
+    const ourdata = {
+        name,
+        content
+
+    };
+    console.log(ourdata);
+    //hide the form and display the gif
+    form.style.display = 'none';
+    loadingElement.style.display="";
+
+//after showing the gif, we send the data to backend server
+//might get access denied coz the client and server ip is different
+    fetch(API_URL, {
+        method:'POST',
+        body: JSON.stringify(ourdata),
+        headers: {
+            'content-type': 'application/json'
+        }
+    }).then (response => response.json())
+
+      .then (createdData =>{
+        //console.log(createdData);
+        form.reset();
+        setTimeout(() =>{
+            form.style.display = '';
+
+        }, 30000);
+
+
+        listAllNews();
+        loadingElement.style.display="none";
+
+    });
+
+
+
+
+});
+
+
+function listAllNews(){
+    newsElement.innerHTML='';
+
+    fetch(API_URL)
+        .then(response => response.json())
+        .then(news => {
+            //console.log(news)
+            news.reverse();
+            news.forEach(ourdata=>{
+            const div = document.createElement('div');
+            const header = document.createElement('h3');
+            header.textContent = ourdata.name;
+            const contents = document.createElement('p');
+            contents.textContent = ourdata.content;
+            const dates = document.createElement('small');
+            dates.textContent=ourdata.created
+
+            div.appendChild(header);
+            div.appendChild(contents);
+            div.appendChild(dates);
+            newsElement.appendChild(div);
+
+        })
+        })
+};
diff --git a/Backend/ForumsPlatform/client/index.html b/Backend/ForumsPlatform/client/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
+    <link rel="stylesheet" href="styles.css">
+
+    <title>Forums Page</title>
+</head>
+<body>
+    <header>
+        <h1 class="title"> Forums Page for Bootcamp </h1>
+    </header>
+<main>
+    <form class="new-form">
+        <label for ="name">Name</label>
+        <input class="u-half-width" type="text" id="name" name="name">
+        <label for="content">Your Message</label>
+      <textarea class="u-full-width" type="text" id="content" name="content"></textarea>
+      <button class="button-primary">Post</button>
+    </form>
+    <div class="button-container">
+        <!-- <button id="loadMoreButton" class="button-primary" style="visibility: hidden">Load More Mews</button> -->
+        <p id="loadMore">Loading...</p>
+      </div>
+      <div class="loading">
+        <img src="loading.gif" alt="">
+      </div>
+      <div class="news">
+
+      </div>
+</main>
+<script src="client.js"></script>
+</body>
+</html>
diff --git a/Backend/ForumsPlatform/client/loading.gif b/Backend/ForumsPlatform/client/loading.gif
diff --git a/Backend/ForumsPlatform/client/styles.css b/Backend/ForumsPlatform/client/styles.css
@@ -0,0 +1,27 @@
+body{
+
+    background-image:url("https://images.unsplash.com/photo-1530982011887-3cc11cc85693?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max");
+    width: 100%; 
+    height: 100%; 
+
+    left: 0px; 
+    top: 0px; 
+    z-index: -1;
+}
+
+.title {
+    text-align: center ;
+}
+.new-form {
+    width: 50%;
+    margin: 0 auto;
+}
+
+.loading {
+    text-align: center;
+
+}
+.news {
+    width: 50%;
+    margin: 0 auto;
+}
diff --git a/Backend/ForumsPlatform/dbdata.JPG b/Backend/ForumsPlatform/dbdata.JPG
diff --git a/Backend/ForumsPlatform/homepage.JPG b/Backend/ForumsPlatform/homepage.JPG
diff --git a/Backend/ForumsPlatform/homepage2.JPG b/Backend/ForumsPlatform/homepage2.JPG
diff --git a/Backend/ForumsPlatform/server/.gitignore b/Backend/ForumsPlatform/server/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/Backend/ForumsPlatform/server/index.js b/Backend/ForumsPlatform/server/index.js
@@ -0,0 +1,81 @@
+//mew = ourdata || 
+//mews = news
+const express = require('express');
+const cors = require('cors');
+//const monk = require('monk');
+
+const Filter = require('bad-words');
+const rateLimit = require("express-rate-limit");
+const app = express();
+
+const db =require('monk')('localhost/news');
+// collection inside db
+const news  = db.get('news');
+
+const filter = new Filter();
+
+
+app.use(cors());
+//use bodyparser middleware-any incoming req having content type app JSON will be parsed and put in body
+app.use(express.json());
+
+
+//incoming req and outgoing res
+app.get('/', (req,res) =>{ 
+    res.json({
+        message: 'I get the Req!'
+    })
+})
+//to make sure that the user inputs all given boxes
+function isValidNews(mew) {
+    return mew.name && mew.name.toString().trim() !== '' && mew.name.toString().trim().length <= 50 &&
+      mew.content && mew.content.toString().trim() !== '' && mew.content.toString().trim().length <= 140;
+  }
+
+app.get('/news', (req,res)=>{
+    news
+    .find()
+    .then(news => {
+        res.json(news)
+    });
+});
+
+
+app.use(rateLimit({
+    windowMs: 30 * 1000, // 30 sec
+    max: 1 // limit each IP to 1 requests per windowMs
+  }));
+app.post('/news', (req, res)=>{
+
+    if (isValidNews(req.body)){
+        //put it into DB
+        const ourdatas = {
+            name: filter.clean(req.body.name.toString()),
+            content:filter.clean(req.body.content.toString()),
+            created: new Date()
+       };
+
+
+        news
+        .insert(ourdatas)
+        .then(createdData => {
+            res.json(createdData);
+            console.log(createdData)
+        });
+
+    }
+    else{
+        res.status(422);
+        res.json({
+            message:"Please enter all required fields"
+        })
+    }
+    console.log(req.body);
+})
+
+
+
+
+app.listen(5000, () =>{
+    console.log('Listening on port 5000')
+})