Add styling

package.json

@@ -40,4 +40,4 @@
     "nodemon": "^2.0.4",
     "supertest": "^4.0.2"
   }
-}
+}

public/main.css

@@ -1,6 +1,11 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
 body {
-  font-family: 'Roboto', sans-serif;
+
+  background: rgb(134,69,232);
+  background: radial-gradient(circle, rgba(134,69,232,1) 0%, rgba(91,115,12,1) 16%, rgba(44,52,19,1) 30%, rgba(125,133,43,1) 43%, rgba(25,32,7,1) 50%, rgba(24,31,6,1) 53%, rgba(108,154,27,1) 78%, rgba(3,24,6,1) 99%);
+  background-repeat: no-repeat;
+    background-attachment: fixed;
 }
 
 .container {
@@ -9,10 +14,44 @@ body {
   justify-content: center;
 }
 
+.never-end-text {
+
+  font-family: 'Indie Flower', cursive;
+  padding: 100px;
+  font-size: 30px;
+  letter-spacing: -1.4px;
+  word-spacing: -0.2px;
+  color: #dcdddd;
+  font-weight: normal;
+  text-decoration: none;
+  font-style: normal;
+  font-variant: normal;
+  text-transform: none;
+}
 
+input {
+  padding: 5px;
+  margin-right: 5px;
+}
 
 .title {
+  font-family: 'Creepster', cursive;
+  font-size: 100px;
+  margin-top: 75px;
+  margin-bottom: 15px;
   text-align: center;
+  color: #8acfc0;
+  background-color: transparent;
+  text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
 }
 
+.instructions {
+  font-family: 'Creepster', cursive;
+  font-size: 40px;
+  margin-top: 15px;
+  text-align: center;
+  color: #8acfc0;
+  background-color: transparent;
+  text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
+}
 

routes.js

@@ -1,39 +1,37 @@
-const fs = require('fs')
-const path = require('path')
+const fs = require('fs');
+const path = require('path');
 const express = require('express');
-const { getStoryData } = require('./utils')
+const { getStoryData } = require('./utils');
 
 const router = express.Router();
 module.exports = router;
 
 router.post('/', (req, res) => {
-  //Create an object of the updated story data from the request body
-  const newWord = req.body
+  // Create an object of the updated story data from the request body
+  const newWord = req.body;
   // Read in the JSON file and locate the puppy we are going to update
   getStoryData((err, storyData) => {
     if (err) {
-      res.status(500).send(err.message)
-      return
+      res.status(500).send(err.message);
+      return;
     }
-    //Update the story with the new word
-    let newStoryData = storyData + ' ' + newWord
-    //Write the entire story back to the file
+    // Update the story with the new word
+    const newStoryData = `${storyData} ${newWord}`;
+    // Write the entire story back to the file
     try {
-      const filepath = path.join(__dirname, 'story.txt')
-      //write back to the file
-      fs.writeFile(filepath, newStoryData, "utf8", (err) =>{
-        if(err){
-          console.error('Story could not be changed')
-          return
+      const filepath = path.join(__dirname, 'story.txt');
+      // write back to the file
+      fs.writeFile(filepath, newStoryData, 'utf8', (err) => {
+        if (err) {
+          console.error('Story could not be changed');
         }
-      })
+      });
     } catch {
-      console.error('Something went wrong with the Story')
-    } 
-  })  
-  res.redirect(`${req.baseUrl}`)
-})
-
+      console.error('Something went wrong with the Story');
+    }
+  });
+  res.redirect(`${req.baseUrl}`);
+});
 
 // router.get('/', (req, res) => {
 //   res.render('home');

views/home.hbs

@@ -1,4 +1,9 @@
 <div class="container">
-
-
+ <div class="never-end-text">
+    <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p>
+ </div>
+
+ <input type="text">
+ <button>Add next word</button>
+
 </div>

views/layouts/main.hbs

@@ -2,17 +2,21 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Nerver Ending Story</title>
+    <title class="never-end-title">The Never Ending Story..</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Creepster&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/main.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
   </head>
   <body>
     <div class="app">
-      <h1 class="title">Nerver Ending Story</h1>
-      <a class="nav" href="/">Home</a>
+      <h1 class="title">The Never Ending Story...</h1>
+      <h2 class="instructions">Continue the story by adding one word at a time...</h2>
       {{{body}}}
     </div>
   </body>
 </html>
+ {{!-- Check back to see where the story goes! --}}