Add solution to part one of the express workshop exercise

data/posts.json

@@ -1,3 +1 @@
-{
-    "1467390356291": "This is my very first blog post!"
-}
+[{"blogpost":"first post"},{"blogpost":"second post"},{"blogpost":"third post"}]

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "express-workshop-forked",
+  "version": "1.0.0",
+  "description": "this is to practice basic node and express",
+  "main": "server.js",
+  "repository": "git@github.com:rajgthub/express-workshop.git",
+  "author": "raj <rraju12@gmail.com>",
+  "license": "MIT",
+  "scripts":{
+    "dev": "nodemon server.js -e js,hbs"
+  },
+  "dependencies": {
+    "express": "^4.16.3",
+    "express-formidable": "^1.0.0",
+    "hbs": "^4.0.1"
+  }
+}

public/index.html

@@ -14,7 +14,11 @@ <h1 class="title">Node Girls</h1>
         </header>
         <main>
             <div class="entry-container">
-                <!--PASTE YOUR CODE HERE!! -->
+                <h3>Create a blog post</h3>
+                <form action="/create-post" method="POST">
+                    <textarea name="blogpost" rows="10" cols="14"></textarea>
+                    <button type="submit">Send</button>
+                </form>
             </div>
 
             <br/>

public/script.js

@@ -5,74 +5,71 @@ if (document.readyState !== 'loading') {
 }
 
 function ready () {
-    getBlogposts('/get-posts');
-
+    getBlogposts("/posts");
     // send posts to server
     var form = document.querySelector('form');
     form.addEventListener('submit', function (event) {
-
         event.preventDefault(); // prevents the form from contacting our server automatically (we want to do it ourselves)
         var formActionUrl = form.action; // 'form.action' is the url '/create-post'
         var formData = new FormData(form);
-
         postBlogposts(formActionUrl, formData);
+
     });
+
 }
 
 /****
  * Function definitions
  ***/
-function postBlogposts (url, data) {
-    fetch(url, {
-        method: 'POST',
-        body: data
-    })
-    .then(function (res) {
-        res.json()
-            .then(function (json) {
-                console.log(json);
-                addBlogpostsToPage(json);
-                document.querySelector('form').reset();
-        })
+function postBlogposts(url, data) {
+  fetch(url, {
+    method: "POST",
+    body: data
+  })
+    .then(function(res) {
+      res.json().then(function(json) {
+        addBlogpostsToPage(json);
+        document.querySelector("form").reset();
+        window.location.pathname = "/"
+      });
     })
-    .catch(function (err) {
-        console.error(err)
+    .catch(function(err) {
+      console.error(err);
     });
 }
 
-function getBlogposts (url) {
+
+function getBlogposts(url) {
     fetch(url, {
         method: 'GET'
     })
-    .then(function (res) {
-        res.json()
-        .then(function (json) {
-            console.log(json);
-            addBlogpostsToPage(json);
+        .then(function (res) {
+            res.json()
+                .then(function (json) {
+                    addBlogpostsToPage(json);
+                });
+        })
+        .catch(function (err) {
+            console.error("err")
         });
-    })
-    .catch(function (err) {
-        console.error(err)
-    });
 }
 
 function addBlogpostsToPage (data) {
-    for (var blogpost in data) {
-        if (data.hasOwnProperty(blogpost)) {
-
-            var postDiv         = document.createElement('div');
-            var postText        = document.createElement('p');
-            var thumbnail       = document.createElement('img');
-            var postContainer   = document.querySelector('.post-container');
+    data.map(post => {  
+          if (post.hasOwnProperty("blogpost")) {
+            var postDiv = document.createElement("div");
+            var postText = document.createElement("p");
+            var thumbnail = document.createElement("img");
+            var postContainer = document.querySelector(".post-container");
 
             thumbnail.src = "./img/logo2.png";
             thumbnail.className = "thumbnail";
-            postText.innerHTML = data[blogpost];
+            postText.innerHTML = post.blogpost;
             postDiv.className = "post";
 
             postDiv.appendChild(thumbnail);
             postDiv.appendChild(postText);
             postContainer.appendChild(postDiv);
-        }
-    }
+          }
+    })   
 }

router/routes.js

@@ -0,0 +1,18 @@
+module.exports = ( app) => {
+    app.get('/darshboard', (req, res) => {
+        res.render('darshboard.hbs', {
+            pageTitle: "Darshboard page",
+            content: "Welcome to darshboad page",
+        })
+    })
+    app.get("/darshboard/contact", (req, res) => {
+        res.render("contact.hbs", {
+            pageTitle: "Contact page",
+        });
+    });
+    app.get("/darshboard/about", (req, res) => {
+        res.render("about.hbs", {
+            pageTitle: "About page", 
+        });
+    });
+}

server.js

@@ -0,0 +1,39 @@
+//core modules
+const fs = require('fs')
+
+//3rd party modules
+const express = require('express')
+const formidable = require("express-formidable");
+const hbs = require('hbs')
+//variables
+const port = 3000
+const pathToPostsFile = __dirname + "/data/posts.json";
+
+//create app
+const app = express()
+
+
+//serving public assets middleware
+app.use(express.static('public'))
+hbs.registerPartials(__dirname + '/views/partials')
+app.set('view engine', 'hbs')
+hbs.registerHelper("getCurrentYear", () => new Date().getFullYear());
+hbs.registerHelper("setUpper", text => text.toUpperCase());
+app.use(formidable());
+
+// router
+app.get('/posts', (req, res) => {
+    res.sendFile(pathToPostsFile);    
+})
+app.post('/create-post', (req, res) => {
+    //reading posts
+    let allposts = JSON.parse(fs.readFileSync(pathToPostsFile), 'utf8');
+    const post = req.fields;
+    allposts.push(post)
+    fs.writeFileSync(pathToPostsFile, JSON.stringify(allposts));
+    res.sendFile(pathToPostsFile);
+})
+require('./router/routes')(app) //routes for handlebars
+app.listen(port, (req, res) => {
+    console.log("Server is runnig on port:", port); 
+})

views/about.hbs

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <style>
+            .container {
+                margin: auto 25%;
+            }
+        </style>
+    <title>Handlebars example</title>
+</head>
+
+<body>
+    <section class="container">
+         {{> header}}
+        <nav>
+            <a href="/darshboard">Home</a>
+        </nav>
+        <main>{{setUpper "Welcome to about page"}}</main>
+        {{> footer}}
+    </section>
+
+</body>
+
+</html>

views/contact.hbs

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <style>
+        .container{
+            margin: auto 25%;
+        }
+    </style>
+    <title>Handlebars example</title>
+</head>
+
+<body>
+    <section class="container">
+         {{> header}}
+        <nav>
+            <a href="/darshboard">Home</a>
+        </nav>
+        <main>{{setUpper "Welcome to contact page"}}</main>
+        {{> footer}}
+    </section>
+
+</body>
+
+</html>

views/darshboard.hbs

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <style>
+            .container {
+                margin: auto 25%;
+            }
+        </style>
+    <title>Handlebars example</title>
+</head>
+
+<body>
+    <section class="container">
+         {{> header}}
+        <nav>
+            <a href="/darshboard/contact">Contact page</a>
+            <a href="/darshboard/about">About page</a>
+        </nav>
+        <main>{{setUpper "Welcome to darshboar page"}}</main>
+        {{> footer}}
+    </section>
+
+</body>
+
+</html>

views/partials/footer.hbs

@@ -0,0 +1,3 @@
+<footer>
+    <h3>Created by Raj - &copy; All rights reserved - {{getCurrentYear}}</h3>
+</footer>

views/partials/header.hbs

@@ -0,0 +1,3 @@
+<header>
+    <h1>{{pageTitle}}</h1>
+</header>