14 Mar 2021

Cara Buat Kalkulator Sederhana Menggunakan Html

Pendahuluan

Ketika saya sedang belajar tentang interaksi dasar antara HTML dan JavaScript, saya memutuskan untuk membuat sebuah kalkulator sederhana sebagai latihan. Menurut saya, ini sangat bermanfaat, terutama bagi pemula yang ingin memahami dasar-dasar web. Dalam tulisan ini, saya akan membagikan pengalaman saya dalam membuat kalkulator sederhana menggunakan HTML dan JavaScript.

Menyiapkan Struktur HTML

Hal pertama yang saya lakukan adalah membuat struktur HTML dasar. Saya mulai dengan membuat elemen form untuk menampung tombol dan area tampilan kalkulator. Ini adalah bagian penting karena semua elemen interaktif akan dimuat di dalamnya. Berikut struktur HTML yang saya gunakan:

<div class="Wrap">
<form name="cal">
        <input type="button" value="9" onclick="cal.display.value+='9'">
        <input type="button" value="8" onclick="cal.display.value+='8'">
        <input type="button" value="7" onclick="cal.display.value+='7'">
        <input type="button" value="+" onclick="cal.display.value+='+'">
        <br><br>
        <input type="button" value="6" onclick="cal.display.value+='6'">
        <input type="button" value="5" onclick="cal.display.value+='5'">
        <input type="button" value="4" onclick="cal.display.value+='4'">
        <input type="button" value="-" onclick="cal.display.value+='-'">
        <br><br>
    <!-- Tambahkan tombol lainnya sesuai kebutuhan -->

Di sini, saya menggunakan elemen <input> untuk membuat tombol-tombol angka dan operator, serta area tampilan untuk hasil kalkulasi.

Penjelaskan Kode HTML

Saya ingin memastikan bahwa setiap elemen dalam kalkulator ini bekerja dengan tepat, jadi saya akan menjelaskan sedikit tentang apa yang dilakukan setiap bagian kode:

  • <div class="Wrap">: Elemen ini berfungsi sebagai wadah untuk seluruh kalkulator, sehingga lebih mudah untuk melakukan styling dengan CSS nanti.
  • <form name="cal">: Form ini menjadi tempat bagi semua input tombol dan layar kalkulator.
  • <input type="text" name="display">: Ini adalah layar tempat angka dan hasil perhitungan ditampilkan.
  • <input type="button">: Tombol kalkulator yang menampilkan angka dan operator, yang nantinya akan menambahkan angka ke layar saat diklik.
  • onclick="cal.display.value=eval(cal.display.value)": Fungsi ini akan menjalankan perhitungan ketika tombol "=" diklik, menggunakan fungsi eval() JavaScript untuk mengevaluasi ekspresi.
  • onclick="cal.display.value=''": Fungsi ini menghapus semua input saat tombol DELETE diklik.

Langkah 3: Menambahkan CSS untuk Styling

Tentu saja, tampilan juga penting. Saya ingin kalkulator saya terlihat sederhana namun tetap modern. Jadi, saya menggunakan sedikit CSS untuk memberikan gaya pada elemen-elemen kalkulator. Berikut adalah kode CSS yang saya gunakan:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}
.Wrap {
    max-width: 300px;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input[type="button"] {
    font-size: 20px;
    padding: 10px;
    margin: 5px;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 5px;
    background-color: #ddd;
    cursor: pointer;
}
input[type="button"]:hover {
    background-color: #ccc;
}
#del {
    background-color: #f44;
    color: #fff;
}
#del:hover {
    background-color: #d33;
}
input[type="text"] {
    width: calc(100% - 22px);
    height: 50px;
    font-size: 24px;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    text-align: right;
}

Kesimpulan

Setelah menyelesaikan latihan ini, saya merasa bahwa membuat kalkulator sederhana adalah salah satu cara terbaik untuk mempelajari bagaimana HTML, CSS, dan JavaScript dapat bekerja sama. Ini adalah pengalaman belajar yang menyenangkan dan memberikan banyak pemahaman baru tentang bagaimana membangun aplikasi web interaktif.

Komentar