Today I’ll be talking about how to 1) create a like button, 2) count the number of likes, and 3) appending the button and results to the DOM.
Say for instance we want to build an app that displays a random activity from an API.
First we call fetch, passing the API URL as an argument (as a string, wrap the URL in quotes). We then call
.then(), passing the response from our fetch as an argument, and calling
What do we want to do with our jsonified object? We want to display a random activity to the DOM, and we want to add a like button to it. So, we can write a function for that. Let’s call it
displayActivities(). Our function will take a parameter, of which we can pass our jsonified object, so let’s call the parameter
In our HTML, let’s create a
<div> where we will store the activities.
Now we’re ready to start writing code for our
First we grab our activity list
<div>, and store it into a variable.
Next we can create a paragraph element which will store the activity. We do this by setting this paragraphs’
object.activity, we are accessing whatever object we pass into our function (in this case our jsonified object), and accessing its
activity property. The value of this activity property is the random activity string which we want posted to the DOM. This activity property is defined in this specific API, so if you are using a different API, the key/property name may be different. Be sure to check your API documentation for its specific keys and values. In conclusion, with
boredomActivity.innerHTML = object.activity, we are saying this newly created paragraph holds the random activity string.
Now let’s create our like button, and set its
We’ll need to create another element to display our like count (how many times an activity was liked). Let’s make it another
<p> or paragraph element.
Now we should create a variable which stores the number of likes, named
Here with our variable declaration we are using ‘let’ instead of ‘const’. There is good reason for this! Const variables cannot be redeclared or reassigned, and let variables cannot be redeclared, but they can be reassigned. We use ‘let’ if the value of a variable is expected to change (it is commonly used in loops for this reason). In our case, we are expecting our
like value of
0 to change. We expect it to increase by
1, each time our like button is clicked. So by declaring our
like variable with
const, we would receive an error, because
const variables cannot be reassigned.
Now we can write our code for counting likes. Why not make it a function! Let’s name it
incrementLikes(). This function will be nested inside our
displayActivities() function, so that it can access the variables inside
displayActivities(). Let’s take a look our updated
Here in our
increaseLikes() function, we access our
like variable and say we want
like to equal
like + 1. We can use the increment operator
++ for this, which adds one to its operand and returns a value.
Now we just need to set the
innerHTML of our
likeCount paragraph to our
likes variable (containing the number of likes, which we’ve just incremented).
However, we can do better. The code above would result in only a number being displayed upon clicking on the like button. So let’s use string interpolation to add a string at the end, so instead of just a number being displayed, we would have a number plus
“likes”. Our code would then result in something like “ 4 likes” or “5 likes” being displayed, instead of just “4” or “5”. Rewrite the above code as follows:
There is still one minor problem though. When a user clicks the like button for the first time, it’s going to display “1 likes”, which is grammatically incorrect. Not to worry, there’s an easy fix for it! We can use a simple
We can use the
=== , the strict equality operator here, because we know that our
likes variable containing the number of likes will be a number, and here we’re comparing likes to another number:
1. We know that the likes variable contains a number because we started our counter at
0 , meaning we initially declared
likes, we set its value to equal
0. So since both comparisons are of the same type (they are both numbers), we don’t need to worry about type coercion here. If we didn’t know that both operands were going to be of the same type, we could use the equality operator
=== strict equality operator, we should use it.
displayActivities() function with our
increaseLikes() function nested inside, should now look like this:
Now that we have all of our code written for what we’d like to happen when a user clicks the like button, let’s add our event handler to make it work.
We attach the event handler to our
likeButton.addEventListener(). The first parameter of our event handler is the specified event. In our case it’s the
‘click’ event (there are many other types of events). The second parameter of our event handler is a function, which does the work we want when a user clicks the button. Notice that we haven’t invoked our
increaseLikes function with a
() at the end. The reason for this is that we only want the
increaseLikes function to be called once the button is clicked. If we added the
increaseLikes in our event handler, the
increaseLikes function would immediately be called, before the
click event. We use a callback function so our event handler waits for the click to invoke its function.
To complete our
displayActivities() function, we need to append our
likeCount to our
boredomActivity variable (the paragraph element we created earlier, which will hold each activity), and then append
boredomActivity to our
activityList variable (the
<div> element which will contain all the activities). We can use
node.appendChild() for this, which will add a node to the end of the list of children of a selected parent node.
Here we’ve appended the
likeCount nodes to the parent node of
boredomActivity, and then we’ve appended this
boredomActivity node (containing the
likeCount nodes) to our
activityList node, which now contains the random activities with their corresponding like buttons and like counts.
displayActivities() function will now look like this:
Let’s come back to our second
.then() call of our fetch at the beginning of this lesson, and call
displayActivities — passing in our jsonified
object as its argument.
In order for our
displayActivities() function to access the API of activities, we need to pass our jsonified object into it. This allows our function to access the API object’s activity property, whose value is the random activity string.
Here’s the entire code: