Like

by David

HTML

<div class="like-button-wrapper" id="likeWrapper">
    <div class="like-button" id="likeButton"></div>
  </div>

CSS

body {
  font-family: sans-serif;
  font-size:13px;
  user-select: none;
}

main {
  margin: 160px 0 0 0;
  width: 100%;
}

.like-button-wrapper {
  display:flex;
  width: 30px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
}

.like-button {
  position:absolute;
  z-index:1;
  width:30px;
  height:30px;
  border:2px solid red;
}

.like-total {
  line-height:30px;
  margin: 0 0 0 40px;
}

.your-likes {
  width:20px;
  height:20px;
  font-size:10px;
  text-align:center;
  border-radius: 50%;
  background:#989898;
  color:#fff;
  position:absolute;
  left:5px;
  z-index:0;
  line-height:20px;
  margin: 0 10px 0 0;
  opacity:1;
}

.move-your-likes {
  -webkit-animation-name: moveLikes;
  -webkit-animation-duration: 0.8s;
}

@keyframes moveLikes {
  from { top:0; opacity:0; }
  to { top: -40px; opacity:1; }
}

JavaScript

const likeWrapper = document.getElementById("likeWrapper");
let yourLikeTotal = 0;
let mouseDown = 0;
const yourLikes = document.getElementById("yourLikes_postid_" + yourLikeTotal);

document.body.onmousedown = function() { ++mouseDown }
document.body.onmouseup = function() { --mouseDown }


const addToYourLikes = () => {
  console.log(yourLikeTotal)
  console.log(yourLikes)
  yourLikes.innerHTML = yourLikeTotal
  yourLikeTotal++
  console.log("addToYourLikes");
}

const moveYourLikes = () => {
  yourLikes.classList.add("move-your-likes")
  setTimeout( () => { 
  yourLikes.classList.remove('move-your-likes');
    console.log("remove class")
}, 800);
  console.log("moveYourLikes");
}

const addEl = () => {
  const id = "yourLikes_postid_" + yourLikeTotal;
  const div = '<div id=' + id + ' ' + 'class="your-likes">0</div>';
  likeWrapper.innerHTML += div;
}


likeWrapper.addEventListener("mouseup", () => {
  /* if mousedown and up execute 1 button animation -
  while mousedown do not end animation, just keep adding to totals
  */
  addEl();
  addToYourLikes();
  moveYourLikes();
})