Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
The Length Property, Calculating the String Length
We have already learned about the event handler oninput, and we were able to get data from the input field without submitting the form. The boss wants the comments to be no longer than 142 characters and for users to see how many characters they have already typed in real time. To do this, we need to calculate the length of the comment and display it on the page.
The length property will help us to determine what the comment length is. The value of this property is equal to the number of characters in the string. Characters are more than just letters and numbers. They also include white spaces and line breaks.
let text = 'I love JavaScript';
console.log(text.length); // Displays: 17
let textarea = document.querySelector('textarea');
console.log(textarea.value); // Displays: Muffin
console.log(textarea.value.length); // Displays: 6News site users should be able to see the length of the text that they typed. To display the length of the page, change the text content of the element with the char-counter class. This element is located directly below the input field:
<span class="text-counter">
Used: <span class="char-counter">0</span>//142 characters
</span>The character counter must respond to every change to the input field, so we will change the text content of the element inside our oninput handler. To make sure that the character counter is working, start typing a new comment.
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">18</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"></textarea>
</div>
<span class="text-counter"><span class="char-counter">0</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');
// Declare a variable here
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 () {
console.log(commentField.value);
};
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
- On line 4, declare a variable
charCounterand write an element to it with the classchar-counter. - Remove the text that was output to the console inside the
oninputevent handler. - Inside the
oninputevent handler, assign the valuecommentField.value.lengthtocharCounter.textContent - In the mini-browser, start typing text in the field. Just three characters will suffice. Notice how the counter value below the input field changes each time that the length of the text changes.
Comments