Kali ini saya ingin berbagi tutorial membuat kalkulator sederhana dengan HTML dan Javascript versi ketiga saya. kali ini hanya menggunakan input text dan radio button. sangat sederhana dan mudah.
Selamat menyimak :)
<!DOCTYPE html>
<html>
<head>
<title>kalkulator 3 nur</title>
<style type="text/css">
#konten1{
background-color: saddlebrown;
width: 200px;
height: 400px;
padding: 30px;
text-align: center;
border-radius: 10px;
}
#konten2{
background-color: sienna;
width: 150px;
height: 300px;
padding: 20px;
margin:auto;
text-align: center;
border-radius: 10px;
}
body{background-color: sandybrown}
h1{color: sandybrown;font-family: arial}
</style>
</head>
<body onload="Sugeng Rawuh">
<table align="center">
<tr>
<td>
<div id="konten1">
<div id="konten2">
<h1>Kalkulator ku</h1>
<br><br><br><br><br>
<form name="form1" onsubmit="pilihan()">
<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><br>
<input type="radio" name="op" id="op1">+
<input type="radio" name="op" id="op2">-
<input type="radio" name="op" id="op3">*
<input type="radio" name="op" id="op4">/
<br><br><br>
<input type="submit" value="=">
</form>
</div>
</div>
</td>
</tr>
<script type="text/javascript">
function tambah(x,y){
return x+y;
}
function kurang(x,y){
return x-y;
}
function kali(x,y){
return x*y;
}
function bagi(x,y){
return x/y;
}
function pilihan(){
a=eval(document.form1.a.value);
b=eval(document.form1.b.value);
g=document.getElementById("op1").checked;
h=document.getElementById("op2").checked;
i=document.getElementById("op3").checked;
j=document.getElementById("op4").checked;
var x;
if (g==true){
x=tambah(a,b);
}else if(h==true){
x=kurang(a,b);
}else if(i==true){
x=kali(a,b);
}else if(j==true){
x=bagi(a,b);
}
var myW=window.open('jawaban.html');
myW.document.write("<h1>Hasil=" + x +"</h1>");
}
function fokus(z){
z.style.background="lightyellow";
}
</script>
</table>
</body>
</html>
Semoga Bermanfaat :)
Komentar
Posting Komentar