Solution for week-1 express workshop

data/posts.json

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

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "express_week_1",
+  "version": "1.0.0",
+  "description": "This is the exercise that accompanies the first Node class. Based on the Node Girls Workshop https://github.com/node-girls/express-workshop",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CodeYourFuture/express-workshop.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/CodeYourFuture/express-workshop/issues"
+  },
+  "homepage": "https://github.com/CodeYourFuture/express-workshop#readme",
+  "dependencies": {
+    "express": "^4.16.3",
+    "express-formidable": "^1.0.0",
+    "hbs": "^4.0.1"
+  }
+}

public/index.html

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

public/script.js

@@ -5,49 +5,45 @@ if (document.readyState !== 'loading') {
 }
 
 function ready () {
-    getBlogposts('/get-posts');
-
+    getBlogposts("/posts");
     // send posts to server
-    var form = document.querySelector('form');
+    const 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);
-
+        const formActionUrl = form.action; // 'form.action' is the url '/post'
+        const 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.href = "http://localhost:3000/"
+      });
     })
-    .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);
         });
     })
@@ -57,22 +53,21 @@ function getBlogposts (url) {
 }
 
 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');
+    JSON.parse(data).map(post => {  
+          if (post.hasOwnProperty("blogpost")) {
+            const postDiv = document.createElement("div");
+            const postText = document.createElement("p");
+            const thumbnail = document.createElement("img");
+            const 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);
-        }
-    }
-}
+          }
+    })   
+}

server.js

@@ -0,0 +1,38 @@
+//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
+
+//create app
+const app = express()
+
+//serving public assets middleware
+app.use(express.static('public', {'extensions': ['html']}))
+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.json(fs.readFileSync(__dirname + "/data/posts.json", "utf8"));   
+})
+app.post('/post', (req, res) => {
+    const pathPostsFile = __dirname + "/data/posts.json";
+    const allposts = JSON.parse(fs.readFileSync(pathPostsFile).toString());
+
+    const post = req.fields;
+    allposts.push(post)
+    fs.writeFileSync(pathPostsFile, JSON.stringify(allposts));
+    res.json(fs.readFileSync(pathPostsFile, "utf8"));
+})
+
+app.listen(port, (req, res) => {
+    console.log("Server is runnig on port:", port); 
+})