Kali ini saya ingin berbagi tutorial membuat kalkulator sederhana dengan HTML dan Javascript. hanya menggunakan input text dan tombol. sangat sederhana dan mudah.
Selamat menyimak :)
Selamat menyimak :)
<!DOCTYPE html>
<html>
<head>
<title>kalkulator
1 nur</title>
<style
type="text/css">
#konten1{
background-color:
darkblue;
width: 200px;
height: 400px;
padding: 30px;
text-align:
center;
border-radius:
10px;
}
#konten2{
background-color:
deepskyblue ;
width: 150px;
height: 300px;
padding: 20px;
margin:auto;
text-align:
center;
border-radius:
10px;
}
body{background-color:
skyblue}
h1{color:
darkblue;font-family: arial}
</style>
</head>
<body onload="alert('Sugeng Rawuh')"
onunload="alert('Matur Nuwun')">
<table
align="center">
<tr>
<td>
<div
id="konten1">
<div
id="konten2">
<h1>Kalkulator
ku</h1>
<br><br>
<form
name="form1">
<input
type="text" size="15" placeholder="Masukkan
angka" name="a" onfocus="fokus(this)">
<br><br>
<input
type="text" size="15" placeholder="Masukkan
angka" name="b" onfocus="fokus(this)">
<br><br>
<input
type="button" value="+" name="plus"
onclick="tambah()">
<input
type="button" value="-" name="minus"
onclick="kurang()">
<input
type="button" value="*" name="prod"
onclick="kali()">
<input
type="button" value="/" name="div"
onclick="bagi()">
<br><br><br>
<input
type="text" size="15" placeholder="Hasil"
name="hasil">
<br><br><br><br>
<input
type="button" value="Hapus" onclick="hapus()">
</form>
</div>
</div>
</td>
</tr>
<script
type="text/javascript">
function tambah(){
a=eval(document.form1.a.value);
b=eval(document.form1.b.value);
hasil=a+b;
document.form1.hasil.value=hasil;
}
function
kurang(){
a=eval(document.form1.a.value);
b=eval(document.form1.b.value);
hasil=a-b;
document.form1.hasil.value=hasil;
}
function kali(){
a=eval(document.form1.a.value);
b=eval(document.form1.b.value);
hasil=a*b;
document.form1.hasil.value=hasil;
}
function bagi(){
a=eval(document.form1.a.value);
b=eval(document.form1.b.value);
hasil=a/b;
document.form1.hasil.value=hasil;
}
/*function
validasi(){
a=document.form1.a.value;
if!(a>"a"
&& a<"z"){
alert("inputan
tidak valid");
}
}*/
function oo(a){
a.form1.plus.color="lightyellow";
}
function
fokus(z){
z.style.background="lightyellow";
}
function hapus(){
y=document.form1.a.value="";
z=document.form1.b.value="";
x=document.form1.hasil.value="";
}
</script>
</table>
</body>
</html>
Semoga bermanfaat :)
Komentar
Posting Komentar