JSFiddle - React, Tailwind, and code Playground

by birdie2019

HTML

simple counter:
<button id="minus">-</button>
<button id="plus">+</button>

<hr>

simple calculator:
<input id="first" type="number" />
<input id="last" type="number" />
<button id="calc">加/減/乘/除</button>

CSS

button {
  padding: 5px 10px;
}

JavaScript

// simple counter
let minusBtn = document.querySelector('#minus');
let plusBtn = document.querySelector('#plus');
let n = 0;
minusBtn.onclick = function numberMinus() {
  n--;
  alert(n);
}
plusBtn.onclick = function numberPlus() {
  n++;
  alert(n);
}

// simple calculator
let firstInput = document.querySelector('#first');
let lastInput = document.querySelector('#last');
let calcBtn = document.querySelector('#calc');
calcBtn.onclick = function calc() {
  let firstValue = parseInt(firstInput.value);
  let lastValue = parseInt(lastInput.value);
  alert(firstValue + lastValue);
  alert(firstValue - lastValue);
  alert(firstValue * lastValue);
  alert(firstValue / lastValue);
}