JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<h4>simple counter</h4>
  <button id="reduce">-</button>
  <button id="counter">+</button>
</div>

<hr>

<div class="container">
  <h4>simple calculator</h4>
  <input id="num1" type="text" />
  <label>+ - x /</label>
  <input id="num2" type="text" />
  <button id="result">加/減/乘/除</button>
</div>

CSS

.container{
  width:70%;
  margin:0 auto;
  text-align:center;
  padding:3px;
}
.container input{
  display:block;
  margin:0 auto;
}
.container button{
  margin-top:10px;
}

JavaScript

var counter=document.querySelector("#counter");
var reduce=document.querySelector("#reduce");
let count=0

function Add(){
  count++;
  alert(count);
}
function Reduce(){
  count--;
  alert(count);
}
counter.onclick=Add;
reduce.onclick=Reduce;

var result=document.querySelector("#result");
var numone=document.querySelector("#num1");
var numtwo=document.querySelector("#num2");

function Result(){
	let num1=Number(numone.value);
  let num2=parseInt(numtwo.value);
	alert(num1+"+"+num2+"="+(num1+num2));
  alert(num1+"-"+num2+"="+(num1-num2));
  alert(num1+"x"+num2+"="+(num1*num2));
  alert(num1+"/"+num2+"="+(num1/num2));
}
result.onclick=Result;