Code calculator thực hiện cộng trừ nhân chia trong javascript và html đơn giản và đẹp. Xem thêm các cách code calculator ( máy tính bỏ túi ) khác tại đây.
Source code calculator
<!DOCTYPE html>
<html lang="vi">
<head>
<title>Sharecs.net</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="caculate.css">
</head>
<body>
<div class="container">
<div class="calculator">
<input type="text" placeholder="0" id="output-screen">
<button onclick="Clear('')">Cl</button>
<button onclick="del('')">DEL</button>
<button onclick="display('%')">%</button>
<button onclick="display('/')">/</button>
<button onclick="display('7')">7</button>
<button onclick="display('8')">8</button>
<button onclick="display('9')">9</button>
<button onclick="display('*')">*</button>
<button onclick="display('4')">4</button>
<button onclick="display('5')">5</button>
<button onclick="display('6')">6</button>
<button onclick="display('-')">-</button>
<button onclick="display('1')">1</button>
<button onclick="display('2')">2</button>
<button onclick="display('3')">3</button>
<button onclick="display('+')">+</button>
<button onclick="display('0')">0</button>
<button onclick="display('.')">.</button>
<button onclick="calculate('')" class="equal">=</button>
</div>
</div>
<script src="calcu.js"></script>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color:#ecf0f3;
font-family: sans-serif;
outline: none;
}
.container{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator{
background-color: #ecf0f3;
padding: 15px;
border-radius: 30px;
box-shadow:inset 5px 5px 12px #ffffff,
5px 5px 12px rgba(0,0,0,.16);
display: grid;
grid-template-columns: repeat(4,70px);
}
input{
grid-column: span 4;
height: 70px;
width: 260px;
background-color: #ecf0f3;
box-shadow: inset -5px -5px 12px #ffffff,
inset 5px 5px 12px rgba(0,0,0,.16);
border: none;
border-radius: 30px;
color: rgb(70,70,70);
font-size: 27px;
font-weight: 700;
text-align: end;
margin: auto;
margin-top: 40px;
margin-bottom: 30px;
padding: 20px;
}
button{
height: 48px;
width: 48px;
background-color: #ecf0f3;
box-shadow: -5px -5px 12px #ffffff,
5px 5px 12px rgba(0,0,0,.16);
border-radius: 50%;
border: none;
margin: 10px;
font-size: 18px;
}
button:hover{
background-color: rgb(241, 227, 227);
cursor: pointer;
transition: 0.5s;
}
.equal{
width: 115px;
border-radius: 40px;
animation: col 3s infinite;
}
@keyframes col{
0%{
color: red;
}
33%{
color: green;
}
100%{
color: blue;
}
}
let outputScreen = document.getElementById("output-screen");
// for output
function display(num){
outputScreen.value += num;
}
// for operator
function calculate(){
try{
outputScreen.value = eval(outputScreen.value);
}
catch(err){
alert("Invalid")
}
}
// for clear and dellete
function Clear(){
outputScreen.value = "";
}
function del(){
outputScreen.value =outputScreen.value.slice(0,-1);
}
Demo calculator

Cảm ơn các bạn đã ghé thăm. Chúc các bạn thành công!