mirror of
https://gitea.smigz.com/smiggiddy/odin-codeprojects.git
synced 2025-07-14 13:20:37 -04:00
trying to get it right
This commit is contained in:
parent
3fd4ed9ba8
commit
2dca50ff7a
11 changed files with 206 additions and 26 deletions
|
@ -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;*/
|
||||
/*}*/
|
||||
|
|
|
@ -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();
|
Loading…
Add table
Add a link
Reference in a new issue