Membuat Kalkulator menghitung Luas dan Keliling Belah Ketupat

Kalkulator Luas dan Keliling Belah Ketupat

—

by

Webbiz.ID
in , ,

Belah ketupat adalah bangun datar segi empat dengan keempat sisinya sama panjang. Diagonal-diagonalnya saling berpotongan tegak lurus dan membentuk sudut 90°, sehingga membagi belah ketupat menjadi empat segitiga siku-siku yang sama besar. Pada artikel ini kita akan share bagaimana cara membuat Kalkulator Luas dan Keliling Belah Ketupat dengan menggunakan javascript.

Kalkulator Belah Ketupat

Kalkulator Belah Ketupat

Code:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Belah Ketupat</title>
    <style>
        .container {
            max-width: 600px;
            margin-top: 25px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h4 {
            text-align: center;
            font-size: 30px;
            margin-top: 20px;
        }
        select, input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
          box-sizing : border-box;
        }
        .result {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h4>Kalkulator Belah Ketupat</h4>
        <label for="option">Pilih Opsi:</label>
        <select id="option" onchange="toggleForms()">
            <option value="luas">Hitung Luas</option>
            <option value="keliling">Hitung Keliling</option>
            <option value="keduanya">Hitung Keduanya</option>
        </select>

        <div id="luasForm">
            <label for="diagonal1">Diagonal 1:</label>
            <input type="number" id="diagonal1" oninput="calculateLuas()" placeholder="Masukkan Diagonal 1">
            <label for="diagonal2">Diagonal 2:</label>
            <input type="number" id="diagonal2" oninput="calculateLuas()" placeholder="Masukkan Diagonal 2">
        </div>

        <div id="kelilingForm">
            <label for="sisi">Sisi:</label>
            <input type="number" id="sisi" oninput="calculateKeliling()" placeholder="Masukkan Sisi">
        </div>

        <div class="result" id="result"></div>
    </div>

    <script>
        function toggleForms() {
            const option = document.getElementById('option').value;
            document.getElementById('luasForm').style.display = option === 'luas' || option === 'keduanya' ? 'block' : 'none';
            document.getElementById('kelilingForm').style.display = option === 'keliling' || option === 'keduanya' ? 'block' : 'none';
            calculateLuas();
            calculateKeliling();
        }

        function calculateLuas() {
            const d1 = parseFloat(document.getElementById('diagonal1').value) || 0;
            const d2 = parseFloat(document.getElementById('diagonal2').value) || 0;
            const luas = (d1 * d2) / 2;
            updateResult(luas, 'luas');
        }

        function calculateKeliling() {
            const sisi = parseFloat(document.getElementById('sisi').value) || 0;
            const keliling = sisi * 4;
            updateResult(keliling, 'keliling');
        }

        function updateResult(value, type) {
            const resultDiv = document.getElementById('result');
            if (type === 'luas') {
                resultDiv.innerHTML = `Luas: ${value} satuan²`;
            } else if (type === 'keliling') {
                resultDiv.innerHTML = `Keliling: ${value} satuan`;
            } else {
                resultDiv.innerHTML = `Luas: ${value} satuan², Keliling: ${value} satuan`;
            }
        }

        toggleForms(); // Initialize form visibility
    </script>
</body>
</html>
JavaScript

1. Rumus Luas Belah Ketupat

Luas belah ketupat dihitung menggunakan panjang kedua diagonalnya. Rumus luas belah ketupat adalah:

ketupat

di mana:

  • d1 adalah panjang diagonal pertama,
  • d2​ adalah panjang diagonal kedua.
ketupat 2

2. Rumus Keliling Belah Ketupat

Keliling belah ketupat dihitung dengan menjumlahkan panjang semua sisinya. Karena semua sisi belah ketupat memiliki panjang yang sama, rumus kelilingnya adalah:

Keliling = 4×s

di mana:

  • s adalah panjang sisi belah ketupat.
ketupat 3

Dengan memasukkan nilai diagonal dan panjang sisi, Anda dapat dengan mudah menghitung luas dan keliling belah ketupat.

Semoga bermanfaat..

Artikel Terbaru ⭐