Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
The else statement, alternative branches
Wow, our counter no longer increases each time it is clicked! But it doesn’t decrease when a like is removed (yet!).
This is because when the heart element has the added class, we first decrease the counter value, and after the conditional statement we increase it again. Currently the counter++; instruction is executed independently of the condition. How can we arrange for the value to increase only when there is no class?
Let’s use else to do this. This is a statement that tells JavaScript what to do if the condition in if is false. Instructions that should be executed if the condition returns false are written inside the curly braces after else.
if (condition) {
// Instructions that are executed if the condition is true
} else {
// Instructions that are executed if the condition is false
}The use of conditional statements in a script is also called branching, and the code inside curly braces is called a branch.
Add the else branch to our script: tell JavaScript to increase the value of the counter only when the heart element still does not have the added class.
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--;
} // Add else here
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');
};
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
Comments