Kode HTML Kalkulator Sederhana

Demo Kalkulator Langsung

Copy Kode HTML nya di sini

<style> #calc {width:100%; max-width:320px; margin:20px auto; background:#222; padding:15px; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.3); font-family:Arial;} #calc input {width:100%; height:60px; font-size:28px; text-align:right; border:none; border-radius:8px; margin-bottom:10px; padding:5px 10px; background:#111; color:#fff; box-sizing:border-box;} #calc .btns {display:grid; grid-template-columns:repeat(4,1fr); gap:8px;} #calc button {height:55px; font-size:20px; border:none; border-radius:8px; cursor:pointer; background:#333; color:#fff; transition:0.1s;} #calc button:active {transform:scale(0.95);} #calc .op {background:#ff9500;} #calc .eq {background:#34c759; grid-column:span 2;} #calc .clr {background:#ff3b30;} </style> <div id="calc"> <input type="text" id="layar" readonly> <div class="btns"> <button class="clr" onclick="clearAll()">C</button> <button onclick="del()">⌫</button> <button class="op" onclick="add('%')">%</button> <button class="op" onclick="add('/')">÷</button> <button onclick="add('7')">7</button> <button onclick="add('8')">8</button> <button onclick="add('9')">9</button> <button class="op" onclick="add('*')">×</button> <button onclick="add('4')">4</button> <button onclick="add('5')">5</button> <button onclick="add('6')">6</button> <button class="op" onclick="add('-')">-</button> <button onclick="add('1')">1</button> <button onclick="add('2')">2</button> <button onclick="add('3')">3</button> <button class="op" onclick="add('+')">+</button> <button onclick="add('0')">0</button> <button onclick="add('.')">.</button> <button class="eq" onclick="hitung()">=</button> </div> </div> <script> let layar = document.getElementById('layar'); function add(val){ layar.value += val; } function clearAll(){ layar.value = ''; } function del(){ layar.value = layar.value.slice(0, -1); } function hitung(){ try{ layar.value = eval(layar.value); } catch{ layar.value = 'Error'; setTimeout(()=>layar.value='', 1000); } } </script>