Simple Like Dislike Button (Free Download)

Welcome to a tutorial on how to create a like-dislike button. Want to add a like/dislike button to your project? Well, you don’t need to load an entire third-party library for that. Here’s a quick sharing of my simple version, read on!

 

 

TABLE OF CONTENTS

 

DOWNLOAD & DEMO

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

EXAMPLE CODE DOWNLOAD

Click here to download | Example on CodePen

The example code is released under the MIT license, so feel free to build on top of it or use it in your own project.

 

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

 

DEMO & HOW TO USE

2-widget.html
<!-- (A) LOAD CSS + JS -->
<link rel="stylesheet" href="lidi.css">
<script src="lidi.js"></script>
 
<!-- (B) EMPTY CONTAINER -->
<div id="demo"></div>
 
<!-- (C) JAVASCRIPT -->
<script>
lidi({
  target : document.getElementById("demo"),
  update : status => { console.log(status); },
  set : true // true for like, false for dislike.
});
</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.
    • target Where to attach the like/dislike button.
    • update(status) Function to handle the like/dislike change, status contains the new reaction.
      • 0 Neutral, not set.
      • -1 Dislike.
      • 1 Like.
    • set The initial like/dislike status, optional.
      • true Like.
      • false Dislike.

 

 

LIKE DISLIKE BUTTON

All right, for you guys who want to “deep customize” or learn more – Here are the details of the like/dislike button.

 

TUTORIAL VIDEO

 

PART 1) BUTTON HTML

1-basic.html
<div class="lidi">
  <i class="up set"></i>
  <i class="down"></i>
</div>

Let us start with the basic HTML, this should be self-explanatory.

  • <div class="lidi"> Wrapper, the “entire like/dislike button”.
  • <i class="up> The like icon.
  • <i class="down> The dislike icon.
  • set Currently selected, like or dislike.

 

 

PART 2) THE CSS

lidi.css
/* SVG FROM - https://feathericons.com */
.lidi i {
  display: inline-block;
  width: 32px; height: 32px;
  background: #323232;
  mask-size: cover !important;
}
.lidi i.up { mask: url(thumbs-up.svg) }
.lidi i.down { mask: url(thumbs-down.svg) }
.lidi i.up.set { background: #462dff; }
.lidi i.down.set { background: #dd3d3d; }
  • The like/dislike buttons are just 2 SVG images from Feather Icons.
  • Instead of using the usual image tag or background image, we insert the icons with a “funky CSS mask”.
  • The reason is simple. So that we can change the color of the SVG icons by switching the background color.

 

PART 3) JAVASCRIPT WIDGET

lidi.js
function lidi (inst) {
  // (A) ATTACH HTML
  inst.target.innerHTML = `<i class="up"></i><i class="down"></i>`;
  inst.target.classList.add("lidi");
  inst.up = inst.target.querySelector("i.up");
  inst.down = inst.target.querySelector("i.down");
 
  // (B) SET INITIAL LIKE/DISLIKE
  if (inst.set===true) { inst.up.classList.add("set"); }
  if (inst.set===false) { inst.down.classList.add("set"); }
 
  // (C) LISTEN TO CLICKS
  let clicked = like => {
    // (C1) CLICKED ON LIKE
    if (like) {
      if (inst.up.classList.contains("set")) {
        inst.up.classList.remove("set");
        inst.update(0);
      } else {
        inst.up.classList.add("set");
        inst.down.classList.remove("set");
        inst.update(1);
      }
    }
 
    // (C2) CLICKED ON DISLIKE
    else {
        if (inst.down.classList.contains("set")) {
        inst.down.classList.remove("set");
        inst.update(0);
      } else {
        inst.down.classList.add("set");
        inst.up.classList.remove("set");
        inst.update(-1);
      }
    }
  };
  inst.up.onclick = () => clicked(true);
  inst.down.onclick = () => clicked(false);
}

Now that we have walked through the HTML CSS, it’s time to turn it into a reusable widget. As in the demo above, there is only one lidi() function.

  1. Adds the like/dislike buttons to the target <div>.
  2. Set the initial like/dislike status.
  3. When the user clicks on like/dislike.
    • If the user clicks on like, unset dislike and “return 1“.
    • If the user clicks on dislike, unset like and “return -1“.
    • If previously liked and the user clicks on like, reset to neutral and “return 0“.
    • If previously disliked and the user clicks on dislike, reset to neutral and “return 0“.

 

 

EXTRAS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

HOW TO SEND LIKE/DISLIKE TO THE SERVER?

lidi({
  target : document.getElementById("demo"),
  onclick : status => {
    // FORM DATA
    var data = new FormData();
    data.append("liked", status);
 
    // SEND TO SERVER
    fetch("YOUR-SERVER-SCRIPT", { method:"POST", body:data })
    .then(res => res.text())
    .then(txt => console.log(txt));
  }
});

A quick “fan service” for beginners – Study AJAX fetch, check out the links below.

 

 

HOW TO CREATE MULTIPLE BUTTONS?

<!-- DUMMY PRODUCTS -->
<div class="pdt" data-id="1"></div>
<div class="pdt" data-id="2"></div>
 
<script>
// ATTACH LIKE/DISLIKE BUTTONS
for (let p of document.querySelectorAll(".pdt")) {
  lidi({
    target : p,
    update : status => {
      // status is the new reaction - 0, 1, or -1
      // p.dataset.id 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.

 

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 (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 *