JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class = "buttons">
<input type="text" class="calculator-display">
    <button  class = "operator-buttons">*</button>
    <button class = "operator-buttons">/</button>
    <button class = "operator-buttons">-</button>
    <button class = "operator-buttons">+</button>
    <button class = "number-buttons">.</button>
    <button class = "number-buttons">9</button>
    <button class = "number-buttons">8</button>
    <button class = "number-buttons">7</button>
    <button class = "number-buttons">6</button>
    <button class = "number-buttons">5</button>
    <button class = "number-buttons">4</button>
    <button class = "number-buttons">3</button>
    <button class = "number-buttons">2</button>
    <button class = "number-buttons">1</button>
    <button class = "number-buttons">0</button>
    <button class = "number-buttons" >=</button>
    <button class = "number-buttons">DELETE</button>


   </div>

CSS

.calculator-display {
  height: 40px;
  width: 85%;
  background-color: white;
  font-size: 3rem;
  color: red;
}
.operator-buttons{
  width: 20%;
  height: 50px;
  font-size: 2.5rem;
  margin: 0;
  padding: 10px;
}
.number-buttons{
  width: 20%;
  height: 50px;
  font-size: 2.5rem;
  margin: 0;
  padding: 10px;
}

JavaScript

const input = document.querySelector('.calculator-display');
const number = document.querySelectorAll('.number-buttons');
const numbers = Array.from(number)
numbers.forEach(button => {button.addEventListener('click', function(){
input.value = button.innerText;

})

});