Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Start filtering on the site
Meow! Psychologists recommend limiting how much content that you consume, so today I will only read news about games. The website needs a filter.
You can’t argue with either psychologists or Muffin, which means that we will create a news filter. The web designer added a dropdown list, or a select as it’s called in HTML, which lists the news categories. When a user selects a category from the list, only news from this category should be displayed on the page. If the “All News” option is selected, then you need to display news stories from all categories.
In order to filter, we need to find all of the news stories on the page and to compare the category of each of them with the selected filter value. If they match or if the “All News” option is selected, then the news story should remain on the page. And if the news category and the filter value do not match, then the news story should be hidden.
This filtering method is suitable if the filter value and elements that need to be filtered can be found directly in the markup. Remember that there are no universal solutions. It all depends on the specific situation.
So, let’s get down to business!
All of the news on the main page has the class news-block. Find them and write the resulting collection to a variable. Make sure that you have found all of the news. Add a temporary highlight to all the elements in the collection, and check that this highlight appears on each news page.
The highlight class is responsible for the highlighting. Use the for ofloop to add it to every element in the collection. In the future, we will use this class to highlight news stories from different categories. This will help with code debugging.
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 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);
};
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
- Use the
querySelectorAllmethod to find all of the elements with thenews-blockclass on the page and and write the obtained collection to thearticlesvariable. - On the next line, create a
for ofloop and anarticlevariable to reassemble all of the elements in the following collection:for (let article of articles) { }. - Use the
articleloop and variable to add thehighlightclass to each element in the collection.
Please note that bright highlighting is added to all news stories.
Comments