Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Finishing the signup page
We added an else if alternative branch to the conditional statement, and now the bar changes color from red to yellow if the password is longer than 5 characters. But if the password is longer than 10 characters, then the bar should turn green. We were able to add another else if branch, but in this case else is enough.
Imagine that the password is 11 characters long. In this case, both conditions will return false, and JavaScript will execute the instructions from the else branch.
if (passLength <= 5) {
// The instructions are executed if the first condition is true
} else if (passLength > 5 && passLength < 10) {
// The instructions are executed if the second condition is true
} else {
// The instructions are executed if the both conditions are false
}Add a third branch to our conditional statement and make sure that the bar color changes from red to yellow and then from yellow to green.
Files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews! Sign up</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="FlashNews! portal logo">
</a>
<a href="subscription.html" class="subscription-link">Subscription</a>
<button class="theme-button" type="button">Change the theme</button>
</div>
</header>
<main class="index-main">
<div class="container">
<h1 class="inner-heading">Sign up</h1>
<form class="reg-form" action="https://echo.htmlacademy.ru/courses" method="post">
<label class="reg-label" for="reg-name">Username</label>
<input class="name" type="text" value="Identified Raccoon" id="reg-name" name="reg-name" placeholder="Identified Raccoon" required>
<label class="reg-label" for="reg-pass">Password</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">Show password</label>
<button class="button" type="submit">Sign up</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="FlashNews! portal logo">
</a>
</div>
</footer>
<script src="themes.js"></script>
<script src="password.js"></script>
</body>
</html>
/* Registration form */
.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;
}
/* Registration form color themes */
.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';
} else if (passLength > 5 && passLength < 10) {
securityBar.style.backgroundColor = 'gold';
} // Add else here
};
let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
100%
Console
Comments