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

Welcome to a tutorial and example on 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!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

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>

For you guys who just want to use this as a “plugin” without reading everything:

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

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.

 

 

 

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:

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.

 

 

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