From ade64d8f5878f51ad0cfbbec1d7f3d2d47f04db3 Mon Sep 17 00:00:00 2001 From: Cesar Monroy Date: Sun, 14 May 2023 17:01:15 -0600 Subject: constants and section --- index.html | 48 +++++++++++++++++++++++++----------------------- js/login.js | 55 +++++++++++++++++++++++++++---------------------------- 2 files changed, 52 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index 47d74c2..c7dd052 100644 --- a/index.html +++ b/index.html @@ -7,33 +7,35 @@ - +

Log in

- +

Log in

+ +

diff --git a/js/login.js b/js/login.js index 681243c..d51be90 100644 --- a/js/login.js +++ b/js/login.js @@ -1,4 +1,4 @@ -const USERNAME = document.getElementById("username"); +const USERNAME_INPUT = document.getElementById("username"); const USERNAME_ICON_CANCEL = document.getElementById("icon-cancel__username"); const USERNAME_ICON_CHECK = document.getElementById("icon-check__username"); const USERNAME_INPUT_ERROR = document.getElementById("input-error__username"); @@ -7,35 +7,34 @@ const PASSWORD_ICON_CANCEL = document.getElementById("icon-cancel__password"); const PASSWORD_ICON_CHECK = document.getElementById("icon-check__password"); const PASSWORD_INPUT_ERROR = document.getElementById("input-error__password"); -username.addEventListener('input', validate_username); -password.addEventListener('input', validate_password); +USERNAME_INPUT.addEventListener('input', validate_username); +PASSWORD.addEventListener('input', validate_password); function validate_username(e){ - const USERNAME = e.target.value; - var valid_username = /^[a-zA-Z0-9\_\-]{4,16}$/.test(USERNAME); - if(valid_username){ - USERNAME_ICON_CHECK.style.display = "block"; - USERNAME_ICON_CANCEL.style.display = "none"; - USERNAME_INPUT_ERROR.style.display = "none"; - } - if(!valid_username){ - USERNAME_ICON_CHECK.style.display = "none"; - USERNAME_ICON_CANCEL.style.display = "block"; - USERNAME_INPUT_ERROR.style.display = "block"; - } + const USERNAME = e.target.value; + var valid_username = /^[a-zA-Z0-9\_\-]{4,16}$/.test(USERNAME); + if(valid_username){ + USERNAME_ICON_CHECK.style.display = "block"; + USERNAME_ICON_CANCEL.style.display = "none"; + USERNAME_INPUT_ERROR.style.display = "none"; + } + if(!valid_username){ + USERNAME_ICON_CHECK.style.display = "none"; + USERNAME_ICON_CANCEL.style.display = "block"; + USERNAME_INPUT_ERROR.style.display = "block"; + } } - function validate_password(e){ - const PASSWORD = e.target.value; - var valid_password = /^.{4,12}$/.test(PASSWORD); - if(valid_password){ - PASSWORD_ICON_CHECK.style.display = "block"; - PASSWORD_ICON_CANCEL.style.display = "none"; - PASSWORD_INPUT_ERROR.style.display = "none"; - } - if(!valid_password){ - PASSWORD_ICON_CHECK.style.display = "none"; - PASSWORD_ICON_CANCEL.style.display = "block"; - PASSWORD_INPUT_ERROR.style.display = "block"; - } + const PASSWORD = e.target.value; + var valid_password = /^.{4,12}$/.test(PASSWORD); + if(valid_password){ + PASSWORD_ICON_CHECK.style.display = "block"; + PASSWORD_ICON_CANCEL.style.display = "none"; + PASSWORD_INPUT_ERROR.style.display = "none"; + } + if(!valid_password){ + PASSWORD_ICON_CHECK.style.display = "none"; + PASSWORD_ICON_CANCEL.style.display = "block"; + PASSWORD_INPUT_ERROR.style.display = "block"; + } } -- cgit v1.2.3