Contoh program Javascript kalkulator sederhana dengan operasi pangkat dan akar

Berikut adalah contoh program Javascript kalkulator sederhanadengan operasi pangkat dan akar :

<!DOCTYPE html>
<html>
  <head>
    <title>Kalkulator Sederhana</title>
    <script>
      function hitung() {
        var angka1 = parseFloat(document.getElementById("angka1").value);
        var angka2 = parseFloat(document.getElementById("angka2").value);
        var operator = document.getElementById("operator").value;
        var hasil;

        if (operator == "tambah") {
          hasil = angka1 + angka2;
        } else if (operator == "kurang") {
          hasil = angka1 - angka2;
        } else if (operator == "kali") {
          hasil = angka1 * angka2;
        } else if (operator == "bagi") {
          hasil = angka1 / angka2;
        } else if (operator == "pangkat") {
          hasil = Math.pow(angka1, angka2);
        } else if (operator == "akar") {
          hasil = Math.sqrt(angka1);
        }

        document.getElementById("hasil").value = hasil;
      }
    </script>
    <style>
    /* Gaya untuk body */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* Gaya untuk judul h1 */
h1 {
  color: red;
}

/* Gaya untuk form kalkulator */
form {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Gaya untuk label */
label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

/* Gaya untuk input dan select */
input[type="number"], select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Gaya untuk tombol "Hitung" */
button {
  background-color: red;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Gaya untuk tombol "Hitung" saat disorot */
button:hover {
  background-color: #cc0000;
}

/* Gaya untuk input hasil */
input#hasil {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
}
/* Animasi saat tombol "Hitung" ditekan */
button {
  background-color: red;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

/* Gaya untuk tombol "Hitung" saat disorot */
button:hover {
  background-color: #cc0000;
  transform: scale(1.05);
}

</style>
  </head>
  <body>
    <h1>Kalkulator Sederhana</h1>
    <form>
      <label for="angka1">Angka 1:</label>
      <input type="number" id="angka1"><br>

      <label for="operator">Operator:</label>
      <select id="operator">
        <option value="tambah">+</option>
        <option value="kurang">-</option>
        <option value="kali">*</option>
        <option value="bagi">/</option>
        <option value="pangkat">^</option>
        <option value="akar">√</option>
      </select><br>

      <label for="angka2">Angka 2:</label>
      <input type="number" id="angka2"><br>

      <button type="button" onclick="hitung()">Hitung</button><br>

      <label for="hasil">Hasil:</label>
      <input type="text" id="hasil" readonly>
    </form>
  </body>
</html>

Penjelasan:

Pada baris ke-5 hingga 23, kita mendefinisikan fungsi hitung(). Fungsi ini akan dijalankan ketika tombol “Hitung” ditekan. Pada fungsi hitung(), kita mengambil nilai input angka 1, angka 2, dan operator yang dipilih dari elemen HTML menggunakan document.getElementById(). Kita juga menghitung hasil operasi sesuai operator yang dipilih dengan if-else statement. Untuk operasi pangkat, kita menggunakan fungsi Math.pow() untuk menghitung hasilnya, sedangkan untuk operasi akar, kita menggunakan fungsi Math.sqrt(). Terakhir, kita menampilkan hasil pada elemen HTML menggunakan document.getElementById().
Pada baris ke-26 hingga 41, kita mendefinisikan elemen HTML yang akan digunakan pada kalkulator sederhana. Kita menggunakan input untuk input angka 1, input angka 2, dan output hasil, dan menggunakan select untuk memilih operator.
Pada baris ke-38, kita menambahkan event listener onclick pada tombol “Hitung” untuk menjalankan fungsi hitung()

Berikut adalah tampilan kalkulator sederhana yang dibuat dengan kode program Javascript yang telah dijelaskan sebelumnya:

Pada tampilan kalkulator sederhana di atas, kita dapat memasukkan angka pertama pada input dengan id “angka1”, memilih operator pada dropdown dengan id “operator”, dan memasukkan angka kedua pada input dengan id “angka2”. Setelah itu, kita dapat menekan tombol “Hitung” untuk menampilkan hasil pada input dengan id “hasil”. Kalkulator sederhana ini dapat melakukan operasi penjumlahan, pengurangan, perkalian, pembagian, pangkat, dan akar.

Tolong Bagikan: