Login with length validation

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";
+    }
+}