HTML Academy
The else statement, alternative branches
Conditions and creating elements7/16
Back to the list of tasks
  • 1. Include the second script
  • 2. Creating a like counter
  • 3. Changing the counter value
  • 4. The classList.contains method, checking for the existence of the class
  • 5. The conditional statement if
  • 6. The else statement, alternative branches
  • 7. Change the value from the markup
  • 8. Comments for the news site
  • 9. The append method, adding content
  • 10. The CreateElement method and creating an element
  • 11. Adding an element to the page
  • 12. Add a comment when submitting the form
  • 13. Changing the properties of the created element
  • 14. Finishing the comment section
  • 15. Summary of “Conditions and creating elements”
  • 16. Test: Task list
Comments for the news site
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Change the value from the markup

The like counter is working! When a like is added, the value of the counter increases, and when a like is taken away, the value decreases. There is only one small problem: our counter does not take into account other site users. What if someone else has already added a like? We should take the number of likes that have already been recorded on the page and change it.

Take the value from likesNumber.textContent and change it to one:

// Increases the value by 1
likesNumber.textContent++;

// Decreases the value by 1
likesNumber.textContent--;

Now we no longer need the counter variable, so we just delete it. The like counter is ready!

In a production site, we would need an extra attribute on the button called aria-pressed and toggle it between true and false. This tells users of assistive technology such as screen readers whether the button is pressed or not, as a blind visitor would not see the visual indicator of the heart filled wih colour. aria-pressed is part of a suite of ARIA attributes that can be added to HTML to make web pages more accessible to people with disabilities. It’s out of scope for an introductory JavaScript tutorial, but there’s a good introduction to ARIA in WebAim’s Accessibility of Rich Internet Applications.

You can read more on this attribute in this article.

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!</title> </head> <body class="page light-theme"> <header class="page-header"> <div class="container"> <span class="header-logo"> <img src="img/main-logo.svg" width="67" height="29" alt="FlashNews! portal logo"> </span> <button class="theme-button" type="button">Change the theme</button> </div> </header> <main class="inner-news"> <div class="container"> <h1 class="inner-heading">🔥 What shocking news! It’s so scandalous! Such a sensation!</h1> <article class="news-full"> <img src="img/news-robot2.jpg" alt="A robot vacationing at a resort"> <div class="news-stats"> <button class="heart"><span class="likes-number"></span></button> <time datetime="2019-12-22">22 December 2019</time> </div> <p>It turns out that you don’t have to be a cat to start programming in JavaScript! Scientists have created the first robot that can write and change its own code. He immediately learned how to code websites, and he left to work as a freelancer on Bali.</p> </article> </div> </main> <footer class="page-footer"> <div class="container"> <p>© FlashNews!</p> <span class="footer-logo"> <img src="img/white-logo.svg" alt="FlashNews! portal logo"> </span> </div> </footer> <script src="themes.js"></script> <script src="likes.js"></script> </body> </html>
    /* News story page styles */ .comment-form { display: flex; margin-bottom: 30px; padding: 20px 12px; } .comment-inner { position: relative; flex-grow: 1; margin-right: 10px; } .comment-label { position: absolute; top: -16px; left: -9px; padding: 4px 8px; font-size: 10px; line-height: 14px; } .comment-field { width: 100%; height: 30px; padding: 0 10px; border: none; background-color: transparent; font: inherit; font-size: 14px; line-height: 30px; } .comment-field::placeholder { color: #aaaaaa; font: inherit; font-size: 14px; font-style: italic; } .comment-field:focus::placeholder { font-size: 0; } .comment-field:hover::placeholder, .comment-field:active::placeholder { opacity: 0.5; } .inner-news .inner-heading { margin-bottom: 20px; } .news-full { display: flex; flex-direction: column; margin-bottom: 24px; } .news-full img { margin-bottom: 4px; width: 100%; height: 220px; object-fit: cover; } .news-full .news-stats { display: flex; justify-content: space-between; } .news-full .heart { padding: 12px 10px; min-width: 40px; min-height: 34px; font-family: inherit; font-weight: bold; font-size: 16px; border: none; background-color: transparent; background-repeat: no-repeat; background-position: 12px; cursor: pointer; } .heart .likes-number { margin-left: 24px; line-height: 14px; } .news-full time { margin-top: 14px; margin-right: 12px; margin-bottom: 8px; margin-left: 0; } .news-full p { margin-top: 0; margin-right: 12px; margin-bottom: 16px; margin-left: 12px; font-size: 14px; line-height: 24px; } .comment-feed h2 { margin-top: 0; margin-bottom: 12px; } .comment-list { margin-top: 0; margin-right: 0; margin-bottom: 12px; margin-left: 0; padding: 0; list-style: none; counter-reset: comments; } .comment-list li { margin-bottom: 6px; padding: 10px 12px; min-height: 36px; font-size: 14px; line-height: 24px; } .comment-list .user-comment { position: relative; display: flex; } .comment-list .user-comment::before { counter-increment: comments; content: "#" counter(comments); padding-right: 12px; margin-right: 12px; border-right: 1px solid; font-weight: bold; } .comment-list .user-comment::after { position: absolute; content: ""; width: 0; height: 0; bottom: 0; left: -8px; border: 4px solid; border-left-color: transparent; border-top-color: transparent; } @keyframes comment-blink-light { 0% { background-color: #b6aaff; opacity: 0; } 20% { opacity: 0.8; } } @keyframes comment-blink-light-after { 0% { border-right-color: #b6aaff; border-bottom-color: #b6aaff; opacity: 0; } 20% { opacity: 0.8; } } @keyframes comment-blink-dark { 0% { background-color: #473c8d; opacity: 0; } 20% { opacity: 1; } } @keyframes comment-blink-dark-after { 0% { border-right-color: #473c8d; border-bottom-color: #473c8d; opacity: 0; } 20% { opacity: 1; } } /* Themes */ .dark-theme .header-logo { filter: invert(1) hue-rotate(180deg) brightness(2); } /* Light theme */ .light-theme { color: #333333; background-color: #eae9f2; } .light-theme .page-header { background-color: #ffffff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } .light-theme .header-link { color: #6653d9; } .light-theme .header-link::before { background-image: url("img/arrow-back-light.svg"); background-repeat: no-repeat; background-position: 0 0; } .light-theme .theme-button { color: #6653d9; border: 1px solid #6653d9; } .light-theme .theme-button::before { background-image: url("img/moon-normal.svg"); } .light-theme .theme-button:focus, .light-theme .theme-button:hover { color: #ffffff; background-color: #6653d9; } .light-theme .theme-button:focus { outline-color: #b6aaff; } .light-theme .theme-button:focus::before, .light-theme .theme-button:hover::before { background-image: url("img/moon-hover.svg"); } .light-theme .menu-open { background-color: #ffffff; background-image: url("img/menu-open-light.svg"); } .light-theme .menu:focus { outline-color: #b6aaff; } .light-theme .menu-open:focus, .light-theme .menu-open:hover { background-color: #6653d9; background-image: url("img/menu-open-dark.svg"); } .light-theme .menu-close { background-color: #6653d9; } .light-theme .menu-close:focus, .light-theme .menu-close:hover { background-color: #473c8d; } .light-theme .main-menu { background-color: #6653d9; color: #ffffff; } .light-theme .main-menu a:focus, .light-theme .main-menu a:hover { background-color: #473c8d; } .light-theme .main-menu a:focus { outline-color: #b6aaff; } .light-theme .news-view button { border: 1px solid #6653d9; color: #6653d9; } .light-theme .news-view button:focus, .light-theme .news-view button:hover, .light-theme .news-view button:active, .light-theme .news-view .view-checked { background-color: #6653d9; color: #ffffff; } .light-theme .news-view button:focus { outline-color: #b6aaff; } .light-theme .news-view .row-view:focus::before, .light-theme .news-view .row-view:hover::before, .light-theme .news-view .row-view:active::before { background-image: url("img/rows-light-checked.svg"); } .light-theme .news-view .tile-view:focus::before, .light-theme .news-view .tile-view:hover::before, .light-theme .news-view .tile-view:active::before { background-image: url("img/tiles-light-checked.svg"); } .light-theme .row-view::before { background-image: url("img/rows-light.svg"); } .light-theme .tile-view::before { background-image: url("img/tiles-light.svg"); } .light-theme .row-view.view-checked::before { background-image: url("img/rows-light-checked.svg"); } .light-theme .tile-view.view-checked::before { background-image: url("img/tiles-light-checked.svg"); } .light-theme .new-block { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .light-theme .news-full { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .light-theme .new-block time { color: #aaaaaa; } .light-theme .news-full time { color: #aaaaaa; } .light-theme .cookies-agreement { background-color: #fdeacd; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2); } .light-theme .button { background-color: #6653d9; color: #ffffff; } .light-theme .button:focus, .light-theme .button:hover { background-color: #473c8d; } .light-theme .button:focus { outline-color: #b6aaff; } .light-theme .page-footer { background-color: #6653d9; color: #ffffff; } .light-theme .subscription, .light-theme .comment-form { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .light-theme .subscription-message { background-color: #6653d9; color: #eae9f2; } .light-theme .subscription-message::before { background-image: url("img/icon-ok-light.svg"); } .light-theme .subscription-label, .light-theme .comment-label { color: #6653d9; } .light-theme .subscription-email, .light-theme .comment-field { border: 1px solid #eae9f2; color: #333333; } .light-theme .heart { color: #6653d9; background-image: url("img/icon-heart-light.svg"); opacity: 0.7; } .light-theme .heart.added { background-image: url("img/icon-heart-light-added.svg"); } .page .heart:focus, .page .heart:hover { opacity: 1; } .light-theme .heart:focus { outline-color: #b6aaff; } .light-theme .heart:active { opacity: 1; background-image: url("img/icon-heart-light-active.svg"); } .light-theme .comment-list li { background-color: #ffffff; } .light-theme .user-comment:not(:first-child) { animation: comment-blink-light 600ms ease-in; } .light-theme .user-comment::before { border-right-color: #eae9f2; color: #cdcdcd; } .light-theme .user-comment::after { border-right-color: #ffffff; border-bottom-color: #ffffff; } .light-theme .user-comment:not(:first-child)::after { animation: comment-blink-light-after 600ms ease-in; } .light-theme .comment-label { background-color: #ffffff; } .light-theme .comment-field:focus { outline-color: #b6aaff; } /* Dark theme */ .dark-theme { color: #f2f2f2; background-color: #17161a; } .dark-theme .page-header { background-color: #373540; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); } .dark-theme .header-link { color: #9484f2; } .dark-theme .header-link::before { background-image: url("img/arrow-back-dark.svg"); background-repeat: no-repeat; background-position: 0 0; } .dark-theme .theme-button { color: #9484f2; border: 1px solid #9484f2; } .dark-theme .theme-button::before { background-image: url("img/sun-normal.svg"); } .dark-theme .theme-button:focus, .dark-theme .theme-button:hover { color: #17161a; background-color: #9484f2; } .dark-theme .theme-button:focus { outline-color: #6653d9; } .dark-theme .theme-button:focus::before, .dark-theme .theme-button:hover::before { background-image: url("img/sun-hover.svg"); } .dark-theme .menu:focus { outline-color: #6653d9; } .dark-theme .menu-open { background-color: #373540; background-image: url("img/menu-open-dark.svg"); } .dark-theme .menu-open:focus, .dark-theme .menu-open:hover { background-color: #473c8d; background-image: url("img/menu-open-dark.svg"); } .dark-theme .menu-close { background-color: #473c8d; } .dark-theme .menu-close:focus, .dark-theme .menu-close:hover { background-color: #6653d9; } .dark-theme .main-menu { background-color: #473c8d; color: #f2f2f2; } .dark-theme .main-menu a:focus { outline-color: #6653d9; } .dark-theme .main-menu a:focus, .dark-theme .main-menu a:hover { background-color: #6653d9; } .dark-theme .news-view button { border: 1px solid #9484f2; color: #9484f2; } .dark-theme .news-view button:focus { outline-color: #6653d9; } .dark-theme .news-view button:focus, .dark-theme .news-view button:hover, .dark-theme .news-view button:active, .dark-theme .news-view .view-checked { background-color: #9484f2; color: #17161a; } .dark-theme .news-view .row-view:focus::before, .dark-theme .news-view .row-view:hover::before, .dark-theme .news-view .row-view:active::before { background-image: url("img/rows-dark-checked.svg"); } .dark-theme .news-view .tile-view:focus::before, .dark-theme .news-view .tile-view:hover::before, .dark-theme .news-view .tile-view:active::before { background-image: url("img/tiles-dark-checked.svg"); } .dark-theme .row-view::before { background-image: url("img/rows-dark.svg"); } .dark-theme .tile-view::before { background-image: url("img/tiles-dark.svg"); } .dark-theme .row-view.view-checked::before { background-image: url("img/rows-dark-checked.svg"); } .dark-theme .tile-view.view-checked::before { background-image: url("img/tiles-dark-checked.svg"); } .dark-theme .new-block { background-color: #2a2930; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .news-full { background-color: #2a2930; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .new-block time { color: #888888; } .dark-theme .news-full time { color: #888888; } .dark-theme .cookies-agreement { background-color: #473c8d; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .button { background-color: #9484f2; color: #17161a; } .dark-theme .button:focus { outline-color: #6653d9; } .dark-theme .button:focus, .dark-theme .button:hover { background-color: #b6aaff; } .dark-theme .page-footer { background-color: #0a0910; color: #f2f2f2; } .dark-theme .subscription, .dark-theme .comment-form { background-color: #2a2930; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .subscription-message { background-color: #9484f2; color: #17161a; } .dark-theme .subscription-message::before { background-image: url("img/icon-ok-dark.svg"); } .dark-theme .subscription-label, .dark-theme .comment-label { color: #9484f2; } .dark-theme .comment-label { background-color: #2a2930; } .dark-theme .subscription-email, .dark-theme .comment-field { border: 1px solid #473c8d; color: #f2f2f2; } .dark-theme .heart { color: #9484f2; background-image: url("img/icon-heart-dark.svg"); opacity: 0.7; } .dark-theme .heart:focus { outline-color: #6653d9; } .dark-theme .heart.added { background-image: url("img/icon-heart-dark-added.svg"); } .dark-theme .heart:active { opacity: 1; background-image: url("img/icon-heart-dark-active.svg"); } .dark-theme .comment-list li { background-color: #2a2930; } .dark-theme .user-comment:not(:first-child) { animation: comment-blink-dark 600ms ease-in; } .dark-theme .user-comment::before { border-right-color: #17161a; color: rgba(255, 255, 255, 0.3); } .dark-theme .user-comment::after { border-right-color: #2a2930; border-bottom-color: #2a2930; } .dark-theme .user-comment:not(:first-child)::after { animation: comment-blink-dark-after 600ms ease-in; } .dark-theme .comment-field:focus { outline-color: #6653d9; }
    let heart = document.querySelector('.heart'); let likesNumber = document.querySelector('.likes-number'); let counter = 0; heart.onclick = function () { if (heart.classList.contains('added')) { counter--; } else { counter++; } likesNumber.textContent = counter; heart.classList.toggle('added'); };
    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. Remove the code from line 11 and the declaration of the counter variable on line 3.
      2. Replace counter--; with likesNumber.textContent--;.
      3. Replace counter++; with likesNumber.textContent++;.
      4. Double-click on the “heart”.

      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.