Simple Like Dislike Button With Pure HTML JS (Free Download!)

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

1-simple.html
<!-- (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>
  1. Captain Obvious to the rescue – Load the CSS and Javascript.
  2. Create an empty <div> for the like/dislike button.
  3. 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, default 0.
      • 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

2-count.html
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.
  • (C4) If you need to enable/disable the like/dislike button, use INSTANCE.enable() and INSTANCE.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

lidi.js
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:

  1. 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 on inst.status change.
  2. Create the HTML like/dislike buttons and attach them to inst.hWrap.
    • inst.hUp The HTML “like” button.
    • inst.hDown The HTML “dislike” button.
  3. If inst.count is defined, create the HTML like/dislikes count and attach them to inst.hWrap.
    • inst.hUpCount The HTML “likes” count.
    • inst.hDownCount The HTML “dislikes” count.
    • inst.recount() Function to update inst.count, inst.hUpCount, and inst.hDownCount.
  4. To handle the status change when the user clicks on like/dislike.
    • inst.updown() Function to handle the like/dislike status change. Update inst.status, the HTML interface, and call inst.change() with the new status.
  5. 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

This example should work in most modern browsers, all the required features are well-supported.

 

YOUTUBE TUTORIAL

 

LINKS & REFERENCES

 

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!

6 thoughts on “Simple Like Dislike Button With Pure HTML JS (Free Download!)”

  1. 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.

    1. 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”

  2. 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)

    1. 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.

Leave a Comment

Your email address will not be published. Required fields are marked *