trying to get it right

keynotes.app/public/css/style.css

@@ -4,6 +4,9 @@
   --desktop-line-height: 1;
   --mobile-heading-font-size: 4em;
   --mobile-line-height: 0.8;
+  --border-radius-sm: 0.5em;
+  --border-radius-md: 0.7em;
+  --border-radius-lg: 1em;
 
   /* colors */
 
@@ -35,6 +38,9 @@ body {
   -webkit-font-smoothing: antialiased;
   font-family: "Lato, serif";
   background: var(--100-blue);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 /* 5. Improve media defaults */
@@ -99,6 +105,8 @@ nav {
 
 nav > ul {
   list-style: none;
+  text-align: center;
+  margin: 0 auto;
 }
 
 ul {
@@ -127,12 +135,13 @@ input {
 }
 
 footer {
-  justify-content: center;
+  margin-top: auto;
+  padding: 2em;
 }
 
-.full-page {
+/*.full-page {*/
-  height: 90vh;
+/*  height: 90vh;*/
-}
+/*}*/
 
 .divider {
   height: 0.25em;
@@ -290,6 +299,10 @@ footer {
 
 .card__likes {
   padding: 0;
+  font-weight: 400;
+}
+
+.timestamp {
   font-weight: 300;
 }
 
@@ -342,10 +355,24 @@ footer {
   transform-origin: bottom left;
 }
 
+.hidden {
+  display: none;
+}
+
+.social-icons {
+  gap: 0.5em;
+  justify-content: baseline;
+}
+
+.social-icons a {
+  font-size: 1.2em;
+  color: var(--800-blue);
+}
+
 @media only screen and (min-width: 750px) {
-  ul {
+  /*ul {*/
-    max-width: 60vw;
+  /*  max-width: 40vw;*/
-  }
+  /*}*/
   .hero__heading {
     margin: 0;
     font-size: var(--desktop-heading-font-size);
@@ -381,6 +408,20 @@ footer {
     gap: 0.5em;
   }
 
+  .nav__profile {
+    position: relative;
+  }
+
+  .nav__hover {
+    position: absolute;
+    background: var(--100-blue);
+    border: 2px solid black;
+    width: 100%;
+    max-width: 150px;
+    border-radius: var(--border-radius-sm);
+    z-index: 1;
+  }
+
   /*.form-item > .btn {*/
   /*  max-width: 200px;*/
   /*}*/

keynotes.app/public/js/script.js

@@ -0,0 +1,109 @@
+function usernameValidation(username) {
+  const errors = [];
+  if (username.length < 5) {
+    errors.push("*username must be at least 8 characters");
+  }
+
+  if (username.includes(" ")) {
+    errors.push("*username must not contain any spaces");
+  }
+
+  return errors;
+}
+
+function checkStringForNumber(str) {
+  for (i = 0; i < str.length; i++) {
+    if (!isNaN(str[i])) return true;
+  }
+  return false;
+}
+
+function checkStringForChar(str) {
+  return /[!#%^,\.]/.test(str);
+}
+
+function passwordValidation(password) {
+  const errors = [];
+
+  if (password.length < 8) {
+    errors.push("*password must be at least 8 characters");
+  }
+
+  if (!checkStringForNumber(password)) {
+    errors.push("*password must include a number.");
+  }
+  if (!checkStringForChar(password)) {
+    errors.push("*password must include a special character. !#%^,.");
+  }
+
+  return errors;
+}
+
+function formValidator() {
+  const username = document.querySelector('input[name="username"]');
+  const password = document.querySelector('input[name="password"]');
+  const passwordConfirmation = document.querySelector(
+    'input[name="password-confirmation"]',
+  );
+
+  if (username && password && passwordConfirmation) {
+    username.addEventListener("keyup", () => {
+      let errors = usernameValidation(username.value);
+      let errorDiv = username.nextElementSibling;
+      errorDiv.textContent = "";
+
+      if (errors.length > 0) {
+        errors.forEach((err) => {
+          const p = document.createElement("p");
+          p.textContent = err;
+          errorDiv.appendChild(p);
+        });
+      } else {
+        errorDiv.textContent = "";
+      }
+    });
+
+    password.addEventListener("keyup", (e) => {
+      let errorDiv = password.nextElementSibling;
+      errorDiv.textContent = "";
+      let errors = passwordValidation(e.target.value);
+
+      if (errors.length > 0) {
+        errors.forEach((err) => {
+          const p = document.createElement("p");
+          p.textContent = err;
+          errorDiv.appendChild(p);
+        });
+      } else {
+        errorDiv.textContent = "";
+      }
+    });
+
+    passwordConfirmation.addEventListener("keyup", (e) => {
+      let error = "*passwords do not match!";
+      let errorDiv = passwordConfirmation.nextSibling;
+
+      if (password.value !== e.target.value) {
+        errorDiv.textContent = error;
+      } else {
+        errorDiv.textContent = "";
+      }
+    });
+  }
+}
+
+function navProfileHover() {
+  const profile = document.querySelector(".nav__profile");
+  if (profile) {
+    const profileHover = document.querySelector(".nav__hover");
+    profile.addEventListener("mouseleave", () => {
+      profileHover.classList.add("hidden");
+    });
+    profile.addEventListener("mouseenter", () => {
+      profileHover.classList.remove("hidden");
+    });
+  }
+}
+
+navProfileHover();
+formValidator();

keynotes.app/src/controllers/indexController.js

@@ -66,11 +66,13 @@ function getProfile(req, res, next) {
 
   if (res.locals.currentUser) {
     if (userExists) {
-      const sumUserPosts = db.getAllNotesByUserId(userId);
+      const sumUserPosts = db.getSumNotesByUserId(userId);
+      const allPosts = db.getAllNotesByUserId(userId);
       res.render("view-profile", {
         pageTitle: "InspiredCliches | Edit Profile",
         user: userExists,
         totalPosts: sumUserPosts,
+        allPosts: allPosts,
       });
     } else {
       res.redirect("/");

keynotes.app/src/models/init.sql

@@ -31,7 +31,7 @@ INSERT OR IGNORE INTO users (username, password)
 VALUES ("jim", "$2a$10$Bmjre5WSpSSAi.nWBfLZFOlhQhbIAoY/MM7ikJz3Ho9tqeXCExaB6"),
 	("demo", "$2a$10$Vo.XmsVQVx9gGojRIdewpOap5SnhrgZ21/Im5IxhH3PC4FycM5uwC");
 
-INSERT OR REPLACE INTO messages (message_id, message, media, date, user_id)
+INSERT OR IGNORE INTO messages (message_id, message, media, date, user_id)
 VALUES
   (1, "When life gives you lemons, make lemonade.", NULL, strftime('%s', 'now')*1000, 1),
   (2, "Rome wasn’t built in a day – take your time.", NULL, strftime('%s', 'now')*1000, 1),

keynotes.app/src/models/query.js

@@ -108,12 +108,18 @@ function getUserById(userId) {
   return res;
 }
 
-function getAllNotesByUserId(userId) {
+function getSumNotesByUserId(userId) {
   const query = db.query(`SELECT COUNT(1) FROM messages WHERE user_id = $1`);
   const res = query.get({ $1: userId });
 
   return res["COUNT(1)"];
 }
+function getAllNotesByUserId(userId) {
+  const query = db.query(`SELECT * FROM messages WHERE user_id = $1`);
+  const res = query.all({ $1: userId });
+
+  return res;
+}
 
 module.exports = {
   getEveryNote,
@@ -127,5 +133,6 @@ module.exports = {
   getLikesByUser,
   getTotalLikesByMessageId,
   getUserById,
+  getSumNotesByUserId,
   getAllNotesByUserId,
 };

keynotes.app/src/views/feed.ejs

@@ -1,7 +1,4 @@
 <%- include('header') %>
-<h1 class="feed-heading">
-	<%= currentUser.username %>'s <span class="normal">feed of cliche's</span>
-</h1>
 <div class="grid">
 	<% keynotes.forEach((note) => { %>
 		<% const likedPost = userLikedPosts.find((post) =>  post.message_id == note.message_id) %>
@@ -15,7 +12,7 @@
 			<div class="flex author__meta"> 
 			<p class="card__author"><a href="/profile?userId=<%= note.user_id %>"><%= note.user %></a></p>
 			<p class="card__likes">&bull;</p>
-			<p class="card__likes"><%= new Date(note.date).toLocaleString() %></p>
+			<p class="card__likes timestamp"><%= new Date(note.date).toLocaleString() %></p>
 			</div>
 			<% if (currentUser.user_id === note.user_id) { %>
 				<a href="/delete?userId=<%= currentUser.user_id %>&messageId=<%= note.message_id %>">delete post</a>

keynotes.app/src/views/footer.ejs

@@ -1,5 +1,11 @@
-	<footer class="footer flex">
+	<footer class="container">
-	 Test 
+		<h2 class="foooter-heading">Inspired Cliches</h2>
+		<p>Making unsolicited advice inspiring.</p>
+		<div class="social-icons flex">
+			<a href="https://github.com/smiggiddy/odin-codeprojects" target="_blank"><i class="fa-brands fa-github"></i></a>
+			<a href="https://smig.tech" target="_blank"><i class="fa-solid fa-link"></i></a>
+		</div>
+		<p> © Copyright <%= new Date(Date.now()).getFullYear() %></p>
 	</footer>
 	<script src="/js/script.js"></script>
 	</body>

keynotes.app/src/views/header.ejs

@@ -18,9 +18,15 @@
 			<ul class="container flex">
 				<li><a class="hover__underline" href="/">Home</a></li>
 				<% if (currentUser) { %>
-				<li><a class="hover__underline" href="/new" class="new-link">New Cliche</a></li>
+				<li class="nav__profile"><%= currentUser.username %>
-				<li><a class="hover__underline" href="/profile?userId=<%= currentUser.user_id %>">Profile</a></li>
+				<div class="hidden nav__hover">
-				<li><a class="hover__underline" href="/auth/logout">Logout</a></li>
+					<ul class="container flex col">
+					<li><a class="hover__underline" href="/profile?userId=<%= currentUser.user_id %>">view profile</a></li>
+					<li><a class="hover__underline" href="/new" class="new-link">new cliche</a></li>
+					<li><a class="hover__underline" href="/auth/logout">logout</a></li>
+					</ul>
+					</div>
+				</li>
 				<% } else { %>
 				<li><a class="hover__underline" href="/auth/login">Login</a></li>
 				<% }; %>

keynotes.app/src/views/login.ejs

@@ -21,7 +21,9 @@
 			<div class="form-item-row flex">
 				<button type="submit" class="btn btn__form">Login</button>
 			</div>
-			<a href="/auth/register">Need an account? Click here!</a>
+			<p>Need an account?
+				<a href="/auth/register">Click here!</a>
+			</p>
 		
 	</form>
 </main>

keynotes.app/src/views/register.ejs

@@ -14,11 +14,12 @@
 		<div class="form-item flex">
 			<label for="username">username</label>
 			<input type="text" name="username" required/>
+			<div class="error"></div>
 		</div>
 		<div class="form-item flex">
 			<label for="password">password</label>
 			<input type="password" name="password" required/>
-			<div class="error"></div>
+			<div class="error flex col"></div>
 		</div>
 		<div class="form-item flex">
 			<label for="password-confirmation">confirm password</label>

keynotes.app/src/views/view-profile.ejs

@@ -1,11 +1,20 @@
 <%- include("header") %>
 
 <div class="full-page container center-horizontal">
+	<div class="container">
 		<h1 class="username"><%= user.username %></h1>
 		<% if(currentUser.user_id === user.user_id ) { %>
 			<p>This is your profile page.</p>
 		<% }; %>
-	<p><%= totalPosts %> Posts</p>
+	</div>
+	<div class="container">
+		<h2><%= user.username %>'s <%= totalPosts %> post(s): </h2>
+		<% allPosts.forEach((post) => { %>
+			<div class="container">
+			<p>"<%= post.message %>"</p>
+			</div>
+		<% }); %>
+	</div>
 
 </div>
 <%- include("footer") %>