<div class="container">
  <div class="display"></div>
  <div class="buttons">
    <button class="btn-number" data-num="1">1</button>
    <button class="btn-number" data-num="2">2</button>
    <button class="btn-number" data-num="3">3</button>
    <button class="btn-operator" data-num="+">+</button>
    <button class="btn-number" data-num="4">4</button>
    <button class="btn-number" data-num="5">5</button>
    <button class="btn-number" data-num="6">6</button>
    <button class="btn-operator" data-num="-">-</button>
    <button class="btn-number" data-num="7">7</button>
    <button class="btn-number" data-num="8">8</button>
    <button class="btn-number" data-num="9">9</button>
    <button class="btn-operator" data-num="*">X</button>
    <button class="btn-clear">C</button>
    <button class="btn-number" data-num="0">0</button>
    <button class="btn-equals" data-num="=">=</button>
    <button class="btn-operator" data-num="/">/</button>
  </div>
</div>
.container{
  background: lightGrey;
  width: 300px;
  margin: auto;
}

.display{
  width: 100%;
  background-color: darkGrey;
  height: 50px;
  width: 300px;
  display: flex;
  justify-content: flex-end;
  font-size: 48px;
}

.buttons{
  display: flex;
  flex-wrap: wrap;
}

button {
  flex:1 25%;
  padding: 10px;
  font-size: 1.5em;
}

.btn-number {
  background-color:grey;
}

.btn-operator {
  background-color:orange;
}

.btn-equals {
  background-color:green;
}

.btn-clear {
   background-color:crimson;
}


button:focus {
  outline: none;
}
//get our buttons from the DOM
const buttons = document.querySelectorAll('.btn-number, .btn-operator')
const clearButton = document.querySelector('.btn-clear')
const equalsButton = document.querySelector('.btn-equals')
const display = document.querySelector('.display')

//add an eventListener to each of the buttons
buttons.forEach(button => {
  button.addEventListener('click', () => { 
    const buttonValue = button.getAttribute('data-num');  
    display.textContent += buttonValue
  })
})

equalsButton.addEventListener('click', () => { 
  display.textContent = eval(display.textContent)
})

clearButton.addEventListener('click', () => { 
  display.textContent = ""
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.