HTML Academy
Comparison operators
Dynamic element styles14/17
Back to the list of tasks
  • 1. The style property
  • 2. Setting the font color
  • 3. Obtaining the value from the field with the slider
  • 4. Setting the font size
  • 5. Comparing onchange and oninput
  • 6. Configuring the background color
  • 7. The type property
  • 8. Using the checkbox to show the password
  • 9. The checked property
  • 10. Changing the bar length
  • 11. Tying the bar length to the password length
  • 12. Saving the password length as a variable
  • 13. Comparison operators
  • 14. The else if statement
  • 15. Finishing the signup page
  • 16. Summary of “Dynamic element styles”
  • 17. Test: Pixel art
Finishing the signup page
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The else if statement

We told JavaScript to change the color of the bar to red if the password is too short. If the password is of average length, then the bar should turn yellow.

What do we mean by “average length”? This means that the password is greater than 5 characters AND less than 10 characters long. To create a double condition, use the logical operator AND:

passLength > 5 && passLength < 10

But where do we indicate this condition? Use the else if statement. It allows you to add an alternative branch with the following condition to the conditional statement:

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
}

Indicate the condition in parentheses after else if, and indicate the instructions that should be executed in curly braces if the condition returns true.

Imagine that a user entered a password that was 6 characters long. JavaScript first checks the first condition: is the password length less than or equal to 5 characters? No. So, let’s move on. Check the next condition: is the password longer than 5 characters, but less than 10? Yes. This means that we will execute the instructions from the second branch.

You can have as many else if branches in the conditional statement as you want. But the more you have of them, the more confusing the code is.

Add an else if branch to the conditional statement, and tell JavaScript to change the color of the bar to yellow if the password is longer than 5 characters but shorter than 10.

Instead of yellow, we’ll actually use the colour gold, because that will show up better against the page’s background colour.

Comments

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'; } // Add else if 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'); };

    What didn’t you like in this task?

    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
    Goalscompleted
    0
      1. On line 18, add else if () {}. Use passLength > 5 && passLength < 10 as a condition.
      2. Inside the else if curly braces change the background color of the securityBar element to gold: 'gold'.
      3. In the mini-browser, enter any six characters in the “Password” input field.
        Please note how the red bar is now yellow.

      Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

      VISAMastercard

      Log in

      or

      Forgot your password?

      Sign up

      Sign up

      or
      Log in

      Restore access

      Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

      Forgot to connect your email to the profile? Email us and we’ll help.