Kalkulator Pembagian Pecahan

Membuat Kalkulator Pembagian Pecahan

—

by

Webbiz.ID
in ,

Berikut ini adalah contoh kode untuk membuat kalkulator pembagian pecahan menggunakan JavaScript, HTML, dan CSS. Kode ini akan diimplementasikan dalam sebuah form HTML.

Kalkulator Pembagian Pecahan

Kalkulator Pembagian Pecahan

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Kalkulator Pembagian Pecahan</title>
  <style>
    /* CSS untuk tampilan kalkulator */
    .calculator {
      width: default;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .calculator input[type="number"] {
      box-sizing : border-box;
	width: 100%;
	padding: 10px;
	font-size: 11pt;
	margin-bottom: 20px;
    }

    .calculator button {
      width: 100%;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .calculator button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <h2>Kalkulator Pembagian Pecahan</h2>
    <input type="number" id="numerator" placeholder="Pembilang">
    <input type="number" id="denominator" placeholder="Penyebut">
    <button onclick="divideFractions()">Hitung</button>
    <p id="result"></p>
  </div>

  <script>
    // JavaScript untuk menghitung pembagian pecahan
    function divideFractions() {
      var numerator = parseFloat(document.getElementById("numerator").value);
      var denominator = parseFloat(document.getElementById("denominator").value);

      var result = numerator / denominator;

      document.getElementById("result").innerHTML = "Hasil: " + result;
    }
  </script>
</body>
</html>
HTML

Anda dapat menyalin kode di atas dan menjalankannya pada browser untuk melihat kalkulator pembagian pecahan dalam tampilan yang sudah diatur menggunakan CSS.

Semoga contoh kode di atas dapat membantu Anda dalam membuat kalkulator pembagian pecahan dengan JavaScript, HTML, dan CSS. Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk bertanya.

Artikel Terbaru ⭐