smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-05-10 04:05:22 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Feat signup form (#3)

Browse source 
* 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
This commit is contained in:
Smigz 2023-11-07 11:05:54 -05:00 • committed by GitHub
parent 9f764ac71f
commit a47a2cec30
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 275 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

31
signup_form/js/script.js Normal file
View file

@ -0,0 +1,31 @@
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 = "";
}
});