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, 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

Download & Demo Like Dislike Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

QUICKSTART & DEMO

demo.html
<!-- (A) LOAD JS + CSS -->
<link rel="stylesheet" href="likedis.css"/>
<script src="likedis.js"></script>
 
<!-- (B) HTML <DIV> TO RENDER LIKE/DISLIKE BUTTON -->
<div id="demo"></div>
 
<!-- (C) JAVASCRIPT -->
<script>
likedis.attach({
  // (C1) TARGET WRAPPER TO GENERATE LIKE/DISLIKE
  target : document.getElementById("demo"),

  // (C2) OPTIONAL - LIKE STATUS, DEFAULT 0
  // -1 FOR DISLIKE, 0 FOR NONE, 1 FOR LIKE
  like : 1,
 
  // (C3) OPTIONAL - ADDITIONAL DATA
  data : {
    id : 999,
    key : "value"
  },

  // (C4) OPTIONAL - LIKE & DISLIKE TEXT (OR COUNT)
  uptxt : "LIKE",
  downtxt : "NOPE",

  // (C5) OPTIONAL - RUN THIS ON LIKE/DISLIKE CHANGE
  change : function (liked, button, up, down) {
    // LIKED : -1 FOR DISLIKE, 0 FOR NOT SET, 1 FOR LIKE
    // USE AJAX TO SEND THIS TO YOUR SERVER-SIDE
    console.log(liked);
 
    // SELECTED LIKE/DISLIKE BUTTON ITSELF
    console.log(button);
 
    // LIKE/DISLIKE TEXT - USE THESE TO UPDATE THE COUNT IF YOU LIKE
    console.log(up);
    console.log(down);
  }
});
</script>

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

  1. Load the CSS and Javascript.
  2. Create a <div> for the like/dislike button.
  3. On page load, simply call likedis.attach() to attach the like/dislike button.
    • target Where you want to attach the buttons.
    • like Optional, the like status. Set -1 for dislike, 1 for like, 0 for none. Defaults to 0.
    • data Optional. Append more data to the like/dislike button.
    • uptxt downtxt Optional. Use these to set the like/dislike text or count.
    • change Optional. This is a function that will be called whenever the user clicks on like/dislike, use this to update your server-side.

 

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

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.

 

1) THE JAVASCRIPT

likedis.js
var likedis = {
  // (A) CREATE WIDGET
  // opt : option
  //  target : target element to attach widget
  //  like : optional like status. default 0 (not set).
  //  data : optional data to append
  //  uptxt : optional. default upvote text.
  //  downtxt : optional. default downvote text.
  //  change : optional. do this on like/dislike change.
  attach : function (opt) {
    // (A1) CONTAINER CSS + DEFAULT "LIKE STATUS" + CUSTOM DATA
    opt.target.classList.add("likedis");
    opt.target.dataset.like = opt.like ? opt.like : "0";
    if (opt.data) { for (let k in opt.data) {
      opt.target.dataset[k] = opt.data[k];
    }}

    // (A2) UPVOTE + DOWNVOTE ICONS
    let up = document.createElement("div"),
        icoup = document.createElement("div"),
        down = document.createElement("div"),
        icodown = document.createElement("div");
    up.classList.add("up");
    down.classList.add("down");
    icoup.classList.add("icoup");
    icodown.classList.add("icodown");
    up.appendChild(icoup);
    down.appendChild(icodown);
    opt.target.appendChild(up);
    opt.target.appendChild(down);

    // (A3) UPVOTE + DOWNVOTE TEXT
    let notxt = opt.uptxt === undefined || opt.downtxt === undefined,
        txtup, txtdown;
    if (notxt) {opt.target.classList.add("notxt"); }
    else {
      txtup = document.createElement("div");
      txtdown = document.createElement("div");
      txtup.classList.add("txtup");
      txtdown.classList.add("txtdown");
      txtup.innerHTML = opt.uptxt;
      txtdown.innerHTML = opt.downtxt;
      down.appendChild(txtdown);
      up.appendChild(txtup);
    }

    // (A4) ON LIKE/DISLIKE
    up.addEventListener("click", function(){
      likedis.toggle(opt.target, 1);
      if (opt.change) { opt.change(opt.target.dataset.like, opt.target, txtup, txtdown); }
    });
    down.addEventListener("click", function(){
      likedis.toggle(opt.target, 0);
      if (opt.change) { opt.change(opt.target.dataset.like, opt.target, txtup, txtdown); }
    });
  },

  // (B) TOGGLE LIKE/DISLIKE
  toggle : function (target, direction) {
    // (B1) GET CURRENT STATUS
    let current = target.dataset.like;

    // (B2) LIKE
    if (direction) {
      if (current=="1") { target.dataset.like = "0"; }
      else { target.dataset.like = "1"; }
    }

    // (B3) DISLIKE
    else {
      if (current=="-1") { target.dataset.like = "0"; }
      else { target.dataset.like = "-1"; }
    }
  },
 
  // (C) UPDATE LIKE/DISLIKE COUNT
  update : function (target, u, d) {
    if (!target.classList.contains("notxt")) {
      var up = target.getElementsByClassName("txtup")[0],
      down = target.getElementsByClassName("txtdown")[0];
      up.innerHTML = u;
      down.innerHTML = d;
    }
  }
};

This looks massive at first, but keep calm and look carefully. There are only 3 functions!

  1. attach() Basically, we are just creating the HTML elements and what to do on click. Will go through the generated HTML below.
  2. toggle() Handles the toggle like/dislike.
  3. update() Update the like/dislike text or count.

 

 

2) LIKE/DISLIKE BUTTON HTML

<div id="demo" class="likedis" data-like="0">
  <!-- UPVOTE -->
  <div class="up">
    <div class="icoup"></div>
    <div class="txtup"></div>
  </div>
 
  <!-- DOWNVOTE -->
  <div class="down">
    <div class="icodown"></div>
    <div class="txtdown"></div>
  </div>
</div>T

Yep, this is what the above Javascript generates.

  • <div class="up"> is the upvote button, <div class="down"> is the downvote button.
  • <div class="icoup"> and <div class="icodown"> are the thumbs up and thumbs down icons. Feel free to change this if you want to use your own image or icon set.
  • Lastly, <div class="txtup"> and <div class="txtdown"> is an open text field – Use this to set your “like” and “dislike” text, or use this to show the total count.

 

3) THE CSS

likedis.css
/* (A) CONTAINERS */
.likedis {
  width: 200px;
  padding: 10px;
  background: #f3f3f3;
}
.likedis.notxt { width: 80px; }
.likedis, .likedis .up, .likedis .down { display: flex; }

/* (B) LIKE DISLIKE BUTTONS */
.likedis .up, .likedis .down {
  align-items: center;
  width: 50%;
  cursor: pointer;
}

/* (C) THUMBS ICON */
.likedis .icoup, .likedis .icodown {
  width: 24px; height: 24px;
  background: url("likedislike.png");
}
.likedis .icodown { background-position: -48px; }

/* (D) TEXT OR COUNT */
.likedis .txtup, .likedis .txtdown {
  color: #989898;
  font-weight: 700;
  flex-grow: 1;
  padding-left: 7px;
}

/* (E) LIKED + DISLIKED */
.likedis[data-like="1"] .icoup { background-position: -24px; }
.likedis[data-like="1"] .txtup { color: #2a3c94; }
.likedis[data-like="-1"] .icodown { background-position: -72px; }
.likedis[data-like="-1"] .txtdown { color: #a02727; }

Just some CSS cosmetics. Feel free to change to your own liking.

 

 

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

 

EXTRA – AJAX EXAMPLE

likedis.attach({
  // TARGET <DIV>
  target : document.getElementById("demo"),
 
  // CUSTOM DATA
  data : { id : 123 },
 
  // DEFAULT TEXT
  uptxt : "YEA",
  downtxt : "NO",
 
  // AJAX UPDATE SERVER ON LIKE STATUS CHANGE
  change : function (liked, button, up, down) {
    // DATA TO SEND
    var data = new FormData();
    data.append("id", button.dataset.id);
    data.append("like", liked);

    // AJAX CALL
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://YOUR-SITE.COM/SERVER-SCRIPT");
    xhr.onload = function () {
      // UPDATE COUNT OR SOMETHING
      // up.innerHTML = this.response?
    };
    xhr.send(data);
  }
});

Finally, for those who may still be lost on what to do – Here is an example of a dummy AJAX call to update the server.

 

 

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!

Leave a Comment

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