Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Storing the password length in a variable
We made the bar grow together with the password length. Great job! Now we need to assign it the right color. If the password is short, the bar should be red, if it is of average length, then it should be yellow, and if the password is long, then it should be green. To do this, we need a conditional statement that compares password.value.length with several numbers. Repeating this expression would make the code harder to read.
Let’s simplify the code: store the password length in a separate variable and use it.
let passLength = password.value.length;The password length changes with each character that is entered. In order for the passLength variable to always have the current value, it needs to be assigned inside the oninput event handler.
Declare the passLength variable and use it in the instructions where we need the password length. Check that nothing is broken.
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 () {
// Declare a variable here
securityBar.style.width = password.value.length * 10 + '%';
};
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
- On line 14, declare a variable
passLengthand assign the password length to it:password.value.length. - On the next line, change
password.value.lengthto thepassLengthvariable. - Start typing the text in the “Password” input field in the mini-browser. Any three characters will suffice.
Notice how the bar grows the same as before.
Comments