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

 

 

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

<!-- (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.

 

 

 

TUTORIAL VIDEO

 

PART 1) BUTTON 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

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

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

 

 

 

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

• Arrow Functions – CanIUse
• CSS Flex – CanIUse

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

 

LINKS & REFERENCES

• PHP MySQL Like Dislike System – Code Boxx
• Simple PHP AJAX Examples – Code Boxx
• Fetch – MDN