Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Finishing the comment section
We learned how to create elements, change them, and add them to the page. The comment section for the news site is almost ready. The last remaining step is to add a comment to the comment section with the exact same text that the user entered in the form.
In the introductory chapter we already obtained data from the input field and output it to the page. To do this, we used the value property.
let input = document.querySelector ('input');
let paragraph = document.querySelector ('p');
// Write the data from the input field to the text content of the element
paragraph.textContent = input. value ;Let’s insert the data from the input field instead of the “fish” in textContent of the element that we created. And after that clear the input field itself so that the user does not mistakenly send the same comment several times. To do this, write an empty string in the value property of the input field. Like this:
input.value = '';Take the comment text from the input field with the comment-field class and write it to the text content of the new comment before adding it to the page. After that, clear the input field, and the job is done!
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>
<section class="comment-feed">
<h2>Comments</h2>
<ol class="comment-list">
<li class="user-comment">Hmmm, it’s some kind of nonsense…</li>
</ol>
<form action="https://echo.htmlacademy.ru/courses" method="post" class="comment-form">
<div class="comment-inner">
<label class="comment-label" for="comment-input">Your comment</label>
<input type="text" class="comment-field" value="Aren't Java and JavaScript the same thing?" placeholder="Comment" required id="comment-input">
</div>
<button class="button" type="submit">Submit</button>
</form>
</section>
</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>
<script src="comments.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 commentForm = document.querySelector('.comment-form');
let commentList = document.querySelector('.comment-list');
// Declare a variable here
commentForm.onsubmit = function (evt) {
evt.preventDefault();
let newComment = document.createElement('li');
newComment.classList.add('user-comment');
newComment.textContent = 'New comment';
commentList.append(newComment);
};
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 heart = document.querySelector('.heart');
let likesNumber = document.querySelector('.likes-number');
heart.onclick = function () {
if (heart.classList.contains('added')) {
likesNumber.textContent--;
} else {
likesNumber.textContent++;
}
heart.classList.toggle('added');
};
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
- Declare a variable
commentFieldin front of the event handler and write an element with thecomment-fieldclass to it . - Inside the handler, change the text content of the
newCommentelement to the data obtained from thecommentFieldinput field. - On the next line, clear the
commentFieldinput field by writing the empty string''to itsvalueproperty. - Click on the “Submit” button.
Please note that a new comment has appeared in the comment section, and the text from the input field has disappeared.
Comments