JavaScript: How To Create A Simple Like Button
By: Ariel V Grubbs
Tags: JavaScript, Beginner

I previously made a blog post about how to make a like button with Ruby on Rails, and since my Flatiron cohort has now moved on to JavaScript, I figured I would make a follow up post.

For the purposes of this post I’ll be hooking my JavaScript up to a very simple api with a data structure that looks like this:

And my fetch requests will be toward a localhost address, but the code I use is the same on the JavaScript side as the one I would use for a Rails API backend that had the same content.

Step 1:

The first thing we have to do is wait. Wait for the DOM content to finish loading before we start running our JavaScript so that we have a firm grasp of what elements will exist when our code runs. That will look somehting like this:

In the second .then of that fetch request we’ve called another function, passing in the data that gets returned from the fetch request, which will be a JavaScript object containing all the information about the first image.

Step 2:

Now we need to look at the inside of that addPictureToPage function, specifically the part pertaining to the likes:

Here we declare a variable and set it equal to the first HTML element with the class “likes”, and then, using our new variable, we set the inner text of said HTML element to equal ` ${data.likes} likes ` which will end up looking like this on the browser page: “0 likes”. But this won’t remain at zero likes for long.

Then we use a second querySelector to declare a variable equal to the HTML element we’re setting up as the button the user will press to like the image. By the way, the relevant part of the HTML looks like this:

Now that we have variable equal to the like button, we simply add an event listener that’s listening for a click on the like button element. It’s inside the body of this event listener that we start to get fancy. We assign the inner text of the likes counter element as equal to the return value of another function, incrementLikes, and we also pass the object containing information about the image into this function. That leads us to step three.

Step 3:

The first thing we do inside this new function is declare a variable called “likes” that we will set equal to zero for now. Then we do our first fetch request of the function, in this fetch request we find the current number of likes according to the server. You might be wondering why we didn’t just pass in the number of likes when we called the function, or why we aren’t just checking the number of likes stored in the image object that we did pass into the function. The reason for this is that that data is old by now. It might very well be out of date, its origins trace back to the first fetch request we made when the page first loaded, the user might have done all kinds of things on the page. Among those many things the user might have done, is they might have already clicked the like button, they might be clicking it again. It’s a bit unconventional for us to allow the user to like something more than once, but for this application we’re going for it. Now that we know we have th ecurrent number of likes, and we’ve stored it in our handy “likes” variable, we create a “newLikes” variable that’s equal to the old likes plus one, or in other words, we’re incrementing the likes. Now we just need to update our server, this is where the second fetch request comes in. We use a patch method in this fetch, and we set the likes value of this image equal to our “newLikes” variable. All that’s left is to format the return value to be something that makes sense for the context that we’ve called it in. We create a string expressing the updated number of likes, and then return that string.