JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div id="a" class="btn">A</div>

<div id="b" class="btn">B</div>

<div id="c" class="btn">C</div>

CSS

.btn {
   color: white;
   border-radius: 13px;
   min-width: 30px;
   max-width: 40px;
   text-align: center;
   margin-bottom: 8px;
 }
 
 .redBtn {
   background-color: red;
 }

 .blueBtn {
   background-color: blue;
 }
 
 .greenBtn {
   background-color: green;
 }

JavaScript

(function() {
  console.log("called");
  let className = null;
  let expression = "neutral";

  className = expression === "neutral" ? "blueBtn" : (expression === "upward" ? "greenBtn" : "redBtn")
  document.querySelector("#a").classList.add(className);

  expression = "downward";
  className = expression === "neutral" ? "blueBtn" : (expression === "upward" ? "greenBtn" : "redBtn")
  document.querySelector("#b").classList.add(className);

  expression = "upward";
  className = expression === "neutral" ? "blueBtn" : (expression === "upward" ? "greenBtn" : "redBtn")
  document.querySelector("#c").classList.add(className);
})();