Membuat Kalkulator Luas dan Keliling Layang-Layang

Kalkulator Luas dan Keliling Layang-Layang

—

by

Webbiz.ID
in , ,

Layang-layang adalah bangun datar segi empat dengan dua pasang sisi yang berdekatan dan memiliki panjang yang sama. Layang-layang memiliki dua diagonal yang berpotongan tegak lurus, yaitu diagonal panjang dan diagonal pendek. Oleh karena itu pada artikel ini kami akan share Kalkulator Luas dan Keliling Layang-Layang beserta source code yang bisa kalian gunakan.

Kalkulator Layang-Layang

Kalkulator Luas dan Keliling Layang-Layang

Hasil:

Code:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Kalkulator Layang-Layang</title>
    <style>
        .result {
            margin-top: 20px;
        }
      .container {
          width: 500px;  
          background-color: #f8f9f9;
          padding: 20px;
          border-radius: 10px;
            
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2>Kalkulator Luas dan Keliling Layang-Layang</h2>
        <div class="form-group">
            <label for="optionSelect">Pilih Opsi:</label>
            <select class="form-control" id="optionSelect">
                <option value="luas">Hitung Luas</option>
                <option value="keliling">Hitung Keliling</option>
                <option value="keduanya">Hitung Keduanya</option>
            </select>
        </div>

        <div id="luasForm" class="form-group">
            <label for="diagonal1">Diagonal 1 (cm):</label>
            <input type="number" class="form-control" id="diagonal1" oninput="hitungLuas()">
            <label for="diagonal2">Diagonal 2 (cm):</label>
            <input type="number" class="form-control" id="diagonal2" oninput="hitungLuas()">
        </div>

        <div id="kelilingForm" class="form-group" style="display: none;">
            <label for="sisi1">Sisi 1 (cm):</label>
            <input type="number" class="form-control" id="sisi1" oninput="hitungKeliling()">
            <label for="sisi2">Sisi 2 (cm):</label>
            <input type="number" class="form-control" id="sisi2" oninput="hitungKeliling()">
        </div>

        <div class="result">
            <h4>Hasil:</h4>
            <p id="hasilLuas"></p>
            <p id="hasilKeliling"></p>
        </div>
    </div>

    <script>
        document.getElementById('optionSelect').addEventListener('change', function() {
            var option = this.value;
            document.getElementById('luasForm').style.display = option === 'luas' || option === 'keduanya' ? 'block' : 'none';
            document.getElementById('kelilingForm').style.display = option === 'keliling' || option === 'keduanya' ? 'block' : 'none';
            hitungLuas();
            hitungKeliling();
        });

        function hitungLuas() {
            var d1 = parseFloat(document.getElementById('diagonal1').value) || 0;
            var d2 = parseFloat(document.getElementById('diagonal2').value) || 0;
            var luas = (d1 * d2) / 2;
            document.getElementById('hasilLuas').innerText = 'Luas: ' + luas + ' cm²';
        }

        function hitungKeliling() {
            var s1 = parseFloat(document.getElementById('sisi1').value) || 0;
            var s2 = parseFloat(document.getElementById('sisi2').value) || 0;
            var keliling = 2 * (s1 + s2);
            document.getElementById('hasilKeliling').innerText = 'Keliling: ' + keliling + ' cm';
        }
    </script>
</body>
</html>
JavaScript

1. Rumus Luas Layang-Layang

Luas layang-layang dapat dihitung dengan menggunakan panjang kedua diagonalnya. Rumus luas layang-layang adalah:

layang-layang

di mana:

  • d1​ adalah panjang diagonal pertama (diagonal panjang),
  • d2 adalah panjang diagonal kedua (diagonal pendek).

Contoh: Jika d1 = 10 cm dan d2 = 6 cm, maka:

layang

2. Rumus Keliling Layang-Layang

Keliling layang-layang dihitung dengan menjumlahkan panjang semua sisinya. Karena layang-layang memiliki dua pasang sisi yang sama panjang, rumus keliling layang-layang adalah:

Keliling = 2 × (a+b)

di mana:

  • a dan b adalah panjang dua pasang sisi yang sama panjang.

Contoh: Jika a=5 cm dan b=7 cm, maka:

Keliling = 2 × (5+7) = 2 × 12 = 24 cm

Cara Menggunakan Kalkulator Luas dan Keliling Layang-Layang

  1. Masukkan panjang diagonal d1 dan d2​ untuk menghitung luas.
  2. Masukkan panjang sisi a dan b untuk menghitung keliling.
  3. Hitung luas dengan rumus d1​ × d2​​ / 2​​.
  4. Hitung keliling dengan rumus 2 × (a + b).

Semoga bermanfaat..

Artikel Terbaru ⭐