Welcome to a tutorial and example of how to create a like-dislike button. Want to add your own like/dislike button? Here’s a quick sharing of my simple version using pure HTML CSS Javascript, with no third-party libraries. Read on!
TABLE OF CONTENTS
LIKE DISLIKE BUTTON DEMO
First, let us start with a quick demo for those who just want to use this as a “plugin” – Download links are below.
EXAMPLE 1) SIMPLE LIKE/DISLIKE BUTTON
<!-- (A) LOAD JS + CSS -->
<link rel="stylesheet" href="lidi.css">
<script src="lidi.js"></script>
<!-- (B) CREATE LIKE/DISLIKE BUTTON HERE -->
<div id="demoA"></div>
<!-- (C) JAVASCRIPT -->
<script>
lidi({
// (C1) TARGET HTML + INITIAL STATUS
hWrap : document.getElementById("demoA"),
status : 1,
// (C2) UPDATE SERVER ON LIKE/DISLIKE CHANGE
change : status => {
var data = new FormData();
data.append("status", status);
fetch("1-dummy.txt", { method: "POST", body: data })
.then(res => res.text())
.then(txt => console.log(txt))
.catch(err => console.error(err));
}
});
</script>
- Captain Obvious to the rescue – Load the CSS and Javascript.
- Create an empty
<div>
for the like/dislike button. - On page load, call
lidi()
to attach the like/dislike button.hWrap
Target HTML wrapper to attach the like/dislike button.status
The initial like/dislike status, default0
.0
Neutral, not set.-1
Dislike.1
Like.
change(status)
Function to handle the like/dislike change.status
contains the new reaction and should be sent to update the server.
EXAMPLE 2) LIKE/DISLIKE BUTTON WITH COUNT
var demo = lidi({
// (C1) TARGET HTML + INITIAL STATUS + COUNT
hWrap : document.getElementById("demoB"),
status : -1,
count : [123, 45],
// (C2) UPDATE SERVER ON LIKE/DISLIKE CHANGE
// server should respond with updated like/dislike count
// e.g. [123, 456]
change : status => {
var data = new FormData();
data.append("status", status);
fetch("2-dummy.txt", { method: "POST", body: data })
.then(res => res.json())
.then(count => demo.recount(count))
.catch(err => console.error(err));
}
});
// (C3) OR MANUALLY CALL RECOUNT()
// demo.recount([999, 888]);
// (C4) TO ENABLE/DISABLE THE LIKE/DISLIKE BUTTON
// demo.enable();
// demo.disable();
This is pretty much the same as the above example, but with a few more options.
- (C1)
count
An array to indicate the initial likes/dislike count, in the format of[LIKES, DISLIKES]
. - To update the likes/dislike count, use
INSTANCE.recount([LIKES, DISLIKES])
.- (C2) One possible place to update the likes/dislike count is in
change()
. When the user changes the like/dislike status, we also set the server to return the updated count. - (C3) Or call
INSTANCE.recount()
at any time in your scripts.
- (C2) One possible place to update the likes/dislike count is in
- (C4) If you need to enable/disable the like/dislike button, use
INSTANCE.enable()
andINSTANCE.disable()
respectively.
HOW IT WORKS
All right, for you guys who want to “deep customize” or learn more – Here are the details of the like/dislike button.
LIKE/DISLIKE BUTTON JAVASCRIPT
function lidi (inst) {
// hWrap : html like/dislike container
// change : function to handle like/dislike toggle change
// status : -1 dislike, 0 neutral, 1 like (optional, default 0)
// count : [likes, dislikes] (optional)
// (A) DEFAULT STATUS + CSS WRAPPER CLASS
if (!inst.status) { inst.status = 0; }
inst.hWrap.classList.add("lidiWrap");
// (B) ATTACH LIKE & DISLIKE BUTTON
inst.hUp = document.createElement("div");
inst.hDown = document.createElement("div");
inst.hUp.className = "lidiUp";
inst.hDown.className = "lidiDown";
if (inst.status==1) { inst.hUp.classList.add("set"); }
if (inst.status==-1) { inst.hDown.classList.add("set"); }
inst.hWrap.appendChild(inst.hUp);
inst.hWrap.appendChild(inst.hDown);
// (C) ATTACH LIKE & DISLIKE COUNT
if (inst.count) {
// (C1) LIKE & DISLIKE COUNT HTML
inst.hUpCount = document.createElement("div");
inst.hDownCount = document.createElement("div");
inst.hUpCount.className = "lidiUpCount";
inst.hDownCount.className = "lidiDownCount";
inst.hUpCount.innerHTML = inst.count[0];
inst.hDownCount.innerHTML = inst.count[1];
inst.hWrap.classList.add("count");
inst.hWrap.insertBefore(inst.hUpCount, inst.hDown);
inst.hWrap.insertBefore(inst.hDownCount, inst.hDown.nextSibling);
// (C2) UPDATE LIKE & DISLIKE COUNT
inst.recount = count => {
inst.count = count;
inst.hUpCount.innerHTML = count[0];
inst.hDownCount.innerHTML = count[1];
};
}
// (D) TOGGLE LIKE/DISLIKE
inst.updown = up => {
// (D1) UPDATE STATUS FLAG
if (up) { inst.status = inst.status == 1 ? 0 : 1; }
else { inst.status = inst.status == -1 ? 0 : -1; }
// (D2) UPDATE LIKE/DISLIKE CSS
if (inst.status==1) {
inst.hUp.classList.add("set");
inst.hDown.classList.remove("set");
} else if (inst.status==-1) {
inst.hUp.classList.remove("set");
inst.hDown.classList.add("set");
} else {
inst.hUp.classList.remove("set");
inst.hDown.classList.remove("set");
}
// (D3) TRIGGER CHANGE
inst.change(inst.status);
};
// (E) ENABLE/DISABLE
inst.enable = () => {
inst.hUp.onclick = () => inst.updown(true);
inst.hDown.onclick = () => inst.updown(false);
};
inst.disable = () => {
inst.hUp.onclick = "";
inst.hDown.onclick = "";
};
inst.enable();
// (F) DONE
return inst;
}
There is only a single function lidi()
driving the like/dislike button, and you have already seen it in action in the above examples. Not going to explain line-by-line, so here’s a quick summary:
- The first part pretty much just sets the default
status
if it is not defined.inst.hWrap
The HTML<div>
wrapper to generate the like/dislike button.inst.status
The current status of the like/dislike button.inst.count
Current likes/dislikes count in an array[LIKES, DISLIKES]
.inst.change
Function to call oninst.status
change.
- Create the HTML like/dislike buttons and attach them to
inst.hWrap
.inst.hUp
The HTML “like” button.inst.hDown
The HTML “dislike” button.
- If
inst.count
is defined, create the HTML like/dislikes count and attach them toinst.hWrap
.inst.hUpCount
The HTML “likes” count.inst.hDownCount
The HTML “dislikes” count.inst.recount()
Function to updateinst.count
,inst.hUpCount
, andinst.hDownCount
.
- To handle the status change when the user clicks on like/dislike.
inst.updown()
Function to handle the like/dislike status change. Updateinst.status
, the HTML interface, and callinst.change()
with the new status.
- Returns
inst
– Which now contains the full HTML interface and functions.
LIKE/DISLIKE BUTTON HTML
<div id="demoB" class="lidiWrap count">
<div class="lidiUp"></div>
<div class="lidiUpCount"></div>
<div class="lidiDown set"></div>
<div class="lidiDownCount"></div>
</div>
This is what the Javascript generates, take note that the “thumbs up” and “thumbs down” icon is using lidi.png
. Feel free to modify section (C1) if you want to use Font Awesome, Material Icons, or whatever icon set of your own choice.
DOWNLOAD & NOTES
Here is the download link to the example code, so you don’t have to copy-paste everything.
SORRY FOR THE ADS...
But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.
Buy Me A Coffee Code Boxx eBooks
EXAMPLE CODE DOWNLOAD
Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
EXTRA BITS & LINKS
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
HOW ABOUT MULTIPLE BUTTONS?
<!-- (A) DUMMY HTML PRODUCTS -->
<div class="pdt" data-pid="1"></div>
<div class="pdt" data-pid="2"></div>
<script>
// (B) ATTACH LIKE/DISLIKE BUTTONS
for (let p of document.querySelectorAll(".pdt")) {
lidi({
hWrap : p,
change : stat => {
// stat is the new reaction - 0, 1, or -1
// p.dataset.pid contains the product id
// send these to the server and update your database
}
});
}
</script>
But of course, there are endless other ways to do it – Just make sure that the proper ID is associated with the like/dislike button and passed to the server “on reaction change”.
COMPATIBILITY CHECKS
- Arrow Functions – CanIUse
- CSS Flex – CanIUse
This example should work in most modern browsers, all the required features are well-supported.
YOUTUBE TUTORIAL
LINKS & REFERENCES
- PHP MySQL Like Dislike System – Code Boxx
- Example on CodePen – Simple Javascript Like/Dislike Button
THE END
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
If you can help me with the next problem. I want a software, to be as simple as possible to use, to be able to modify, as I want, likes and dislikes vote on the forums.
Best regards.
Hire a freelancer. Good luck with your project.
https://code-boxx.com/faq/#help “I don’t work for free”
O.K.
I didn’t even say wanted something for free. If you think can help me, then please tell me what your price is.To make everything clear, I want software that is easy to use, if possible in portable format, not exe.,be compatible with win 10, win 11 and work with all browsers firefox, chrome, opera etc. that I can modify any upvote / downvote on any media website, forums, etc.to be able to give millions of likes up or down 🙂
Best regards.
PS: Please reply to my adress “ANTI-SPAM-CENSOR@gmail.com”
Hiring an overpriced overrated senior web dev & content creator is never a good choice 😉
https://code-boxx.com/faq/#hire
https://code-boxx.com/faq/#help “Contact Me”
Hi, good code.
But what if I have dynamic IDs of elements? I see here we create everything only having constant id and no way to pass it with function for example. (because create method requires constant id)
Not quite sure what you mean, but:
1) If you have created a
<div id="DYNAMIC ID">
2) Then just pass in
hWrap: document.getElementById("DYNAMIC ID")
?3) There are also several other ways to get HTML elements?
<div class="lidi" id="DYNAMIC ID">
–for (let a of document.querySelectorAll("div.lidi")) { lidi({ hWrap: a }); }
.I will highly suggest you revisit the basics of how to create, insert, delete, and get HTML elements in Javascript. Good luck with your project.