Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
The checked property
Great job! We told JavaScript to show the password if the user ticked the checkbox. And if the checkbox is left unticked, then the password must be hidden. However, this is not what happens right now: if we check the box once, then password will always remain visible. How can we fix this?
Add a conditional statement to the event handler and check if the checkbox is checked. If it is, then the password field must be a regular text field. If it is not checked, then the field must return the password type. To check the state of the checkbox, use the checked property.
This property has the boolean value true if the checkbox is checked and false if it is unchecked.
// Check whether the checkbox has been checked
if (showPassword.checked) {
// Show password
} else {
// Hide password
}Add a conditional statement to the event handler and make sure that the password is shown if the box is ticked and hidden if it is unticked.
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" value="MuffinRules777" 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');
showPassword.onchange = function () {
// Add a conditional statement here
password.type = 'text';
};
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 5, add a conditional statement. Specify
showPassword.checkedas a condition. - Place the
password.type = 'text';instruction inside the conditional statement. - Add the
elsealternative branch to the conditional statement. Change thepasswordfield type to'password'inside it. - In the mini-browser check the checkbox “Show password” and then uncheck it. Please note how the password was first shown and then hidden again.
Comments