Latihan Aplikasi Kalkulator
Membuat Aplikasi Kalkulator Berbasis Web (Html, Css & Javascript)
Source Code HTML dan CSS
<!DOCTYPE html><html>
<head>
<title>Aplikasi Kalkulator</title>
<script src="script.js"></script>
<style>
*{
font-family: candara;
}
.container{
width: 275px;
height: auto;
padding: 15px;
background: blue;
margin: auto;
}
.header{
text-align: center;
color: blue;
}
.hasil{
width: 90%;
padding: 10px;
font-size: 20px;
border-radius: 5px;
}
.button{
width: 50px;
padding: 10px;
font-size: 15px;
border-radius: 5px;
font-weight: bold;
}
#main{
width: 50px;
padding: 10px;
font-size: 15px;
border-radius: 5px;
height: 86px;
}
.footer{
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Project UTS Pengembangan Web</h1>
<h3>Dosen Pengampuh Mata Kuliah: Pingky A. R. Leo Lede, S.Kom., M.Cs</h3>
</div>
<div class ="container">
<form name="form">
<input class="hasil" name="hasil" placeholder="Masukkan nilai...">
</form>
<table>
<tr>
<td><input class="button" type="button" value="1" onclick="insert(1)"></td>
<td><input class="button" type="button" value="2" onclick="insert(2)"></td>
<td><input class="button" type="button" value="3" onclick="insert(3)"></td>
<td><input class="button" type="button" value="C" onclick="clean()"></td>
<td><input class="button" type="button" value="DEL" onclick="back()"></td>
</tr>
<tr>
<td><input class="button" type="button" value="4" onclick="insert(4)"></td>
<td><input class="button" type="button" value="5" onclick="insert(5)"></td>
<td><input class="button" type="button" value="6" onclick="insert(6)"></td>
<td><input class="button" type="button" value="+" onclick="insert('+')"></td>
<td><input class="button" type="button" value="-" onclick="insert('-')"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7" onclick="insert(7)"></td>
<td><input class="button" type="button" value="8" onclick="insert(8)"></td>
<td><input class="button" type="button" value="9" onclick="insert(9)"></td>
<td><input class="button" type="button" value="x" onclick="insert('*')"></td>
<td rowspan="5"><input type="button" value="=" onclick="equal()" id="main"></td>
</tr>
<tr>
<td colspan="2"><input class="button" style="width:100%" type="button" value="0" onclick="insert(0)"></td>
<td><input class="button" type="button" value="." onclick="insert('.')"></td>
<td><input class="button" type="button" value="/" onclick="insert('/')"></td>
</tr>
</table>
</div>
<div class="footer">
<p><small><b>All Copyright © || Rizaldy Adiwanto Melqan Radjah - 2020</b></small></p>
</div>
</body>
</html>
Source Code JavaScript
function insert(num){
document.form.hasil.value=document.form.hasil.value+num;
}
function equal(){
var exp = document.form.hasil.value;
if(exp){
document.form.hasil.value = eval(exp);
}
}
function clean(){
document.form.hasil.value = " ";
}
function back(){
const exp = document.form.hasil.value;
document.form.hasil.value = exp.substring(0,exp.length-1);
}Output/Tampilan Kalkulator:
 |
Silakan Tonton Vidio dari program kalkulator diatas
Untuk File ZIP Aplikasi Kalkulator Berbasis Web Bahasa Pemograman HTML, CSS dan Javasript (Source code) >> Silakan Unduh Disini
Komentar
Posting Komentar
Silakan Masukan Komentar Anda...