From 8c0a4a773e2c61368001e859053e08b135909b22 Mon Sep 17 00:00:00 2001 From: Mike Smith <89040888+smiggiddy@users.noreply.github.com> Date: Sat, 28 Dec 2024 14:32:07 -0500 Subject: [PATCH] styling added + better templates --- nodejs-mini-message-board/src/app.js | 2 +- .../src/controllers/indexController.js | 9 +-- nodejs-mini-message-board/src/db.js | 2 +- nodejs-mini-message-board/src/db/seedDb.js | 8 +-- .../src/public/styles.css | 65 ++++++++++++++++++- nodejs-mini-message-board/src/utils.js | 25 +++++++ .../src/views/footer.ejs | 2 + .../src/views/header.ejs | 12 ++++ nodejs-mini-message-board/src/views/index.ejs | 19 ++---- nodejs-mini-message-board/src/views/msgs.ejs | 18 ++--- 10 files changed, 125 insertions(+), 37 deletions(-) create mode 100644 nodejs-mini-message-board/src/utils.js create mode 100644 nodejs-mini-message-board/src/views/footer.ejs create mode 100644 nodejs-mini-message-board/src/views/header.ejs diff --git a/nodejs-mini-message-board/src/app.js b/nodejs-mini-message-board/src/app.js index 2de5dab..d59c884 100644 --- a/nodejs-mini-message-board/src/app.js +++ b/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(); }); diff --git a/nodejs-mini-message-board/src/controllers/indexController.js b/nodejs-mini-message-board/src/controllers/indexController.js index a5fdcd9..df77caa 100644 --- a/nodejs-mini-message-board/src/controllers/indexController.js +++ b/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("/"); } diff --git a/nodejs-mini-message-board/src/db.js b/nodejs-mini-message-board/src/db.js index 33d382c..52dd24f 100644 --- a/nodejs-mini-message-board/src/db.js +++ b/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); diff --git a/nodejs-mini-message-board/src/db/seedDb.js b/nodejs-mini-message-board/src/db/seedDb.js index 69f0df0..aadb6aa 100644 --- a/nodejs-mini-message-board/src/db/seedDb.js +++ b/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'), - ('I like this app', 'smigz', '2024-12-25T00:32:43.540Z'), - ('For real, it is nice', 'mikey', '2024-12-28T00:35:43.540Z') + ('this is cool', 'smig.tech', '1735391440168.0'), + ('I like this app', 'smigz', '1733577117'), + ('For real, it is nice', 'mikey', '1735391626') `; async function main(db) { diff --git a/nodejs-mini-message-board/src/public/styles.css b/nodejs-mini-message-board/src/public/styles.css index dc7143d..d3d672b 100644 --- a/nodejs-mini-message-board/src/public/styles.css +++ b/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; } diff --git a/nodejs-mini-message-board/src/utils.js b/nodejs-mini-message-board/src/utils.js new file mode 100644 index 0000000..a1d6166 --- /dev/null +++ b/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 }; diff --git a/nodejs-mini-message-board/src/views/footer.ejs b/nodejs-mini-message-board/src/views/footer.ejs new file mode 100644 index 0000000..b605728 --- /dev/null +++ b/nodejs-mini-message-board/src/views/footer.ejs @@ -0,0 +1,2 @@ + + diff --git a/nodejs-mini-message-board/src/views/header.ejs b/nodejs-mini-message-board/src/views/header.ejs new file mode 100644 index 0000000..6692306 --- /dev/null +++ b/nodejs-mini-message-board/src/views/header.ejs @@ -0,0 +1,12 @@ + + + + Message the people + + + + + + + + <%- include('navbar', {links: links}) %> diff --git a/nodejs-mini-message-board/src/views/index.ejs b/nodejs-mini-message-board/src/views/index.ejs index a279265..afe34f1 100644 --- a/nodejs-mini-message-board/src/views/index.ejs +++ b/nodejs-mini-message-board/src/views/index.ejs @@ -1,22 +1,17 @@ - - - Message the people - - - - - <%- include('navbar', {links: links}) %> + + <%- include('header') %>
<% msgs.forEach((msg) => { %>
-

<%= msg.username %>

- <%= msg.date %> +
+

@<%= msg.username %>

+ <%= dateParser(msg.date) %> +

<%= msg.message %>

<% }); %>
+ <%- include('footer') %> - - diff --git a/nodejs-mini-message-board/src/views/msgs.ejs b/nodejs-mini-message-board/src/views/msgs.ejs index 0513a5b..740e66c 100644 --- a/nodejs-mini-message-board/src/views/msgs.ejs +++ b/nodejs-mini-message-board/src/views/msgs.ejs @@ -1,28 +1,22 @@ - - - Message the people - - - -<%- include('navbar', {links: links}) %> +<%- include('header') %> <%- include('partials/errors.ejs') %>
+

Add a message :)

- +
- +
- +
- - +<%- include('footer') %>