Skodev
Belajar coding dalam bahasa Indonesia
Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Membuat aplikasi atau fungsi kalkulator bisa menjadi proyek yang menarik dan mudah untuk pemula dalam belajar pemrograman web. HTML dan JavaScript adalah bahasa pemrograman yang cocok untuk kita gunakan dalam menciptakan kalkulator ini. Berikut ini adalah bagaimana kamu bisa membuat kalkulator HTML dan JavaScript dengan mudah.
Pertama kali yang perlu kita lakukan adalah membuat struktur HTML untuk kalkulator. Kamu perlu membuat form dan beberapa input untuk menerima nilai dari pengguna.
Contoh struktur HTML yang bisa kamu gunakan:
<div id="kalkulator">
<input type="text" id="nilaiA" placeholder="Masukkan Nilai A"/>
<input type="text" id="nilaiB" placeholder="Masukkan Nilai B"/>
<button onclick="hitung()">Hitung</button>
<p id="hasil"></p>
</div>Setelah struktur HTML selesai, kita perlu menambahkan fungsi JavaScript untuk melakukan perhitungan. Kamu bisa menambahkan JavaScript secara langsung dalam dokumen HTML atau dalam file terpisah.
Berikut contoh script untuk melakukan penambahan:
function hitung() {
var nilaiA = document.getElementById('nilaiA').value;
var nilaiB = document.getElementById('nilaiB').value;
var hasil = Number(nilaiA) + Number(nilaiB);
document.getElementById('hasil').innerHTML = hasil;
}Fungsi di atas akan mengambil nilai dari input nilaiA dan nilaiB, mengubahnya menjadi angka dengan fungsi Number(), melakukan penambahan, dan kemudian menampilkan hasilnya dalam elemen dengan id hasil.
Terakhir, kita bisa menggabungkan kedua bagian tersebut dalam satu file HTML.
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator HTML dan JavaScript</title>
</head>
<body>
<div id="kalkulator">
<input type="text" id="nilaiA" placeholder="Masukkan Nilai A"/>
<input type="text" id="nilaiB" placeholder="Masukkan Nilai B"/>
<button onclick="hitung()">Hitung</button>
<p id="hasil"></p>
</div>
<script>
function hitung() {
var nilaiA = document.getElementById('nilaiA').value;
var nilaiB = document.getElementById('nilaiB').value;
var hasil = Number(nilaiA) + Number(nilaiB);
document.getElementById('hasil').innerHTML = hasil;
}
</script>
</body>
</html>Dengan demikian, kamu sudah berhasil membuat kalkulator sederhana dengan HTML dan JavaScript. Dengan prinsip yang sama, kamu dapat membuat operasi matematika lainnya seperti pengurangan, perkalian, dan pembagian. Teruslah belajar dan eksplor!
Link terkait: