constants and sectionHEAD master

author: Cesar Monroy <[email protected]> 2023-05-14 17:01:15 -0600
committer: Cesar Monroy <[email protected]> 2023-05-14 17:01:15 -0600
commit: ade64d8f5878f51ad0cfbbec1d7f3d2d47f04db3 (patch)
tree: 747be0b7c63296a29646aa269c9ee3a4cb2c2f87
parent: 7e7a6e3a112cb078777bba70a0f1681acca75a87 (diff)
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 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
-      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
     <link href="css/styles.css" rel="stylesheet"/>
   </head>
   <body>
     <main>
-      <h1 class="title">Log in</h1>
-      <form class="form" name="login" method="post">
-	<label class="form__label" for="username">Usuario</label>
-	<div class="input-container">
-	  <input id="username" class="form__input" name="username" type="text" required/>
-	  <span id="icon-check__username" class="material-symbols-outlined form__input-icon icon-check">check_circle</span>
-	  <span id="icon-cancel__username" class="material-symbols-outlined form__input-icon icon-cancel">cancel</span>
-	</div>
-	<p id="input-error__username" class="form__input-error">El usuario tiene que ser de 4 a 16 digitos y solo puede contener numeros, letras y guion bajo.</p>
-	<label class="form__label" for="password">Contraseña</label>
-	<div class="input-container">
-	  <input id="password" class="form__input" name="password" type="password" required/>
-	  <span id="icon-check__password" class="material-symbols-outlined form__input-icon icon-check">check_circle</span>
-	  <span id="icon-cancel__password" class="material-symbols-outlined form__input-icon icon-cancel">cancel</span>
-	</div>
-	<p id="input-error__password" class="form__input-error">La contraseña tiene que ser de 4 a 12 dígitos</p>
-	<p class="form__error-text"><span class="material-symbols-outlined icon-warning">warning</span> <b>Error:</b> Por favor rellena el formulario correctamente</p>
-	<div class="form__submit">
-	  <input class="form__submit__button" type="submit" value="Enviar"/>
-	</div>
-	<p class="form__success-send-text">Formulario enviado exitosamente!</p>
-      </form>
+      <section>
+	<h1 class="title">Log in</h1>
+	<form class="form" name="login" method="post">
+	  <label class="form__label" for="username">Usuario</label>
+	  <div class="input-container">
+	    <input id="username" class="form__input" name="username" type="text" required/>
+	    <span id="icon-check__username" class="material-symbols-outlined form__input-icon icon-check">check_circle</span>
+	    <span id="icon-cancel__username" class="material-symbols-outlined form__input-icon icon-cancel">cancel</span>
+	  </div>
+	  <p id="input-error__username" class="form__input-error">El usuario tiene que ser de 4 a 16 digitos y solo puede contener numeros, letras y guion bajo.</p>
+	  <label class="form__label" for="password">Contraseña</label>
+	  <div class="input-container">
+	    <input id="password" class="form__input" name="password" type="password" required/>
+	    <span id="icon-check__password" class="material-symbols-outlined form__input-icon icon-check">check_circle</span>
+	    <span id="icon-cancel__password" class="material-symbols-outlined form__input-icon icon-cancel">cancel</span>
+	  </div>
+	  <p id="input-error__password" class="form__input-error">La contraseña tiene que ser de 4 a 12 dígitos</p>
+	  <p class="form__error-text"><span class="material-symbols-outlined icon-warning">warning</span> <b>Error:</b> Por favor rellena el formulario correctamente</p>
+	  <div class="form__submit">
+	    <input class="form__submit__button" type="submit" value="Enviar"/>
+	  </div>
+	  <p class="form__success-send-text">Formulario enviado exitosamente!</p>
+	</form>
+      </section>
     </main>
     <script src="js/login.js"></script>
   </body>
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";
+  }
 }
author	Cesar Monroy <[email protected]>	2023-05-14 17:01:15 -0600
committer	Cesar Monroy <[email protected]>	2023-05-14 17:01:15 -0600
commit	ade64d8f5878f51ad0cfbbec1d7f3d2d47f04db3 (patch)
tree	747be0b7c63296a29646aa269c9ee3a4cb2c2f87
parent	7e7a6e3a112cb078777bba70a0f1681acca75a87 (diff)