From 44050a800568de91fda4e11b0dc287a3dcba5a31 Mon Sep 17 00:00:00 2001 From: Cesar Monroy Date: Tue, 9 May 2023 21:15:47 -0600 Subject: Login with length validation --- css/normalize.css | 431 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ css/styles.css | 84 +++++++++++ index.html | 40 +++++ js/login.js | 48 ++++++ 4 files changed, 603 insertions(+) create mode 100644 css/normalize.css create mode 100644 css/styles.css create mode 100644 index.html create mode 100644 js/login.js 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 @@ + + + + + Login + + + + + + + + +
+

Log in

+
+ +
+ + check_circle + cancel +
+

El usuario tiene que ser de 4 a 16 digitos y solo puede contener numeros, letras y guion bajo.

+ +
+ + check_circle + cancel +
+

La contraseña tiene que ser de 4 a 12 dígitos

+

warning Error: Por favor rellena el formulario correctamente

+
+ +
+

Formulario enviado exitosamente!

+
+
+ + + 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"; + } +} -- cgit v1.2.3