Cara membuat kalkulator menggunakan html css js
Simak cara membuat kulkulator memakai Html css dan javascript saja sebagai alat penghitung angka kulkulator sering digunakan untuk sistem menghitung pembayaran maka dari itu,silahkan kembangkan apah yang saya share kepada kalian untuk cara membuat kulkolator memakai html dan css ini sangat lah mudah simak caranya dibawah ini.
Untuk membuat halaman kulkulator yang perlu kalian siapkan ialah membuat dua file yang berisi html dan css namun kalian juga bisa langsung gunakan full script nya tanpa harus memisahkan caranya cukup membuat codingan style di halaman atas html yang berisi tentang css ,untuk satu halaman cocok buat kalian yang ingin langsung program seperti di blogspot ini yang codinganya di campur jadi satu file yang berisi .xml.
Untuk membuat kulkulator yang perlu kalian siapkan alat codinganya jika anda akan eksekusi melalui pc bisa memakai notepad jika di android bisa memakai Quick edit.
Buatlah file Css dahulu ,salin codingan dibawah.
CSS
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(#9cebfc,#6ae1fb);
}
.center{
/* display: none; */
width: 350px;
background: black;
border-radius: 20px;
}
input[type="text"]{
height: 60px;
width: 300px;
margin-top: 40px;
border-radius: 1px;
border: 1px solid #e1e7ea;
color: black;
font-size: 22px;
font-weight: bold;
text-align: right;
padding-right: 20px;
background: linear-gradient(#d1dce0,#dfe6e9);
}
form .buttons{
width: 300px;
margin: 10px 25px 0 25px;
padding: 10px 0;
}
input[type="button"]{
width: 58px;
height: 55px;
margin: 5px;
font-size: 22px;
line-height: 55px;
border-radius: 3px;
border: 1px solid #d9d9d9;
background: linear-gradient(#d9d9d9, #bfbfbf);
}
input[type="button"]:hover{
transition: .5s;
background: linear-gradient(#bfbfbf, #d9d9d9);
}
input#clear{
background: #ff1a1a;
border: 1px solid #cc0000;
color: white;
}
input#equal{
width: 275px;
margin: 10px 0 10px 0;
font-size: 30px;
color: white;
background: #ff3d00;
border: 1px solid #b32a00;
}
Setelah itu kalian buat halaman html nya silahkan copy codingan dibawah ini ( index.html )
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="center">
<form name="forms">
<input type="text" id="display" name="display" disabled>
<div class="buttons">
<input type="button" id="seven" value="7">
<input type="button" id="eight" value="8">
<input type="button" id="nine" value="9">
<input type="button" id="divide" value="/"><br>
<input type="button" id="four" value="4">
<input type="button" id="five" value="5">
<input type="button" id="six" value="6">
<input type="button" id="multi" value="*"><br>
<input type="button" id="one" value="1">
<input type="button" id="two" value="2">
<input type="button" id="three" value="3">
<input type="button" id="subs" value="-"><br>
<input type="button" id="dot" value=".">
<input type="button" id="zero" value="0">
<input type="button" id="add" value="+">
<input type="button" id="clear" value="C"><br>
<input type="button" id="equal" value="=">
</div>
</form>
</div>
<script>
$(document).ready(function(){
$('#one').click(function(){
document.forms.display.value += 1;
});
$('#two').click(function(){
document.forms.display.value += 2;
});
$('#three').click(function(){
document.forms.display.value += 3;
});
$('#four').click(function(){
document.forms.display.value += 4;
});
$('#five').click(function(){
document.forms.display.value += 5;
});
$('#six').click(function(){
document.forms.display.value += 6;
});
$('#seven').click(function(){
document.forms.display.value += 7;
});
$('#eight').click(function(){
document.forms.display.value += 8;
});
$('#nine').click(function(){
document.forms.display.value += 9;
});
$('#zero').click(function(){
document.forms.display.value += 0;
});
$('#add').click(function(){
document.forms.display.value += '+';
});
$('#subs').click(function(){
document.forms.display.value += '-';
});
$('#multi').click(function(){
document.forms.display.value += '*';
});
$('#divide').click(function(){
document.forms.display.value += '/';
});
$('#dot').click(function(){
document.forms.display.value += '.';
});
$('#equal').click(function(){
if (display.value == "") {
alert("Please enter any numbers to calculate!");
}else{
document.forms.display.value =
eval(document.forms.display.value);
}
});
$('#clear').click(function(){
document.forms.display.value = "";
});
})
</script>
</body>
</html>
Nah itulah codingan html yang berisi juga javascript untuk kulkulator bisa bekerja dan juga codingan css nya untuk memperbagus tampilan dari kulkulator nya jika kalian ingin ganti tema ataupun warna pada kulkulator silahkan ubah ubah di css nya.