HTML Academy
Strict inequality operator
Scrolling and operators12/15
Back to the list of tasks
  • 1. The onscroll event handler
  • 2. The pageYOffset property
  • 3. Show the “Up” button
  • 4. The scrollTo method
  • 5. Scroll page on click
  • 6. Finish working on the “Up” button
  • 7. Start filtering on the site
  • 8. Strict equality operator
  • 9. The onchange event handler
  • 10. Add a class to news story from the selected category
  • 11. Strict inequality operator
  • 12. Showing news from a selected category
  • 13. The logical operator AND
  • 14. Summary of “Scrolling and operators”
  • 15. Test: Rate the site
The logical operator AND
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Showing news from a selected category

We have now figured out how to hide those news stories whose category does not match the filter value. But there is a problem: if you toggle the filter several times, then all of the news stories will disappear from the page. Why does this happen?

The problem is that we told JavaScript when to add the hidden class, but did not say when to clear the value. If the filter value has changed, some news stories should be hidden while others will be shown again. But for the moment we only want to hide the news.

We will make sure that only those news stories whose category matches the new filter value will be displayed on the page. Add the else branch to the conditional statement: if the condition is false, meaning that the news category is equal to the filter value, then the hidden class should be removed from it. After that, toggle the filter several times and make sure that the problem has gone away.

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"> <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="visually-hidden">FlashNews news portal!</h1> <div class="news-view"> <button class="row-view view-checked" type="button">Results list</button> <button class="tile-view" type="button">Tile</button> <select class="filter" name="news-filter"> <option value="IT">IT</option> <option value="cats">Kitties</option> <option value="games">Games</option> <option value="HR">HR</option> <option value="all" selected>All News</option> </select> </div> <section class="news-list"> <h2 class="visually-hidden">All News</h2> <article class="news-block" data-category="cats"> <img src="img/news-cat.jpg" alt="Cat eyes"> <div class="news-block-text"> <h3>Unique video!</h3> <p>Discover the World Through the Eyes of Cats! Your life will never be the same…</p> <span class="news-tag">#Kitties</span> <time datetime="2020-03-24">March 24, 2020</time> </div> </article> <article class="news-block" data-category="HR"> <img src="img/walk.jpg" alt="People go for walks"> <div class="news-block-text"> <h3>It can be healthy to go for a walk</h3> <p>But it might not be if you take a stroll with the wrong people…</p> <span class="news-tag">#HR</span> <time datetime="2020-03-19">February 19, 2020</time> </div> </article> <article class="news-block" data-category="games"> <img src="img/ar.jpg" alt="Person wearing virtual reality glasses"> <div class="news-block-text"> <h3>Augment your reality</h3> <p>The editors of Flashnews! have prepared a gift for their subscribers…</p> <span class="news-tag">#Games</span> <time datetime="2020-02-18">February 18, 2020</time> </div> </article> <article class="news-block" data-category="IT"> <img src="img/drone.jpg" alt="A small drone"> <div class="news-block-text"> <h3>Dronovirus</h3> <p>The designers at the DogDrones.inc laboratory have assured that their drones cannot be carriers of dangerous viruses…</p> <span class="news-tag">#IT</span> <time datetime="2019-12-22">December 22, 2019</time> </div> </article> <article class="news-block" data-category="HR"> <img src="img/new-research.jpg" alt="A man looks at a board with cards"> <div class="news-block-text"> <h3>From the world of psychology</h3> <p>Studies show that if you do more, you can actually get more done.</p> <span class="news-tag">#HR</span> <time datetime="2019-10-12">October 12, 2019</time> </div> </article> <article class="news-block" data-category="games"> <img src="img/new-drone.jpg" alt="Quadcopter"> <div class="news-block-text"> <h3>A quadcopter is not just a fancy toy</h3> <p>Controlling the quadcopter allows you to develop agility, spatial thinking, and the ability to climb trees… </p> <span class="news-tag">#Games</span> <time datetime="2019-11-21">November 21, 2019</time> </div> </article> <article class="news-block" data-category="IT"> <img src="img/new-loop.jpg" alt="Infinite loops"> <div class="news-block-text"> <h3>Infinite loops: It’s time to end them</h3> <p>British scientists have discovered that the ability of software to function directly depends on the presence of infinite loops in it.</p> <span class="news-tag">#IT</span> <time datetime="2019-10-16">October 16, 2019</time> </div> </article> <article class="news-block" data-category="cats"> <img src="img/news-robot2.jpg" alt="A robot vacationing at a resort"> <div class="news-block-text"> <h3>What shocking news! It’s so scandalous! Such a sensation!</h3> <p>It turns out that you don’t have to be a cat to start programming in JavaScript!</p> <span class="news-tag">#Kitties</span> <time datetime="2019-12-22">December 22, 2019</time> </div> </article> <article class="news-block" data-category="IT"> <img src="img/new-graph.jpg" alt="New library"> <div class="news-block-text"> <h3>New graphics library</h3> <p>Now you can create a dashboard in just a matter of seconds.</p> <span class="news-tag">#IT</span> <time datetime="2019-10-14">October 14, 2019</time> </div> </article> <article class="news-block" data-category="cats"> <img src="img/new-cat.jpg" alt="Cat at a laptop"> <div class="news-block-text"> <h3>This just in: SHOCKING NEWS! Secret photos from the cat nursery</h3> <p>No one expected that THIS was going on behind the closed doors…</p> <span class="news-tag">#Kitties</span> <time datetime="2019-10-13">October 13, 2019</time> </div> </article> </section> </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> <button class="up-button" type="button"> ↑ <span class="visually-hidden">Up</span> </button> <script src="script.js"></script> <script src="themes.js"></script> <script src="up-button.js"></script> <script src="filter.js"></script> </body> </html>
    html { scroll-behavior: smooth; } .hidden { display: none; } .subscription-link { position: relative; padding-top: 8px; padding-right: 2px; padding-bottom: 6px; padding-left: 26px; margin: auto 4%; } .subscription-link::before { position: absolute; content: ""; width: 18px; height: 12px; top: 9px; left: 2px; } .subscription-link:hover { padding-bottom: 4px; border-bottom: 2px solid; } .subscription-link:active { opacity: 0.6; } .light-theme .subscription-link { color: #6653d9; outline-color: #b6aaff; } .light-theme .subscription-link:hover { border-color: #6653d9; } .light-theme .subscription-link::before { background-image: url("img/letter-light.svg"); } .dark-theme .subscription-link { color: #9484f2; outline-color: #6653d9; } .dark-theme .subscription-link:hover { border-color: #9484f2; } .dark-theme .subscription-link::before { background-image: url("img/letter-dark.svg"); } .up-button { position: fixed; z-index: 1; padding: 0; bottom: 75px; right: 20px; width: 64px; height: 64px; font-size: 36px; font-weight: bold; text-align: center; vertical-align: middle; border: 5px solid; border-radius: 50%; display: none; cursor: pointer; } .light-theme .up-button { color: #6653d9; background-color: rgba(255, 255, 255, 0.8); border-color: #6653d9; outline-color: #b6aaff; } .light-theme .up-button:hover { color: #473c8d; background-color: rgba(255, 255, 255, 0.8); border-color: #473c8d; } .dark-theme .up-button { color: #9484f2; background-color: rgba(10, 9, 16, 0.6); border-color: #9484f2; outline-color: #6653d9; } .dark-theme .up-button:hover { color: #6653d9; background-color: rgba(10, 9, 16, 0.6); border-color: #6653d9; } .shown { display: inline-block; } /* Filter styles */ .filter { display: flex; padding: 7px 22px 7px 12px; box-sizing: border-box; margin: 0 0 0 auto; font-size: inherit; border: none; border-radius: 2px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-repeat: no-repeat, repeat; background-position: right 8px top 50%; background-size: 8px auto; } .filter::-ms-expand { display: none; } .filter:focus { outline-offset: 0; } .light-theme .filter { color: #ffffff; background-color: #6653d9; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); } .light-theme .filter:hover { background-color: #473c8d; } .light-theme .filter:focus { outline-color: #b6aaff; } .dark-theme .filter { color: #17161a; background-color: #9484f2; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2317161a%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); } .dark-theme .filter:hover { background-color: #6653d9; } .dark-theme .filter:focus { outline-color: #6653d9; } /* News tags styles */ .news-tag { padding: 4px 8px; margin: 0 auto 0 0; border-radius: 12px; } .list-tiles-view .news-tag { margin-bottom: 4px; } .light-theme .news-tag { color: #aaaaaa; background-color: #f2f2f2; } .dark-theme .news-tag { color: #888888; background-color: #0a0910; } /* News block highlighting */ .news-block.highlight { padding-top: 6px; padding-right: 6px; padding-bottom: 10px; padding-left: 6px; border: 6px solid; } .light-theme .news-block.highlight { border-color: #ff9900; } .dark-theme .news-block.highlight { border-color: #e58a00; } .list-tiles-view .highlight img { width: calc(100% + 12px); top: -6px; left: -6px; height: 140px; }
    let articles = document.querySelectorAll('.news-block'); let filter = document.querySelector('.filter'); filter.onchange = function () { for (let article of articles) { if (article.dataset.category !== filter.value) { article.classList.add('hidden'); } // Add else here } };
    let rowViewButton = document.querySelector('.row-view'); let tileViewButton = document.querySelector('.tile-view'); let newsList = document.querySelector('.news-list'); rowViewButton.onclick = function () { rowViewButton.classList.add('view-checked'); tileViewButton.classList.remove('view-checked'); newsList.classList.remove('list-tiles-view'); }; tileViewButton.onclick = function () { rowViewButton.classList.remove('view-checked'); tileViewButton.classList.add('view-checked'); newsList.classList.add('list-tiles-view'); };
    let page = document.querySelector('.page'); let themeButton = document.querySelector('.theme-button'); themeButton.onclick = function () { page.classList.toggle('light-theme'); page.classList.toggle('dark-theme'); };
    let upButton = document.querySelector('.up-button'); window.onscroll = function () { if (window.pageYOffset > 200) { upButton.classList.add('shown'); } else { upButton.classList.remove('shown'); } }; upButton.onclick = function () { window.scrollTo(0, 0); };

    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 8, add an alternative branch else, and remove the hidden class from the article element.
      2. In the mini-browser, change the filter value first to “Kitties” and then to “Games.”
        Pay attention to how news from the selected category is now displayed on the page.
      3. Change the filter value to “All News”.
        Notice how all of the news stories have disappeared from the page.

      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.