diff options
| -rw-r--r-- | css/normalize.css | 431 | ||||
| -rw-r--r-- | css/styles.css | 84 | ||||
| -rw-r--r-- | index.html | 40 | ||||
| -rw-r--r-- | js/login.js | 48 |
4 files changed, 603 insertions, 0 deletions
diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..da84267 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,431 @@ +/* Document + * ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + * ========================================================================== */ + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Edge, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + * ========================================================================== */ + +/** + * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + */ + +dl dl, +dl ol, +dl ul, +ol dl, +ul dl { + margin: 0; +} + +/** + * Remove the margin on nested lists in Edge 18- and IE. + */ + +ol ol, +ol ul, +ul ol, +ul ul { + margin: 0; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Correct the inheritance of border color in Firefox. + * 3. Show the overflow in Edge 18- and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + color: inherit; /* 2 */ + height: 0; /* 1 */ + overflow: visible; /* 3 */ +} + +/** + * Add the correct display in IE. + */ + +main { + display: block; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + * ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Add the correct text decoration in Edge 18-, IE, and Safari. + */ + +abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* Embedded content + * ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images within links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Tabular data + * ========================================================================== */ + +/** + * 1. Correct table border color inheritance in all Chrome, Edge, and Safari. + * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. + */ + +table { + border-color: inherit; /* 1 */ + text-indent: 0; /* 2 */ +} + +/* Forms + * ========================================================================== */ + +/** + * Remove the margin on controls in Safari. + */ + +button, +input, +select { + margin: 0; +} + +/** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. + */ + +button { + overflow: visible; /* 1 */ + text-transform: none; /* 2 */ +} + +/** + * Correct the inability to style buttons in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * Show the overflow in Edge 18- and IE. + */ + +input { + overflow: visible; +} + +/** + * 1. Correct the text wrapping in Edge 18- and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in Edge 18- and IE. + * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the inheritance of text transform in Firefox. + */ + +select { + text-transform: none; +} + +/** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + */ + +textarea { + margin: 0; /* 1 */ + overflow: auto; /* 2 */ +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct the odd appearance in Chrome, Edge, and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * Remove the inner padding in Chrome, Edge, and Safari on macOS. + */ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style upload buttons in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/** + * Remove the inner border and padding of focus outlines in Firefox. + */ + +::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + +:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Remove the additional :invalid styles in Firefox. + */ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* Interactive + * ========================================================================== */ + +/* + * Add the correct display in Edge 18- and IE. + */ + +details { + display: block; +} + +/* + * Add the correct styles in Edge 18-, IE, and Safari. + */ + +dialog { + background-color: white; + border: solid; + color: black; + display: block; + height: -moz-fit-content; + height: -webkit-fit-content; + height: fit-content; + left: 0; + margin: auto; + padding: 1em; + position: absolute; + right: 0; + width: -moz-fit-content; + width: -webkit-fit-content; + width: fit-content; +} + +dialog:not([open]) { + display: none; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + * ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* User interaction + * ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..478821a --- /dev/null +++ b/css/styles.css @@ -0,0 +1,84 @@ +body{ + font-family: 'Roboto', sans-serif; +} +.title{ + text-align: center; + font-weight: 700; + font-size: 2rem; +} +.form{ + max-width: 500px; + margin: 10px auto; + padding: .5em 2em; +} +.form__label { + display: inline-block; + margin-top: 20px; + margin-bottom: 5px; + cursor: pointer; +} +.form__input{ + box-sizing: border-box; + width: 100%; + margin-bottom: 20px; + border-width: 3px; + height: 45px; + border-radius: 3px; +} +.input-container{ + position: relative; +} +.form__input-icon{ + display: none; + position: absolute; + top: 10px; + left: 93%; +} +.material-symbols-outlined { + font-variation-settings: + 'FILL' 1, + 'wght' 400, + 'GRAD' 0, + 'opsz' 48 +} +.icon-check{ + color: #1ed12d; +} +.icon-cancel{ + color: #be2a38; +} +.icon-warning{ + vertical-align: bottom; +} +.form__input-error{ + display: none; + margin: 0; + font-size: 1rem; + text-align: justify; +} +.form__error-text{ + display: none; + background: #F66060; + margin-top: 10px; + margin-bottom: 30px; + padding: .7em; +} +.form__submit{ + margin: 10px 0; + text-align: center; +} +.form__submit__button{ + width: 30%; + padding: .8em; + background: #000; + color: #fff; + font-weight: 700; + border: none; + border-radius: 3px; + cursor: pointer; +} +.form__success-send-text{ + display: none; + text-align: center; + color: #119200; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..47d74c2 --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8"/> + <title>Login</title> + <link href="css/normalize.css" rel="stylesheet"/> + <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 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> + </main> + <script src="js/login.js"></script> + </body> +</html> diff --git a/js/login.js b/js/login.js new file mode 100644 index 0000000..f151f9a --- /dev/null +++ b/js/login.js @@ -0,0 +1,48 @@ +const username = 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"); +const password = document.getElementById("password"); +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_length); +password.addEventListener('input', validate_password_length); + +function validate_username_length(e) { + var username_length = e.target.value.length; + if(username_length < 4){ + username_icon_check.style.display = "none"; + username_icon_cancel.style.display = "block"; + username_input_error.style.display = "block"; + } + if(username_length >=4 && username_length <= 16){ + username_icon_check.style.display = "block"; + username_icon_cancel.style.display = "none"; + username_input_error.style.display = "none"; + } + if(username_length > 16){ + username_icon_check.style.display = "none"; + username_icon_cancel.style.display = "block"; + username_input_error.style.display = "block"; + } +} +function validate_password_length(e) { + var password_length = e.target.value.length; + if(password_length < 4){ + password_icon_check.style.display = "none"; + password_icon_cancel.style.display = "block"; + password_input_error.style.display = "block"; + } + if(password_length >=4 && password_length <= 12){ + password_icon_check.style.display = "block"; + password_icon_cancel.style.display = "none"; + password_input_error.style.display = "none"; + } + if(password_length > 12){ + password_icon_check.style.display = "none"; + password_icon_cancel.style.display = "block"; + password_input_error.style.display = "block"; + } +} |