0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<blockquote><p>Meow! I want to know how many people liked the news story. Make a counter!</p>
1
<blockquote><p>Meow! I want to know how many people liked the news story. Make a counter!</p>
2
</blockquote><p>There is no limit to perfection and things that the boss wants! We still have to finish the like system. Now the user can add and cancel their likes by clicking on the “heart” under the picture in the news story. But this does not take into account of how many people actually liked the news story so does not show the number. You can fix this by adding a counter.</p>
2
</blockquote><p>There is no limit to perfection and things that the boss wants! We still have to finish the like system. Now the user can add and cancel their likes by clicking on the “heart” under the picture in the news story. But this does not take into account of how many people actually liked the news story so does not show the number. You can fix this by adding a counter.</p>
3
<p>The “heart” button is stored in the heart variable. When the user adds a like, the added class is added to the button and the “heart” becomes completely filled with color. When the like is canceled, the added class is cleared, and the button returns to its original state. The classList.toggle method is responsible for switching the class. We encountered<a>this method</a> in the introductory chapter. To display the number of likes on the page, the web designer prepared an element with the likes-number class.</p>
3
<p>The “heart” button is stored in the heart variable. When the user adds a like, the added class is added to the button and the “heart” becomes completely filled with color. When the like is canceled, the added class is cleared, and the button returns to its original state. The classList.toggle method is responsible for switching the class. We encountered<a>this method</a> in the introductory chapter. To display the number of likes on the page, the web designer prepared an element with the likes-number class.</p>
4
<p>This is what the button looks like in the markup:</p>
4
<p>This is what the button looks like in the markup:</p>
5
<!-- No like, empty heart --> <button class="heart"><span class="likes-number"></span></button> <!-- Like has been added, heart filled with color --> <button class="heart added"><span class="likes-number"></span></button><p>To save the number of likes, we need a counter variable. Its value will be a <i>number</i>.</p>
5
<!-- No like, empty heart --> <button class="heart"><span class="likes-number"></span></button> <!-- Like has been added, heart filled with color --> <button class="heart added"><span class="likes-number"></span></button><p>To save the number of likes, we need a counter variable. Its value will be a <i>number</i>.</p>
6
// Assign a value (a number) to the variable let number = 7;<p>Please note that we do not place numbers in quotation marks.</p>
6
// Assign a value (a number) to the variable let number = 7;<p>Please note that we do not place numbers in quotation marks.</p>
7
<p>Let’s call the counter variable counter and assign it the value 0. So long as no one clicks, there will be no likes. After that, output the value of the counter to the page using the textContent element property with the likes-number class. In the introductory chapter we already<a>worked with the text content</a>of elements.</p>
7
<p>Let’s call the counter variable counter and assign it the value 0. So long as no one clicks, there will be no likes. After that, output the value of the counter to the page using the textContent element property with the likes-number class. In the introductory chapter we already<a>worked with the text content</a>of elements.</p>