trying to get it right

This commit is contained in:
Smigz 2025-03-21 00:12:12 -04:00
parent 3fd4ed9ba8
commit 2dca50ff7a
11 changed files with 206 additions and 26 deletions

View file

@ -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;*/
/*}*/

View file

@ -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();