styling added + better templates

nodejs-mini-message-board/src/app.js

@@ -17,7 +17,7 @@ app.use(express.urlencoded({ extended: true }));
 //Logging
 app.use((req, res, next) => {
   req.time = new Date(Date.now()).toISOString();
-  console.log(req.time, req.method, req.hostname, req.path, req.ips);
+  console.log(req.time, req.method, req.hostname, req.path);
   next();
 });
 

nodejs-mini-message-board/src/controllers/indexController.js

@@ -1,5 +1,6 @@
 const db = require("../db/query");
 const { body, validationResult } = require("express-validator");
+const { dateParser } = require("../utils");
 
 const links = [
   { href: "/", text: "Home" },
@@ -7,18 +8,18 @@ const links = [
 ];
 
 const validateContent = [
-  body("message").isLength({ min: 2 }).withMessage("Must enter a message!"),
   body("username")
     .trim()
     .isLength({ min: 2, max: 25 })
-    .withMessage("Username Must be between 2 and 25 chars."),
+    .withMessage("Name must be between 2 and 25 characters."),
+  body("message").isLength({ min: 2 }).withMessage("Please enter a message."),
 ];
 
 async function indexGet(req, res, next) {
   try {
     const rows = await db.getAllMessages();
     if (rows === undefined) rows = [];
-    res.render("index", { links: links, msgs: rows });
+    res.render("index", { links: links, msgs: rows, dateParser: dateParser });
   } catch {
     res.render("index", { links: links, msgs: [] });
   }
@@ -40,7 +41,7 @@ async function newPost(req, res) {
   db.insertMessage({
     message: message,
     username: username,
-    date: new Date().toISOString(),
+    date: new Date(),
   });
   res.redirect("/");
 }

nodejs-mini-message-board/src/db.js

@@ -25,7 +25,7 @@ CREATE TABLE IF NOT EXISTS messages (
   id INTEGER PRIMARY KEY ASC,
   message TEXT,
   username VARCHAR(25),
-  date TEXT
+  date NUMBER
 );
 `;
   db.exec(SQL);

nodejs-mini-message-board/src/db/seedDb.js

@@ -5,15 +5,15 @@ CREATE TABLE IF NOT EXISTS messages (
   id INTEGER PRIMARY KEY ASC,
   message TEXT,
   username VARCHAR(25),
-  date TEXT
+  date NUMBER
 
 );
 
 INSERT INTO messages (message, username, date) 
   VALUES
-  ('this is cool', 'smig.tech', '2024-12-24T01:12:340Z'),
+  ('this is cool', 'smig.tech', '1735391440168.0'),
-  ('I like this app', 'smigz', '2024-12-25T00:32:43.540Z'),
+  ('I like this app', 'smigz', '1733577117'),
-  ('For real, it is nice', 'mikey', '2024-12-28T00:35:43.540Z')
+  ('For real, it is nice', 'mikey', '1735391626')
 `;
 
 async function main(db) {

nodejs-mini-message-board/src/public/styles.css

@@ -1,6 +1,7 @@
 :root {
   padding: 0;
   margin: 0;
+  background-color: #eff3ea;
 }
 
 .nav {
@@ -33,15 +34,48 @@
 .card {
   display: flex;
   flex-direction: column;
-  min-width: 300px;
+  max-width: 600px;
   align-items: center;
+  min-height: 150px;
+  background-color: #86a788;
+  width: 100%;
+  margin: 1rem;
+  border-radius: 15px;
+  box-shadow: 0px 1px 4px #525252;
+}
+
+.card p {
+  word-wrap: break-word;
+  font-weight: 500;
+}
+
+.card-metadata {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  width: 100%;
+  margin: 0 1rem;
+}
+
+.card-metadata > h3,
+.card-metadata > span {
+  margin: 1rem 1rem;
+}
+
+.card-metadata > span {
+  font-weight: 300;
 }
 
 .form-item {
   display: flex;
   flex-direction: column;
   padding: 10px 0;
-  min-width: 300px;
+  max-width: 600px;
+  width: 100%;
+}
+
+.form-item label {
+  font-size: 1.2rem;
 }
 
 .form-item input {
@@ -49,16 +83,41 @@
   margin: 8px 0;
   width: 100%;
   box-sizing: border-box;
-  font-size: 1rem;
+  font-size: 1.2rem;
+  border-radius: 10px;
+  border: 1px solid #525252;
+  background-color: #faf7f0;
+}
+
+.form-item textarea {
+  font-size: 1.2rem;
+  border-radius: 5px;
+  border: 1px solid #525252;
+  background-color: #faf7f0;
+}
+
+.form-item > .btn {
+  margin: 5px;
 }
 
 .btn {
   padding: 1rem;
   margin: 0 1rem;
   font-size: 1.3rem;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 0.3rem;
+  border: 2px solid #677d6a;
+  background-color: transparent;
   /*width: 100%;*/
 }
 
+.primary-btn {
+  background-color: #677d6a;
+  color: #eff3ea;
+  font-weight: 800;
+}
+
 .errors {
   color: red;
 }

nodejs-mini-message-board/src/utils.js

@@ -0,0 +1,25 @@
+function dateParser(date) {
+  /* Returns a time/date formatted string
+   * based on the age of the log entry.
+   * > 24 hrs return the date
+   * < 24 hrs > 1 hr return the number of hours
+   * otherwise return the minutes since the log was entered
+   */
+  const currentTime = new Date();
+
+  const difference = Math.floor((currentTime - date) / 1000);
+
+  if (difference >= 86400) {
+    // Return date since entry is older than a day
+    const newDate = new Date(date);
+    return newDate.toLocaleString();
+  } else if (difference >= 3600) {
+    // Return hours since log entry
+    return `${Math.floor(difference / 3600)}h`;
+  } else {
+    // Reteurn Minutes since log entry
+    return `${Math.floor(difference / 60)}m`;
+  }
+}
+
+module.exports = { dateParser };

nodejs-mini-message-board/src/views/footer.ejs

@@ -0,0 +1,2 @@
+  </body>
+</html>

nodejs-mini-message-board/src/views/header.ejs

@@ -0,0 +1,12 @@
+
+<html>
+  <head>
+    <title>Message the people</title>
+    <link rel="stylesheet" href="/styles.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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+  </head>
+  <body>
+  <!-- this should be some stuff that loads --!>
+  <%- include('navbar', {links: links}) %>

nodejs-mini-message-board/src/views/index.ejs

@@ -1,22 +1,17 @@
-<html>
+
-  <head>
+  <%- include('header') %>
-    <title>Message the people</title>
-    <link rel="stylesheet" href="/styles.css">
-  </head>
-  <body>
-  <!-- this should be some stuff that loads --!>
-  <%- include('navbar', {links: links}) %>
 	<div class="container msg-feed"> 
 	  <% msgs.forEach((msg) => { %>
 	    <div class="card">
-	     <h3><%= msg.username %></h3>
+	    <div class="card-metadata">
-	     <span><%= msg.date %></span>
+	     <h3>@<%= msg.username %></h3>
+	     <span><%= dateParser(msg.date) %></span>
+	     </div>
 	     <p><%= msg.message %></p>
 	    </div>
 	      <% }); %>
 
 </div>
 
+  <%- include('footer') %>
 
-  </body>
-</html>

nodejs-mini-message-board/src/views/msgs.ejs

@@ -1,28 +1,22 @@
 
-<html>
+<%- include('header') %>
-  <head>
-    <title>Message the people</title>
-    <link rel="stylesheet" href="/styles.css">
-  </head>
-  <body>
-<%- include('navbar', {links: links}) %>
 <%- include('partials/errors.ejs') %>
 <form method="POST" action="/new">
   <div class="container">
+    <h1 class="headline">Add a message :)</h1>
     <div class="form-item">
-      <label for="uername">Username</label>
+      <label for="uername">Name</label>
       <input type="text" id="username" name="username">
     </div>
     <div class="form-item">
       <label for="message">Message</label>
-      <input type="text" id="message" name="message">
+      <textarea id="message" name="message" rows="5"></textarea>
     </div>
     <div class="form-item">
-    <button class="btn" type="submit">Submit</button>
+    <button class="btn primary-btn" type="submit">Post</button>
     <button class="btn" type="button" onCLick="window.location='/';">Return</button>
     </div>
   </div>
 </form>
-</body>
+<%- include('footer') %>
-</html>
 <!--  vim: sts=2 sw=2 et ts=2 # -->