Kalkulator Sederhana dengan JavaScript (Versi 1)

Kalkulator JS

Berikut langkahnya.....

1. Buat Folder Kalkulator
2. Buat File

index.html
style.css
js.js

3. Isikan Script HTML ini pada file index.html (*penjelasan di bawah Script)

Script HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kalkulator JS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<h2>Kalkulator JS</h2>
<form name="formAngka">
<input type="text" name="isiText" autocomplete="off">
</form>
<table>
<tr>
<td><input type="button" value="C" onclick="hapusAll()"></td>
<td colspan="2"><input type="button" value="Bcksp" onclick="bcksp()"></td>
<td><input type="button" value="+" onclick="ins('+')"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="ins(1)"></td>
<td><input type="button" value="2" onclick="ins(2)"></td>
<td><input type="button" value="3" onclick="ins(3)"></td>
<td><input type="button" value="-" onclick="ins('-')"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="ins(4)"></td>
<td><input type="button" value="5" onclick="ins(5)"></td>
<td><input type="button" value="6" onclick="ins(6)"></td>
<td><input type="button" value="*" onclick="ins('*')"></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="ins(7)"></td>
<td><input type="button" value="8" onclick="ins(8)"></td>
<td><input type="button" value="9" onclick="ins(9)"></td>
<td><input type="button" value="/" onclick="ins('/')"></td>
</tr>
<tr>
<td><input type="button" value="." onclick="ins('.')"></td>
<td><input type="button" value="0" onclick="ins(0)"></td>
<td colspan="2"><input type="button" value="=" onclick="samaDengan()"></td>
</tr>
</table>
</div>
<script src="js.js"></script>
</body>
</html>

* untuk script yang berwarna biru merupakan fungsi yang akan dipanggil pada file javascript nantinya
* untuk script yang berwarna kuning merupakan penghubung / link untuk menyambungkan ke file javascript dan css nya

4. Isikan Script CSS ini pada file style.css

Script CSS

* {

margin: 0;

padding: 0;

}

.main {

background-color: #00FF90FF;

position: absolute;

padding: 10px;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

border-radius: 5px;

box-shadow: 5px 4px 5px #A5A5A5FF;

}

h2 {

text-align: center;

font-family: sans-serif;

}

table {

width: 100%;

}

form input {

font-size: 22px;

margin: 5px;

padding: 5px;

height: 66px;

text-align: right;

}

table td input {

width : 100%;

background-color : #FF6A00EE;

padding : 5px;

font-size : 22px;

cursor : pointer;

border : 2px solid #000;

}

table td input:hover {

border : 2px solid #DAA67BFF;

}

5. Isikan Script JavaScript ini pada file js.js

Script JavaScript

var tampil = document.formAngka.isiText;

function ins(num) {

tampil.value += num;

}

function samaDengan() {

tampil.value = eval(tampil.value);

}

function bcksp() {

tampil.value = tampil.value.substr(0,tampil.value.length-1);

}

function hapusAll() {

tampil.value = "";

}

Oke, mudah bukan....
Next Post saya akan post tentang tutorial yang sama, tetapi akan berbeda penulisannya (semuannya ada didalam 1 file).
Selamat mencoba....