diff options
| -rw-r--r-- | index.html | 48 | ||||
| -rw-r--r-- | js/login.js | 55 |
2 files changed, 52 insertions, 51 deletions
@@ -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"; + } } |