All gigs display fix

app.js

@@ -3,16 +3,26 @@ const exphbs = require("express-handlebars");
 const bodyParser = require("body-parser");
 const path = require("path");
 const routes = require("./controllers");
-
+const Handlebars = require("handlebars");
+const {
+  allowInsecurePrototypeAccess,
+} = require("@handlebars/allow-prototype-access");
 //Database
+
 const db = require("./config/database");
 // const { Sequelize } = require("sequelize/types");
 
 const app = express();
 const PORT = process.env.PORT || 5000;
 
-//Handlebars
-app.engine("handlebars", exphbs.engine({ defaultLayout: "main" }));
+//Handlebars (non Handlebars bug requires InsecurePrototypeAccess to work)
+app.engine(
+  "handlebars",
+  exphbs.engine({
+    handlebars: allowInsecurePrototypeAccess(Handlebars),
+    defaultLayout: "main",
+  })
+);
 app.set("view engine", "handlebars");
 
 // Body Parser
@@ -28,8 +38,6 @@ app.use(routes);
 //test DB
 // db.authenticate().then(() => console.log("Database connected..."));
 
-
-
 db.sync({ force: false }).then(() => {
   app.listen(PORT, console.log(`Server Started on port ${PORT}`));
 });

controllers/homeRoutes.js

@@ -2,11 +2,12 @@ const express = require("express");
 const router = express.Router();
 const Gig = require("../models/Gig");
 const Sequelize = require("sequelize");
+var exphbs = require("express-handlebars");
 const Op = Sequelize.Op;
 
 router.get("/", (req, res) => {
-    res.render("index")
-})
+  res.render("index");
+});
 
 // Get gig list
 router.get("/allGigs", (req, res) => {
@@ -16,24 +17,24 @@ router.get("/allGigs", (req, res) => {
         gigs,
       })
     )
-    .catch((err) => console.log(err))
-    });
+    .catch((err) => console.log(err));
+});
 
 // Display add gig form
 router.get("/addGigs", (req, res) => {
-    res.render("add")
-})
+  res.render("add");
+});
 
 // Search for gigs
 
 router.get("/search", (req, res) => {
-    let { term } = req.query;
-  
-    term = term.toLowerCase();
-  
-    Gig.findAll({ where: { technologies: { [Op.like]: "%" + term + "%" } } })
-      .then((gigs) => res.render("search", { gigs }))
-      .catch((err) => console.log(err));
-  });
-
-module.exports = router
+  let { term } = req.query;
+
+  term = term.toLowerCase();
+
+  Gig.findAll({ where: { technologies: { [Op.like]: "%" + term + "%" } } })
+    .then((gigs) => res.render("search", { gigs }))
+    .catch((err) => console.log(err));
+});
+
+module.exports = router;

package.json

@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/Corey96/python-gig#readme",
   "dependencies": {
+    "@handlebars/allow-prototype-access": "^1.0.5",
     "bcrypt": "^5.0.1",
     "body-parser": "^1.20.0",
     "bootstrap": "^5.1.3",
@@ -28,5 +29,8 @@
     "nodemon": "^2.0.15",
     "pg": "^8.7.3",
     "sequelize": "^6.18.0"
+  },
+  "devDependencies": {
+    "handlebars": "^4.5.0"
   }
 }

public/css/style.css

@@ -14,7 +14,7 @@
 body {
   font-family: 'Lato', sans-serif;
   margin: 0;
-  color: #333;
+  color: #fff;
   background: #f4f4f4;
 }
 
@@ -100,16 +100,18 @@ header.inner {
   background: var(--primary-hover-color);
   border: 1px solid var(--primary-hover-color);
 }
-
-/* Home Search */
-.search-wrap {
-  /* background: url(../img/showcase.jpg) no-repeat center center fixed / cover; */
+body {
   background: url(../img/gigsPython.jpg) no-repeat center center fixed; 
-  -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
-  height: 100vh;
+  -webkit-background-size: cover;
+  min-height: 100vh;
+}
+/* Home Search */
+.search-wrap {
+
+ margin-top: 8cm;
   width: 100%;
   padding: 1.3rem 3rem;
   display: flex;

public/js/add-gigs.js

@@ -30,4 +30,4 @@ const newFormHandler = async (event) => {
   }
 };
 
-document.querySelector(".addGigs").addEventListener("submit", newFormHandler);
+document.querySelector(".add-gigs").addEventListener("submit", newFormHandler);