diff --git a/keynotes.app/public/css/style.css b/keynotes.app/public/css/style.css index c03c3fb..dd43075 100644 --- a/keynotes.app/public/css/style.css +++ b/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 { - height: 90vh; -} +/*.full-page {*/ +/* 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 { - max-width: 60vw; - } + /*ul {*/ + /* 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;*/ /*}*/ diff --git a/keynotes.app/public/js/script.js b/keynotes.app/public/js/script.js index e69de29..12f5e24 100644 --- a/keynotes.app/public/js/script.js +++ b/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(); diff --git a/keynotes.app/src/controllers/indexController.js b/keynotes.app/src/controllers/indexController.js index 15fbced..2314b6a 100644 --- a/keynotes.app/src/controllers/indexController.js +++ b/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("/"); diff --git a/keynotes.app/src/models/init.sql b/keynotes.app/src/models/init.sql index 601b0c7..5e2c3a9 100644 --- a/keynotes.app/src/models/init.sql +++ b/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), diff --git a/keynotes.app/src/models/query.js b/keynotes.app/src/models/query.js index ea57016..6ec5f50 100644 --- a/keynotes.app/src/models/query.js +++ b/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, }; diff --git a/keynotes.app/src/views/feed.ejs b/keynotes.app/src/views/feed.ejs index 3d5a393..2188d2a 100644 --- a/keynotes.app/src/views/feed.ejs +++ b/keynotes.app/src/views/feed.ejs @@ -1,7 +1,4 @@ <%- include('header') %> -

- <%= currentUser.username %>'s feed of cliche's -

<% keynotes.forEach((note) => { %> <% const likedPost = userLikedPosts.find((post) => post.message_id == note.message_id) %> @@ -15,7 +12,7 @@

<%= note.user %>

- +
<% if (currentUser.user_id === note.user_id) { %> delete post diff --git a/keynotes.app/src/views/footer.ejs b/keynotes.app/src/views/footer.ejs index b0d99e9..fc5b341 100644 --- a/keynotes.app/src/views/footer.ejs +++ b/keynotes.app/src/views/footer.ejs @@ -1,5 +1,11 @@ -