formatted code and rewerote main.handlebars

fredm23579 · Apr 13, 2024 · ff49530 · ff49530
1 parent e59ac52
commit ff49530
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 80 deletions.
diff --git a/models/Comment.js b/models/Comment.js
@@ -1,7 +1,7 @@
 const { Model, DataTypes } = require('sequelize'); // import sequelize (https://sequelize.org/docs/v6/core-concepts/model-basics/)
-const sequelize = require('../config/connection'); 
+const sequelize = require('../config/connection');
 
-class Comment extends Model {} // Comment model (https://sequelize.org/docs/v6/core-concepts/model-basics/)
+class Comment extends Model { } // Comment model (https://sequelize.org/docs/v6/core-concepts/model-basics/)
 
 Comment.init(  // Comment model (https://sequelize.org/docs/v6/core-concepts/model-basics/) 
   {

diff --git a/models/Post.js b/models/Post.js
@@ -1,7 +1,7 @@
 const { Model, DataTypes } = require('sequelize'); // import sequelize (https://sequelize.org/docs/v6/core-concepts/model-basics/)
 const sequelize = require('../config/connection'); // import connection object from connection.js (https://sequelize.org/docs/v6/core-concepts/connections-and-transactions/)
 
-class Post extends Model {} // Post model (https://sequelize.org/docs/v6/core-concepts/model-basics/)
+class Post extends Model { } // Post model (https://sequelize.org/docs/v6/core-concepts/model-basics/)
 
 Post.init(  // Post model (https://sequelize.org/docs/v6/core-concepts/model-basics/)
   {
@@ -15,7 +15,7 @@ Post.init(  // Post model (https://sequelize.org/docs/v6/core-concepts/model-bas
       type: DataTypes.STRING, // data type (https://sequelize.org/master/identifiers.html) (https://sequelize.org/docs/v6/core-concepts/model-basics/#data-types)
       allowNull: false, // allow null (https://sequelize.org/docs/v6/core-concepts/model-basics/#allowing-nulls) (https://sequelize.org/docs/v6/core-concepts/model-basics/#uniques)
     },
-      content: { // content column (https://sequelize.org/docs/v6/core-concepts/model-basics/#column-options) (https://sequelize.org/docs/v6/core-concepts/model-basics/#uniques)
+    content: { // content column (https://sequelize.org/docs/v6/core-concepts/model-basics/#column-options) (https://sequelize.org/docs/v6/core-concepts/model-basics/#uniques)
       type: DataTypes.STRING, // data type (https://sequelize.org/master/identifiers.html) (https://sequelize.org/docs/v6/core-concepts/model-basics/#data-types)
       allowNull: false, // allow null (https://sequelize.org/docs/v6/core-concepts/model-basics/#allowing-nulls) (https://sequelize.org/docs/v6/core-concepts/model-basics/#uniques)
     },

diff --git a/models/User.js b/models/User.js
@@ -38,8 +38,8 @@ User.init(  // User model (https://sequelize.org/docs/v6/core-concepts/model-bas
     },
     sequelize, // for connecting to db with sequelize (default is ./config/connection.js) (https://sequelize.org/docs/v6/core-concepts/connections-and-transactions/)
     freezeTableName: true,   // for connecting to db with sequelize (default is ./config/connection.js) (https://sequelize.org/docs/v6/core-concepts/model-basics/)
-    underscored: true, 
-    modelName: 'user', 
+    underscored: true,
+    modelName: 'user',
   }
 );
 

diff --git a/public/css/style.css b/public/css/style.css
@@ -1,5 +1,5 @@
-html { 
-  background-color: #5f76db; 
+html {
+  background-color: #5f76db;
 }
 
 main {
@@ -38,12 +38,11 @@ main {
 }
 
 .link-button {
-	background: none;
-	color: inherit;
-	border: none;
-	padding: 0;
-	font: inherit;
-	cursor: pointer;
-	outline: inherit;
-}
-
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}
diff --git a/public/js/app.js b/public/js/app.js
@@ -10,15 +10,15 @@ cancelButton.classList.add("button"); // add the button class
 cancelButton.style.display = "none"; // hide the cancel button
 
 // show and hide new post form and cancel button when clicked on the new post button
-newPostButton.addEventListener("click", function() { // add an event listener to the new post button when clicked on the new post button
+newPostButton.addEventListener("click", function () { // add an event listener to the new post button when clicked on the new post button
   newPostButton.style.display = "none";  // hide the new post button when clicked on the new post button
   cancelButton.style.display = "block"; // show the cancel button  when clicked on the cancel button
   newPostForm.style.display = "block"; // show the new post form  when clicked on the cancel button or the new post button
 });
- 
+
 
 // show and hide new post form and cancel button when clicked on the new post button or the cancel button 
-cancelButton.addEventListener("click", function() { // add an event listener to the cancel button when clicked on the cancel button
+cancelButton.addEventListener("click", function () { // add an event listener to the cancel button when clicked on the cancel button
   newPostButton.style.display = "block"; // show the new post button when clicked on the cancel button
   cancelButton.style.display = "none"; // hide the cancel button when clicked on the cancel button
   newPostForm.style.display = "none"; // hide the new post form when clicked on the cancel button or the new post button

diff --git a/seeds/seed.js b/seeds/seed.js
@@ -1,9 +1,9 @@
 const sequelize = require('../config/connection'); // Import the connection object from config/connection.js
 const { User, Post, Comment } = require('../models'); // Import the User, Post, and Comment models
 
-const userData =  require('./userData.json'); // Import the userData.json file
-const postData =  require('./postData.json'); // Import the postData.json file
-const commentData =  require('./commentData.json'); // Import the commentData.json file
+const userData = require('./userData.json'); // Import the userData.json file
+const postData = require('./postData.json'); // Import the postData.json file
+const commentData = require('./commentData.json'); // Import the commentData.json file
 
 // seed database function (https://sequelize.org/docs/v6/core-concepts/assocs/#one-to-many) that synchronizes the database with the models and seeds the database with the data from the JSON files
 const seedDatabase = async () => { // seedDatabase function (https://sequelize.org/docs/v6/core-concepts/assocs/#one-to-many)

diff --git a/server.js b/server.js
@@ -68,17 +68,17 @@ app.use((req, res, next) => { // middleware for checking if session has expired
 
 // refreshes expiration time so site doesn't log out active users (https://expressjs.com/en/guide/behind-proxies.html) 
 app.use((req, res, next) => { // middleware for checking if session has expired (https://expressjs.com/en/guide/behind-proxies.html)
-  if (req.session.expires) {   
+  if (req.session.expires) {
     const extendedExpirationTime = new Date(Date.now() + 30 * 60 * 1000); // 30 minutes (30 * 60 * 1000) = 30 minutes (default is 10 minutes)
     req.session.expires = extendedExpirationTime; // refreshes expiration time so site doesn't log out active users (https://expressjs.com/en/guide/behind-proxies.html)
   }
   next(); // next middleware (https://expressjs.com/en/guide/behind-proxies.html)
 });
 
- // middleware for checking if user is logged in or authenticated via session store (https://expressjs.com/en/guide/behind-proxies.html)
+// middleware for checking if user is logged in or authenticated via session store (https://expressjs.com/en/guide/behind-proxies.html)
 sequelize.sync({ force: false }).then(() => {   // syncs sequelize with db (default is ./config/connection.js)
   app.listen(PORT, () =>    // listens on port 3001 (default is 3001) 
-    console.log( 
+    console.log(
       `\nServer running on port ${PORT}. Visit http://localhost:${PORT} and create an account!` // logs server running on port 3001 (default is 3001) (https://expressjs.com/en/guide/behind-proxies.html
     )
   );

diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
@@ -1,61 +1,72 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Travel Blog | stay connected</title>
-  <link rel="stylesheet" href="/css/bulma.css">
-  <link rel="stylesheet" href="/css/style.css">
-</head>
-<body class="is-flex-direction-column">
-  <header class="is-flex is-full">
-    <nav class="navbar is-full is-flex-direction-row is-justify-content-space-around is-align-items-center" role="navigation" aria-label="main navigation">
-      <div class="navbar-brand">
-        <a class="navbar-item" href="/">
-          <h1 class="is-size-3">Travel Blog</h1>
-        </a>
-
-        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-        </a>
-      </div>
-
-      <div id="navbarBasicExample" class="navbar-menu">
-        <div class="navbar-end">
-          <a class="navbar-item is-size-5" href="/">
-            home
-          </a>
-
-          <a class="navbar-item is-size-5" href="/dashboard">
-            dashboard
-          </a>
-
-          {{#if loggedIn}}
-          <a class="navbar-item is-size-5">
-            <form method="post" action="/logout" class="inline">
-              <input type="hidden" name="extra_submit_param" value="extra_submit_value">
-              <button type="submit" name="logout" value="submit_value" class="link-button">
-                log out
-              </button>
-            </form>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Travel Blog | stay connected</title>
+    <link rel="stylesheet" href="/css/bulma.css">
+    <link rel="stylesheet" href="/css/style.css">
+  </head>
+  <body class="is-flex-direction-column">
+    <header class="is-flex is-full">
+      <nav
+        class="navbar is-full is-flex-direction-row is-justify-content-space-around is-align-items-center"
+        role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+          <a class="navbar-item" href="/">
+            <h1 class="is-size-3">Travel Blog</h1>
           </a>
-          {{else}}
-          <a class="navbar-item is-size-5" href="/login">
-            log in
+
+          <a role="button" class="navbar-burger" aria-label="menu"
+            aria-expanded="false" data-target="navbarBasicExample">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
           </a>
-          {{/if}}
         </div>
+
+        <div id="navbarBasicExample" class="navbar-menu">
+          <div class="navbar-end">
+            <a class="navbar-item is-size-5" href="/">
+              home
+            </a>
+
+            <a class="navbar-item is-size-5" href="/dashboard">
+              dashboard
+            </a>
+
+            {{#if loggedIn}}
+            <a class="navbar-item is-size-5">
+              <form method="post" action="/logout" class="inline">
+                <input type="hidden" name="extra_submit_param"
+                  value="extra_submit_value">
+                <button type="submit" name="logout" value="submit_value"
+                  class="link-button">
+                  log out
+                </button>
+              </form>
+            </a>
+            {{else}}
+            <a class="navbar-item is-size-5" href="/login">
+              log in
+            </a>
+            {{/if}}
+          </div>
+        </div>
+      </nav>
+    </header>
+    <main class="is-flex is-flex-direction-column pt-5 column is-half">
+      {{{body}}}
+      <div class="has-text-centered">
+        <img class="is-fullwidth"
+          src="/public/img/clear-water-beaches-florida-2048x917.jpg"
+          alt="travel blog image" aria-label="travel" display="block-like">
       </div>
-    </nav>
-  </header>
-  <main class="is-flex is-flex-direction-column pt-5 column is-half">
-    {{{body}}}
-    <img src="/public/img/clear-water-beaches-florida-2048x917.jpg" alt="travel blog image">
-  </main>
-  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
-  <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
-  <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
-</body>
+    </main>
+    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+    <script type="module"
+      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule
+      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
+  </body>
 </html>