JSFiddle - React, Tailwind, and code Playground

by Khalid Alharbi

HTML

<h1>Like or Dislike</h1>
    <button id="likebtn" onclick="doLike()">đź‘Ť</button>
    <p id="likesCount">0</p>
    <button id="dislikebtn" onclick="doDislike()">đź‘Ž</button>
    <div id="result"></div>

CSS

body {
  max-width: 500px;
  margin: auto;
  text-align: center;
}

#likesCount {
  display: inline;
  padding: 0% 5%;
  font-size: 40px;
}

button {
  padding: 1% 2%;
  font-size: 40px;
}

JavaScript

const initialLikes = 100;
// Grab the likes total, like and dislike buttons
let likesElem = document.getElementById("likesCount");
let likeBtn = document.getElementById("likebtn");
let disLikeBtn = document.getElementById("dislikebtn");

count = initialLikes + parseInt(likesElem.innerText);
likesElem.innerText = count;

function createResultParagraph(text) {
  let p = document.createElement("p")
  p.innerText = text
  document.getElementById("result").appendChild(p);
}

function doLike() {
  likeBtn.disabled = true;
  disLikeBtn.disabled = true;
  count++;
  likesElem.innerText = count;
  createResultParagraph("You liked this!");
}

function doDislike() {
  likeBtn.disabled = true;
  disLikeBtn.disabled = true;
  count--;
  likesElem.innerText = count;
  createResultParagraph("You disliked this!");
}