Membuat Kalkulator Hitung Luas dan Keliling Segitiga

Kalkulator Hitung Luas dan Keliling Segitiga

—

by

Webbiz.ID
in , ,

Halo sobat webbiz kali ini kita akan share aplikasi kalkulator untuk meng hitung luas dan keliling segitiga yang dibuat menggunakan JavaScript, beserta source code yang bisa kalian gunakan untuk membuat aplikasi sendiri.

Luas dan Keliling Segitiga

Hitung Luas dan Keliling Segitiga

Hasil:

Code:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luas dan Keliling Segitiga</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: MintCream;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h3 class="text">Hitung Luas dan Keliling Segitiga</h3>
        <div class="form-group">
            <label for="option">Pilih Opsi:</label>
            <select id="option" class="form-control">
                <option value="luas">Luas</option>
                <option value="keliling">Keliling</option>
                <option value="keduanya">Keduanya</option>
            </select>
        </div>

        <div id="luasForm" class="form-group">
            <label for="alas">Alas:</label>
            <input type="number" id="alas" class="form-control" placeholder="Masukkan alas">
            <label for="tinggi">Tinggi:</label>
            <input type="number" id="tinggi" class="form-control" placeholder="Masukkan tinggi">
        </div>

        <div id="kelilingForm" class="form-group" style="display: none;">
            <label for="sisiA">Sisi A:</label>
            <input type="number" id="sisiA" class="form-control" placeholder="Masukkan sisi A">
            <label for="sisiB">Sisi B:</label>
            <input type="number" id="sisiB" class="form-control" placeholder="Masukkan sisi B">
            <label for="sisiC">Sisi C:</label>
            <input type="number" id="sisiC" class="form-control" placeholder="Masukkan sisi C">
        </div>

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

    <script>
        const optionSelect = document.getElementById('option');
        const luasForm = document.getElementById('luasForm');
        const kelilingForm = document.getElementById('kelilingForm');
        const hasil = document.getElementById('hasil');

        optionSelect.addEventListener('change', function() {
            const option = this.value;
            if (option === 'luas') {
                kelilingForm.style.display = 'none';
                luasForm.style.display = 'block';
                hitungLuas();
            } else if (option === 'keliling') {
                luasForm.style.display = 'none';
                kelilingForm.style.display = 'block';
                hitungKeliling();
            } else {
                luasForm.style.display = 'block';
                kelilingForm.style.display = 'block';
                hitungLuas();
                hitungKeliling();
            }
        });

        function hitungLuas() {
            const alas = parseFloat(document.getElementById('alas').value);
            const tinggi = parseFloat(document.getElementById('tinggi').value);
            if (!isNaN(alas) && !isNaN(tinggi)) {
                const luas = (alas * tinggi) / 2;
                hasil.innerHTML = `Luas Segitiga: ${luas}`;
            }
        }

        function hitungKeliling() {
            const sisiA = parseFloat(document.getElementById('sisiA').value);
            const sisiB = parseFloat(document.getElementById('sisiB').value);
            const sisiC = parseFloat(document.getElementById('sisiC').value);
            if (!isNaN(sisiA) && !isNaN(sisiB) && !isNaN(sisiC)) {
                const keliling = sisiA + sisiB + sisiC;
                hasil.innerHTML += `<br>Keliling Segitiga: ${keliling}`;
            }
        }

        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', function() {
                if (optionSelect.value === 'luas') {
                    hitungLuas();
                } else if (optionSelect.value === 'keliling') {
                    hitungKeliling();
                } else {
                    hitungLuas();
                    hitungKeliling();
                }
            });
        });
    </script>
</body>
</html>
JavaScript

Segitiga adalah bangun datar yang memiliki tiga sisi dan tiga sudut. Untuk menghitung luas dan keliling segitiga, berikut adalah penjelasan dan rumusnya:

1. Luas Segitiga

Luas segitiga dapat dihitung dengan rumus:

luas 1
  • Alas adalah panjang sisi segitiga yang dijadikan dasar perhitungan.
  • Tinggi adalah jarak tegak lurus dari alas ke titik puncak segitiga (vertikal dari alas ke sudut yang berhadapan dengan alas).

Contoh: Jika alas segitiga a = 6 cm dan tinggi t = 4 cm , maka:

luas 2

2. Keliling Segitiga

Keliling segitiga adalah jumlah panjang ketiga sisinya. Rumus keliling segitiga:

Keliling=a+b+c

  • a, b, dan c adalah panjang ketiga sisi segitiga.

Contoh: Jika sisi-sisinya memiliki panjang a = 3 cm, b = 4 cm, dan c = 5 cm, maka:

Keliling = 3 + 4 + 5 = 12cm

Catatan:

  • Rumus luas hanya bisa digunakan jika diketahui alas dan tinggi segitiga.
  • Untuk segitiga sembarang (tanpa diketahui tinggi), luas bisa dihitung dengan Rumus Heron:
keliling 1

Semoga bermanfaat..

Artikel Terbaru ⭐