JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="wrapper">
  <div class="show-input" id="input">0</div>
  <div class="digits" id="digits">
    <button>9</button>
    <button>8</button>
    <button>7</button>
    <button>6</button>
    <button>5</button>
    <button>4</button>
    <button>3</button>
    <button>2</button>
    <button>1</button>
    <button>0</button>
    <button>.</button>
    <button>%</button>
  </div>
  <div class="modifiers">
    <button id="clear">Clear</button>
    <button id="all-clear">AC</button>
  </div>
  <div class="operations">
    <button>+</button>
    <button>-</button>
    <button>*</button>
    <button>/</button>
    <button id="equals">=</button>
  </div>
</div>

CSS

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #1a1a1a;
  color: white;
}
.wrapper {
  max-width: 210px;
  min-height: 48vh;
  margin: 0 auto;
  background-color: #333;
}

button {
  border: 1px solid #555;
  background-color: #444;
  cursor: pointer;
}
.modifiers button {
  background-color: #666;
}
.operations button {
  background-color: lightgreen;
  width: 50px;
}
.digits button {
  background-color: #555;
  border: 1px solid black;
}

/* All things Grid, Flexbox, Box Alignment */
.wrapper,
.subgrid {
  display: grid;
}
.wrapper {
  grid-template-areas:
    "total total total total"
    "modif modif modif oper"
    "digit digit digit oper"
    "digit digit digit oper"
    "digit digit digit oper"
    "digit digit digit oper";
  grid-auto-columns: 1fr;
}
.show-input {
  grid-area: total;
}
.modifiers {
  grid-area: modif;
}
.operations {
  grid-area: oper;
}
.digits {
  grid-area: digit;
}

.show-input {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 2rem;
}

.modifiers {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.digits {
  display: flex;
  flex-wrap: wrap;
}
.digits button {
  flex: 1 0 26%;
}

JavaScript

const inputElement = document.getElementById("input");
const digits = document.getElementById("digits");
const clearButton = document.getElementById("clear");
const allClearButton = document.getElementById("all-clear");
const equalsButton = document.getElementById("equals");

digits.addEventListener("click", (e) => {
  if (e.target.tagName === "BUTTON") {
    inputElement.textContent += e.target.textContent;
  }
});

clearButton.addEventListener("click", () => {
  inputElement.textContent = inputElement.textContent.slice(0, -1);
});

allClearButton.addEventListener("click", () => {
  inputElement.textContent = "";
});

equalsButton.addEventListener("click", () => {
  try {
    inputElement.textContent = eval(inputElement.textContent);
  } catch (error) {
    console.error(error);
  }
});