Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Compare the numbers
Excellent. Now the character counter shows the length of the new comment! If the comment is longer than 142 characters, we need to show an error message: the character counter and the text in the input field should turn red. For the message to appear, you need to add the warning class to the comment form. We have already worked with this form in the previous chapter. It is saved in the commentForm variable.
The error message should appear only if the new comment is too long. The use of the word “if” in an assignment is a sure sign that we need a conditional statement. We already learned about the if statement in this assignment.
To determine if the character limit is exceeded, compare the comment length with the number 142. To do this, use the comparison operator > (“greater than”). It compares two numbers and returns a Boolean value: true if the the left one is greater than the right one and false in all other cases. For example:
console.log(3 > 2); // Returns: true
console.log(1 > 2); // Returns: false
console.log(2 > 2); // Returns: falseTo check whether the new comment falls within the prescribed length, we add a conditional statement to our script: compare the length of the text from the input field with the number 142 and, if the length is longer, add the warning class to the form. Then test how well the verification works by trying to submit a comment that is too long.
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="tooltip">
<span class="tooltip-text"></span>
<button class="button close-button" type="button"><span>Close</span></button>
</div>
<article class="container">
<h1 class="inner-heading">It can be healthy to go for a walk.</h1>
<div class="news-full">
<img src="img/walk.jpg" alt="People go for walks.">
<div class="news-stats">
<button class="heart" type="button"><span class="likes-number">21</span></button>
<time datetime="2020-02-19">February 19, 2020</time>
</div>
<p>However, that might not be the case if you don't go for a stroll <button class="tooltip-button" type="button" data-tooltip-text="Or just don't go there">with those people</button>. Scientists from <button class="tooltip-button" type="button" data-tooltip-text="That's a very cool university">Harvard</button> have found that relationships with loved ones affect happiness more than intelligence, salary, or your number of <button class="tooltip-button" type="button" data-tooltip-text="Did YOU sign up for the newsletter?">followers</button>. It still remains <button class="tooltip-button" type="button" data-tooltip-text="More money is needed">unclear</button> how the number of <button class="tooltip-button" type="button" data-tooltip-text="The superior lifeform">kitties</button> affects your level of happiness.</p>
</div>
</article>
<section class="comment-feed container">
<h2>Comments</h2>
<ol class="comment-list">
<li class="user-comment">From the point of view of banal erudition, every individual whose cynical thinking creates associations with concepts of paradoxical illusions simply cannot but ignore the criteria of utopian subjectivity. And from the point of view of the value or content of this logical statement, it is determined by means of a purely negative predicate whether it adds anything to the entire body of knowledge. <br>
Immanuel Kant <br>
Do you think that you understand human nature better than Kant?</li>
</ol>
<form action="https://echo.htmlacademy.ru/courses" method="post" class="comment-form">
<div class="comment-inner">
<label class="comment-label" for="comment-textarea">your comment</label>
<textarea class="comment-field comment-area" rows="3" placeholder="Comment" required id="comment-textarea">To understand Kant's philosophy, you must first understand yourself. It might take you some time to achieve this. It often happens that you want to give a person happiness, but instead you bring them a volume of Kant.</textarea>
</div>
<span class="text-counter"><span class="char-counter">217</span>/218 characters used</span>
<button class="button submit-button" type="submit">Submit</button>
</form>
</section>
</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>
<script src="tooltip.js"></script>
</body>
</html>
/* Button text styles */
.tooltip-button {
cursor: pointer;
position: relative;
padding: 1px 8px;
border: none;
color: inherit;
font: inherit;
}
.tooltip-button::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 0;
border: 4px solid;
border-left-color: transparent;
border-bottom-color: transparent;
}
/* Tooltip styles */
@keyframes tooltip-opener {
0% {
transform: translate(50%) scaleX(0);
}
100% {
transform: translate(100%) scaleX(100%);
}
}
.tooltip {
z-index: 2;
display: none;
flex-direction: row-reverse;
position: fixed;
max-width: 256px;
right: 0;
top: 160px;
border-radius: 8px 0 0 8px;
}
.opened {
display: flex;
animation: tooltip-opener 150ms;
}
.tooltip-text {
display: flex;
align-items: center;
padding: 10px;
}
.close-button {
min-height: 64px;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
margin: 0;
padding: 0;
border-radius: 8px 0 0 8px;
}
.close-button span {
display: inline-block;
vertical-align: middle;
transform: rotate(-90deg);
}
/* Comment entry block styles */
.comment-area {
height: unset;
resize: none;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
line-height: 24px;
}
.text-counter {
display: inline-block;
vertical-align: baseline;
padding: 7px 0;
margin-right: auto;
}
.comment-form.warning .comment-label {
color: #f05b29;
}
.comment-form.warning .comment-area {
color: #f05b29;
border-color: #f05b29;
}
.comment-form.warning .comment-area:focus {
outline-color: #f05b29;
}
.comment-form.warning .char-counter {
color: #f05b29;
font-weight: bold;
}
.submit-button:disabled {
opacity: 0.25;
}
/* Color schemes */
.light-theme .tooltip {
background-color: #ffffff;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}
.light-theme .tooltip-button {
background-color: #f2f2f2;
}
.light-theme .tooltip-button:focus,
.light-theme .tooltip-button:hover {
background-color: #6653d9;
color: #ffffff;
outline-color: #b6aaff;
}
.tooltip-button:active {
opacity: 0.6;
}
.light-theme .tooltip-button::after {
border-right-color: #6653d9;
border-top-color: #6653d9;
}
.dark-theme .tooltip {
background-color: #2a2930;
box-shadow: 0 0 16px rgba(0, 0, 0, 1);
}
.dark-theme .tooltip-button {
background-color: #0a0910;
}
.dark-theme .tooltip-button:focus,
.dark-theme .tooltip-button:hover {
outline-color: #6653d9;
background-color: #b6aaff;
color: #17161a;
}
.dark-theme .tooltip-button::after {
border-right-color: #b6aaff;
border-top-color: #b6aaff;
}
let tooltip = document.querySelector('.tooltip');
let closeButton = document.querySelector('.close-button');
let tooltipButtons = document.querySelectorAll('.tooltip-button');
let tooltipText = document.querySelector('.tooltip-text');
closeButton.onclick = function () {
tooltip.classList.remove('opened');
};
for (let tooltipButton of tooltipButtons) {
tooltipButton.onclick = function () {
tooltipText.textContent = tooltipButton.dataset.tooltipText;
tooltip.classList.add('opened');
};
}
let commentForm = document.querySelector('.comment-form');
let commentList = document.querySelector('.comment-list');
let commentField = document.querySelector('.comment-field');
let charCounter = document.querySelector('.char-counter');
commentForm.onsubmit = function (evt) {
evt.preventDefault();
let newComment = document.createElement('li');
newComment.classList.add('user-comment');
newComment.textContent = commentField.value;
commentField.value = '';
commentList.append(newComment);
};
commentField.oninput = function () {
charCounter.textContent = commentField.value.length;
// Add a conditional statement here
};
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
- Inside the
oninputhandler on line 19 add the conditional statementif () {}. In parentheses, specify the condition:commentField.value.length > 218. - Inside the curly braces of the conditional statement, add the
warningclass to thecommentFormelement using theclassList.addmethod. - In the mini-browser type any two additional characters in the comment field. Notice how the counter has turned red.
- Click the “Submit” button. Notice how the comment was added to the feed despite the fact that it exceeded the permitted number of characters.
Comments