JSFiddle - React, Tailwind, and code Playground

just some simple calculator.

by Trina Lu

HTML

<div class="btn" data-value="0" data-func="numbers">0</div>
<div class="btn" data-value="1" data-func="numbers">1</div>
<div class="btn" data-value="2" data-func="numbers">2</div>
<div class="btn" data-value="3" data-func="numbers">3</div>
<div class="btn" data-value="4" data-func="numbers">4</div>
<br>
<div class="btn" data-value="+" data-func="action">+</div>
<div class="btn" data-value="-" data-func="action">-</div>
<div class="btn" data-value="=" data-func="action">=</div>

<div id="res"></div>
<div id="log"></div>

CSS

.btn {
  padding: 10px;
  border: 1px solid #878787;
  width: 20px;
  text-align: center;
  display: inline-block;
  margin: 3px;
  cursor: pointer;
}

JavaScript

var prev = 0,
  now = 0;
var action = false;
var calculate = {
  '+': function(x, y) {
    return parseFloat(x) + parseFloat(y);
  },
  '-': function(x, y) {
    return parseFloat(x) - parseFloat(y);
  },
  '=': function(x, y) {
    return parseFloat(x+y);
  }
};

var numbers = document.querySelectorAll('[data-func="numbers"]');
var actions = document.querySelectorAll('[data-func="action"]');
var screen = document.querySelector('#res');
var log = document.querySelector('#log');

function print_screen(v) {
  screen.innerHTML = parseFloat(v);
}

function print_log(v) {
  log.innerHTML += v;
}

numbers.forEach(number => {
  number.onclick = function(e) {
    var number = this.getAttribute('data-value');
    print_log(number);
    if (action == '=') prev = 0;
    now += number;
    print_screen(now);
    console.log('number', number);
    console.log('prev', prev);
    console.log('now', now);
  }
});

actions.forEach(act => {
  act.onclick = function(e) {
    prev = (action) ? calculate[action](prev, now) : now;
    print_screen(prev);
    action = this.getAttribute('data-value');
    print_log(action);

    now = 0;
    console.log('action', action);
    console.log('prev', prev);
    console.log('now', now);
  }
});