Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Vincular el ancho con la longitud de la contraseña
Ya encontramos la barra que indica la longitud de la contraseña y le asignamos un ancho fijo. Pero necesitamos que su ancho cambie con la longitud de la contraseña introducida.
La longitud del valor introducido se guarda en su propiedad length. El material previo presenta esta propiedad.
let input = document.querySelector('input');
console.log(input.value); // Muestra: Cupcake
console.log(input.value.length); // Muestra: 7Con cada carácter introducido, la barra debe crecer un 10% del ancho de su elemento padre.
| Longitud de la contraseña | Ancho de la barra |
|---|---|
| 1 | 10% |
| 2 | 20% |
| 3 | 30% |
Para obtener el ancho de la barra, debemos multiplicar la longitud de la contraseña por 10. En JavaScript, la multiplicación se representa con un asterisco:
console.log(3 * 10); // Muestra: 30Usemos la multiplicación para establecer el ancho de la barra. Y no olvidemos agregar la unidad, el porcentaje, mediante concatenación:
securityBar.style.width = password.value.length * 10 + '%';Supongamos que el usuario introduce una contraseña de 4 caracteres:
securityBar.style.width = 4 * 10 + '%'; // Resultado: '40%'Para que el ancho de la barra cambie junto con la longitud de la contraseña, debemos obtener esa longitud cada vez que cambie el campo. Usaremos el manejador de eventos oninput. Lo agregaremos al campo de contraseña y vincularemos el ancho de la barra con la longitud del valor introducido. Después comprobaremos que la barra crece con la contraseña.
¿Qué ocurre si el ancho de la barra supera el 100%? Depende del valor de la propiedad CSS overflow del elemento padre. Usamos hidden, así que la parte que sobrepasa el contenedor quedará oculta.
Todos los archivos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews! Crear una cuenta</title>
</head>
<body class="page light-theme">
<header class="page-header">
<div class="container">
<a class="header-logo">
<img src="img/main-logo.svg" width="67" height="29" alt="Logotipo del portal FlashNews!">
</a>
<a href="subscription.html" class="subscription-link">Suscripción</a>
<button class="theme-button" type="button">Cambiar tema</button>
</div>
</header>
<main class="index-main">
<div class="container">
<h1 class="inner-heading">Crear una cuenta</h1>
<form class="reg-form" action="https://codigoheroe.com/echo" method="post">
<label class="reg-label" for="reg-name">nombre de usuario</label>
<input class="name" type="text" value="Mapache Reconocido" id="reg-name" name="reg-name" placeholder="Mapache Reconocido" required>
<label class="reg-label" for="reg-pass">contraseña</label>
<input class="password" type="password" id="reg-pass" name="reg-pass" placeholder="**********" required >
<div class="security">
<div class="security-bar"></div>
</div>
<input class="show-password visually-hidden" type="checkbox" id="show-pass">
<label class="checkbox-label" for="show-pass">Mostrar contraseña</label>
<button class="button" type="submit">Crear cuenta</button>
</form>
</div>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<a class="footer-logo">
<img src="img/white-logo.svg" alt="Logotipo del portal FlashNews!">
</a>
</div>
</footer>
<script src="themes.js"></script>
<script src="password.js"></script>
</body>
</html>
/* Formulario de registro */
.reg-form {
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin-top: 12px;
margin-bottom: 30px;
padding: 8px 12px;
}
.reg-label {
z-index: 1;
margin-right: auto;
margin-bottom: -6px;
margin-left: -6px;
padding: 2px 6px;
font-size: 10px;
line-height: 14px;
}
.name,
.password {
width: 100%;
margin-bottom: 10px;
padding: 0 10px;
background-color: transparent;
font: inherit;
font-size: 14px;
line-height: 30px;
outline-offset: 0;
border: 1px solid;
}
.password {
padding-bottom: 4px;
}
.name::placeholder,
.password::placeholder {
color: #aaaaaa;
font: inherit;
font-size: 14px;
font-style: italic;
}
.name:focus::placeholder,
.password:focus::placeholder {
font-size: 0;
}
.name:hover::placeholder,
.name:active::placeholder,
.password:hover::placeholder,
.password:active::placeholder {
opacity: 0.5;
}
.checkbox-label {
position: relative;
margin: 4px auto 16px 0;
padding: 4px 24px;
}
.checkbox-label::before {
position: absolute;
content: "";
flex-shrink: 0;
top: 3px;
left: 0;
width: 14px;
height: 14px;
background-position: center;
background-repeat: no-repeat;
border-radius: 2px;
border: 1px solid;
}
.show-password:focus + .checkbox-label::before {
outline: auto;
outline-width: 4px;
}
.checkbox-label:active::before {
opacity: 0.6;
}
.reg-form .button {
margin-right: auto;
margin-bottom: 16px;
}
.security {
position: relative;
margin: -14px 1px 8px;
width: calc(100% - 2px);
overflow: hidden;
background-color: #eae9f2;
}
.security::before {
position: absolute;
content: "";
width: 4px;
height: 4px;
top: 0;
left: 50%;
background-color: #ffffff;
}
.security::after {
position: absolute;
content: "";
width: 4px;
height: 4px;
top: 0;
left: 90%;
background-color: #ffffff;
}
.security-bar {
height: 4px;
width: 0;
background-color: mediumpurple;
}
/* Temas de color del formulario de registro */
.light-theme .reg-form {
background-color: #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.light-theme .reg-label {
color: #6653d9;
background-color: #ffffff;
}
.light-theme .name,
.light-theme .password {
border-color: #eae9f2;
color: #333333;
outline-color: #b6aaff;
}
.light-theme .checkbox-label::before {
background-color: #ffffff;
border-color: #6653d9;
}
.light-theme .checkbox-label:hover::before {
background-color: #b6aaff;
}
.light-theme .show-password:checked + .checkbox-label::before {
background-color: #6653d9;
background-image: url("img/check-light.svg");
}
.light-theme .show-password:focus + .checkbox-label::before {
outline-color: #b6aaff;
}
.light-theme .security {
background-color: #eae9f2;
}
.light-theme .security::before,
.light-theme .security::after {
background-color: #ffffff;
}
.dark-theme .reg-form {
background-color: #2a2930;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.dark-theme .reg-label {
color: #9484f2;
background-color: #2a2930;
}
.dark-theme .name,
.dark-theme .password {
border-color: #473c8d;
color: #f2f2f2;
outline-color: #6653d9;
}
.dark-theme .checkbox-label::before {
background-color: #2a2930;
border-color: #9484f2;
}
.dark-theme .checkbox-label:hover::before {
background-color: #9484f2;
}
.dark-theme .show-password:checked + .checkbox-label::before {
background-color: #9484f2;
background-image: url("img/check-dark.svg");
}
.dark-theme .show-password:focus + .checkbox-label::before {
outline-color: #6653d9;
}
.dark-theme .security {
background-color: #473c8d;
}
.dark-theme .security::before,
.dark-theme .security::after {
background-color: #2a2930;
}
let password = document.querySelector('.password');
let showPassword = document.querySelector('.show-password');
let securityBar = document.querySelector('.security-bar');
securityBar.style.width = '50%';
showPassword.onchange = function () {
if (showPassword.checked) {
password.type = 'text';
} else {
password.type = 'password';
}
};
// Agrega aquí el manejador de eventos
let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
100%
Consola
- En la línea 14, agrega al elemento
passwordun manejador de eventosoninput. - Mueve la instrucción
securityBar.style.width = '50%';al interior del manejadoroninput. - Sustituye
'50%'porpassword.value.length * 10 + '%'. - En el mininavegador, empieza a escribir en el campo «Contraseña». Basta con introducir tres caracteres cualesquiera.
Observa que la barra crece con cada carácter introducido.