Front-end JavaScript Series from Webstite Development Path MySkill.id
Kalkulator adalah salah satu aplikasi yang sering digunakan dalam kehidupan sehari-hari. Dalam artikel ini, kita akan membahas cara membuat tampilan kalkulator dengan HTML pada JavaScript. Berikut adalah langkah-langkahnya:
1. Buat file HTML
Buat file HTML kosong dengan nama index.html. Kemudian, tambahkan elemen input dan button untuk menampilkan angka dan tombol operasi matematika.
html
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”calculator”>
<input type=”text” id=”result” disabled>
<br>
<button class=”number” onclick=”input(‘1’)”>1</button>
<button class=”number” onclick=”input(‘2’)”>2</button>
<button class=”number” onclick=”input(‘3’)”>3</button>
<button class=”operator” onclick=”input(‘+’)”>+</button>
<br>
<button class=”number” onclick=”input(‘4’)”>4</button>
<button class=”number” onclick=”input(‘5’)”>5</button>
<button class=”number” onclick=”input(‘6’)”>6</button>
<button class=”operator” onclick=”input(‘-’)”>-</button>
<br>
<button class=”number” onclick=”input(‘7’)”>7</button>
<button class=”number” onclick=”input(‘8’)”>8</button>
<button class=”number” onclick=”input(‘9’)”>9</button>
<button class=”operator” onclick=”input(‘*’)”>*</button>
<br>
<button class=”number” onclick=”input(‘0’)”>0</button>
<button class=”decimal” onclick=”input(‘.’)”>.</button>
<button class=”clear” onclick=”clearInput()”>C</button>
<button class=”operator” onclick=”input(‘/’)”>/</button>
<br>
<button class=”equal” onclick=”calculate()”>=</button>
</div>
<script src=”script.js”></script>
</body>
</html>
2. Buat file CSS
Buat file CSS kosong dengan nama style.css. Kemudian, tambahkan styling untuk elemen-elemen pada kalkulator.
css
.calculator {
width: 200px;
margin: 0 auto;
text-align: center;
}
input[type=”text”] {
width: 100%;
margin-bottom: 10px;
padding: 5px;
font-size: 20px;
text-align: right;
}
button {
width: 50px;
height: 50px;
margin: 5px;
font-size: 20px;
border-radius: 5px;
background-color: #f2f2f2;
border: none;
outline: none;
cursor: pointer;
}
button:hover {
background-color: #e6e6e6;
}
.number {
color: #333;
}
.operator {
color: #fff;
background-color: #4CAF50;
}
.decimal {
color: #333;
}
.clear {
color: #333;
}
.equal {
color: #fff;
background-color: #4CAF50;
}
3. Buat file JavaScript
Buat file JavaScript kosong dengan nama script.js. Kemudian, tambahkan fungsi-fungsi untuk menangani input dan operasi matematika.
javascript
let inputString = ‘’;
function input(value) {
inputString += value;
document.getElementById(‘result’).value = inputString;
}
function clearInput() {
inputString = ‘’;
document.getElementById(‘result’).value = ‘’;
}
function calculate() {
let result = eval(inputString);
document.getElementById(‘result’).value = result;
inputString = ‘’;
}
Dalam contoh di atas, kita menggunakan fungsi-fungsi untuk menangani input dan operasi matematika pada kalkulator. Fungsi input digunakan untuk menambahkan nilai ke dalam inputString dan menampilkan nilai tersebut pada elemen input. Fungsi clearInput digunakan untuk menghapus nilai pada inputString dan elemen input. Fungsi calculate digunakan untuk menghitung hasil dari inputString dan menampilkan hasil tersebut pada elemen input.
4. Sambungkan file HTML, CSS, dan JavaScript
Tambahkan tag link dan script pada file HTML untuk menyambungkan file HTML, CSS, dan JavaScript.
html
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<! — elemen input dan button →
<script src=”script.js”></script>
</body>
</html>
5. Jalankan aplikasi
Buka file index.html pada browser untuk menjalankan aplikasi kalkulator.
Dalam penggunaannya, kita dapat menambahkan fungsi-fungsi lain pada aplikasi kalkulator untuk menangani operasi matematika yang lebih kompleks. Kita juga dapat menambahkan styling pada aplikasi kalkulator untuk membuatnya lebih menarik dan mudah digunakan. Dengan menggunakan JavaScript, kita dapat membuat aplikasi kalkulator yang dapat digunakan pada browser dengan mudah dan efisien.
Dalam program ini, kita memiliki tiga file: HTML untuk struktur tampilan kalkulator, CSS untuk gaya tampilan, dan JavaScript untuk logika kalkulator. Kalkulator ini mendukung operasi penjumlahan, pengurangan, perkalian, dan pembagian. Anda dapat mengklik tombol angka dan operator untuk membangun ekspresi, kemudian tekan “=” untuk melihat hasilnya. Tombol “C” dapat digunakan untuk membersihkan tampilan kalkulator.
Kita dapat menyimpan tiga file tersebut dalam satu folder dan membuka file index.html di browser web untuk mencoba kalkulator sederhana ini.
Learn more via: https://myskill.id/course/mini-project-calculator
