Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
La estructura else if
Ya le indicamos a JavaScript que pinte la barra de rojo si la contraseña es corta. Si tiene una longitud intermedia, la barra debe ser amarilla.
¿Qué significa «longitud intermedia»? Que la contraseña tenga más de 5 caracteres Y menos de 10. Para combinar ambas condiciones, usaremos el operador lógico Y:
passLength > 5 && passLength < 10¿Dónde escribimos esta condición? Usaremos else if, que permite agregar una rama alternativa con su propia condición:
if (passLength <= 5) {
// Estas instrucciones se ejecutan si la primera condición es verdadera
} else if (passLength > 5 && passLength < 10) {
// Estas instrucciones se ejecutan si la segunda condición es verdadera
}Después de else if, escribimos la condición entre paréntesis y, entre llaves, las instrucciones que se ejecutarán si esa condición devuelve true.
Supongamos que el usuario introduce una contraseña de 6 caracteres. JavaScript comprobará primero si la longitud es menor o igual que 5. No lo es, así que sigue adelante. ¿La longitud es mayor que 5 y menor que 10? Sí. Entonces se ejecutan las instrucciones de la segunda rama.
Una estructura condicional puede tener tantas ramas else if como necesites. Pero cuantas más agregues, más difícil será seguir el código.
Agreguemos una rama else if e indiquemos a JavaScript que pinte la barra de amarillo si la contraseña tiene más de 5 caracteres y menos de 10.
El papel del «amarillo» lo interpreta el dorado. Así lo quiso el equipo de diseño.
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');
showPassword.onchange = function () {
if (showPassword.checked) {
password.type = 'text';
} else {
password.type = 'password';
}
};
password.oninput = function () {
let passLength = password.value.length;
securityBar.style.width = passLength * 10 + '%';
if (passLength <= 5) {
securityBar.style.backgroundColor = 'red';
} // Agrega else if aquí
};
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 18, agrega
else if () {}. UsapassLength > 5 && passLength < 10como condición. - Dentro de las llaves de
else if, cambia el color de fondo desecurityBara amarillo usando'gold'. - En el mininavegador, escribe seis caracteres, uno por uno, en el campo «Contraseña».
Observa que la barra roja se vuelve amarilla.