mirror of
https://gitea.smigz.com/smiggiddy/odin-codeprojects.git
synced 2024-12-26 22:30:44 -05:00
Smig
a47a2cec30
* initial commit * feat: add html skeleton * feat: added div for forms * feat: add more styling * feat: more styling * feat: fixed form field alignment * feat: format layout and shiz * feat: add logo + transparent box * feat: add color scheme * feat: add h1 tags * feat: remove placeholders/add text colors * feat: basic mobile layout * feat: add javascript * feat: added javascript error validation * feat: buttons/links completed
31 lines
1 KiB
JavaScript
31 lines
1 KiB
JavaScript
const name = document.querySelector('#name'),
|
|
email = document.querySelector('#email'),
|
|
password = document.querySelector('#password'),
|
|
passwordConfirmation = document.querySelector('#password-confirmation'),
|
|
formInputs = document.querySelectorAll('.form-input')
|
|
|
|
password.addEventListener('keyup', e => {
|
|
let error = '*Password must be at least 8 characters!';
|
|
let errorDiv = password.nextElementSibling;
|
|
|
|
if (password.value.length < 8) {
|
|
password.style.borderColor = "#EF6262";
|
|
errorDiv.textContent = error;
|
|
} else {
|
|
password.style.borderColor = "";
|
|
errorDiv.textContent = "";
|
|
}
|
|
})
|
|
|
|
passwordConfirmation.addEventListener('keyup', e => {
|
|
let error = '*Passwords do not match!';
|
|
let errorDiv = passwordConfirmation.nextElementSibling;
|
|
|
|
if (password.value !== e.target.value ) {
|
|
passwordConfirmation.style.borderColor = "#EF6262";
|
|
errorDiv.textContent = error;
|
|
} else {
|
|
passwordConfirmation.style.borderColor = "";
|
|
errorDiv.textContent = "";
|
|
}
|
|
});
|