Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Finish working on the “Up” button
We added the onclick event handler to the script and made sure that the page scrolls back to the beginning when the arrow button is clicked. The button itself does not disappear, although when the user is at the very top of the page, there is no longer any need to show it.
In order to hide the button, we need to remove the classshown from it. This needs to be done if the vertical scroll value is not more than 200px. We already have a conditional construct that checks the scroll value and adds a class to the button if it scrolls more than 200px. Add the alternative branchelse to the conditional statement: if the statement is false, then use the classList.remove method to remove the shown class from the button.
After that, make sure that the page scrolls back to the top when you click the “Up” button and that the button itself is hidden.
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>
</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>
</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;
}
/* 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;
}
let upButton = document.querySelector('.up-button');
window.onscroll = function () {
if (window.pageYOffset > 200) {
upButton.classList.add('shown');
} // Add else here
};
upButton.onclick = function () {
window.scrollTo(0, 0);
};
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');
};
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 6, add an alternative branch
elseto the conditional statement. - If the condition is false, the
shownclass for theupButtonelement must be removed. - Scroll down the page in the mini-browser to make the arrow button appear. Press this button.
Notice how the page scrolls back to the start, and the button itself disappears.
Comments