JavaScript: How to Create a Simple Like Button

Ariel V Grubbs
Dec 8, 2020 · 4 min read
Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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 the current 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.

The Startup

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store