Membuat Kalkulator menghitung Luas dan Keliling Jajar Genjang

Kalkulator Luas dan Keliling Jajar Genjang

—

by

Webbiz.ID
in , ,

Jajar genjang adalah bangun datar segi empat yang memiliki dua pasang sisi yang sejajar dan sama panjang. Pada jajar genjang, sudut yang bersebelahan juga saling berpelurus (jumlahnya 180°). Olekarena itu pada artikel ini kita akan share Kalkulator Luas dan Keliling Jajar Genjang beserta source code yang bisa kalian gunakan untuk membuat aplikasi sendiri.

Kalkulator Jajar Genjang

Kalkulator Luas dan Keliling Jajar Genjang

Hasil:

Code:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Jajar Genjang</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <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 Jajar Genjang</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="alas">Alas:</label>
            <input type="number" class="form-control" id="alas" placeholder="Masukkan alas" oninput="hitung()">
            <label for="tinggi">Tinggi:</label>
            <input type="number" class="form-control" id="tinggi" placeholder="Masukkan tinggi" oninput="hitung()">
        </div>
        <div id="kelilingForm" class="form-group" style="display: none;">
            <label for="sisi1">Sisi 1:</label>
            <input type="number" class="form-control" id="sisi1" placeholder="Masukkan sisi 1" oninput="hitung()">
            <label for="sisi2">Sisi 2:</label>
            <input type="number" class="form-control" id="sisi2" placeholder="Masukkan sisi 2" oninput="hitung()">
        </div>
        <div class="result">
            <h4>Hasil:</h4>
            <p id="hasilLuas"></p>
            <p id="hasilKeliling"></p>
        </div>
    </div>

    <script>
        function hitung() {
            const option = document.getElementById('optionSelect').value;
            const alas = parseFloat(document.getElementById('alas').value) || 0;
            const tinggi = parseFloat(document.getElementById('tinggi').value) || 0;
            const sisi1 = parseFloat(document.getElementById('sisi1').value) || 0;
            const sisi2 = parseFloat(document.getElementById('sisi2').value) || 0;

            if (option === 'luas' || option === 'keduanya') {
                const luas = alas * tinggi;
                document.getElementById('hasilLuas').innerText = 'Luas: ' + luas;
            } else {
                document.getElementById('hasilLuas').innerText = '';
            }

            if (option === 'keliling' || option === 'keduanya') {
                const keliling = 2 * (sisi1 + sisi2);
                document.getElementById('hasilKeliling').innerText = 'Keliling: ' + keliling;
            } else {
                document.getElementById('hasilKeliling').innerText = '';
            }
        }

        document.getElementById('optionSelect').addEventListener('change', function() {
            const option = this.value;
            document.getElementById('luasForm').style.display = option === 'keliling' ? 'none' : 'block';
            document.getElementById('kelilingForm').style.display = option === 'luas' ? 'none' : 'block';
            hitung();
        });
    </script>
</body>
</html>
JavaScript

1. Rumus Luas Jajar Genjang

Luas jajar genjang dapat dihitung dengan menggunakan panjang alas dan tinggi jajar genjang. Rumus luas jajar genjang adalah:

Luas = a × t

di mana:

  • a adalah panjang alas,
  • t adalah tinggi jajar genjang (jarak tegak lurus antara dua sisi sejajar).

Contoh: Jika panjang alas a = 10 cm dan tinggi t = 5 cm, maka:

Luas = 10 × 5 = 50 cm²

2. Rumus Keliling Jajar Genjang

Keliling jajar genjang dihitung dengan menjumlahkan panjang semua sisinya. Karena jajar genjang memiliki dua pasang sisi yang sama panjang, rumus kelilingnya adalah:

Keliling = 2 × (a+b)

di mana:

  • a adalah panjang alas,
  • b adalah panjang sisi miring.

Contoh: Jika panjang alas a = 10 cm dan panjang sisi miring b = 7 cm, maka:

Keliling = 2 × (10+7) = 2 × 17 = 34 cm

3. Cara Menggunakan Kalkulator Luas dan Keliling Jajar Genjang

  1. Masukkan panjang alas a dan tinggi t untuk menghitung luas.
  2. Masukkan panjang sisi miring bbb untuk menghitung keliling.
  3. Hitung luas dengan rumus a×t.
  4. Hitung keliling dengan rumus 2 × (a+b)

Semoga bermanfaat..

Artikel Terbaru ⭐