reply View all Tutorials & Projects

How to Create a Like and Dislike Button with HTML, CSS & JavaScript

Learn how to create a like and dislike button using only HTML, CSS & JavaScript in this tutorial. This is great for when you want to give your website users the ability to rate something such as a post, image or video.

Video Tutorial

Source Code

You can find the source code for this video below.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Like/Dislike Counter</title>
	<link rel="stylesheet" href="main.css">
	<script src="main.js" defer></script>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
	<div class="post" data-post-id="7712">
		<img class="post-image" src="https://placehold.co/600x400" alt="Post Image">
		<div class="post-ratings-container">
			<div class="post-rating">
				<span class="post-rating-button material-icons">thumb_up</span>
				<span class="post-rating-count">0</span>
			</div>
			<div class="post-rating">
				<span class="post-rating-button material-icons">thumb_down</span>
				<span class="post-rating-count">0</span>
			</div>
		</div>
	</div>
</body>
</html>
main.css
.post {
	width: 400px;
	font-family: 'Lexend', sans-serif;
}

.post-image {
	display: block;
	width: 100%;
}

.post-ratings-container {
	display: flex;
	justify-content: end;
	padding: 12px 0;
}

.post-rating {
	display: flex;
	align-items: center;
	cursor: default;
}

.post-rating:not(:last-child) {
	margin-right: 12px;
}

.post-rating-selected > .post-rating-button,
.post-rating-selected > .post-rating-count {
	color: #009578;
}

.post-rating-button {
	margin-right: 6px;
	cursor: pointer;
	color: #555555;
}

.post-rating:not(.post-rating-selected) > .post-rating-button:hover {
	color: #000000;
}
main.js
document.querySelectorAll(".post").forEach(post => {
	const postId = post.dataset.postId;
	const ratings = post.querySelectorAll(".post-rating");
	const likeRating = ratings[0];

	ratings.forEach(rating => {
		const button = rating.querySelector(".post-rating-button");
		const count = rating.querySelector(".post-rating-count");

		button.addEventListener("click", async () => {
			if (rating.classList.contains("post-rating-selected")) {
				return;
			}

			count.textContent = Number(count.textContent) + 1;

			ratings.forEach(rating => {
				if (rating.classList.contains("post-rating-selected")) {
					const count = rating.querySelector(".post-rating-count");

					count.textContent = Math.max(0, Number(count.textContent) - 1);
					rating.classList.remove("post-rating-selected");
				}
			});

			rating.classList.add("post-rating-selected");

			const likeOrDislike = likeRating === rating ? "like" : "dislike";
			const response = await fetch(`/posts/${postId}/${likeOrDislike}`);
			const body = await response.json();
		});
	});
});

If you have any questions about this code, please leave a comment on the video.