Kalkulator Luas dan Keliling Persegi

Halo sobat webbiz, kali ini kita akan share kalkulator luas dan keliling persegi yang dibuat menggunakan JavaScript, beserta source code yang bisa kalian gunakan untuk membuat kalkulator serupa.

Luas dan Keliling Persegi

Luas dan Keliling Bujur Sangkar

Pilih Opsi:

Hitung Luas

Panjang Sisi (cm):

Hitung Keliling

Panjang Sisi (cm):

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 Persegi</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .form-section { display: none; }
      .container {
          width: 500px;  
          background-color: #f8f9f9;
            padding: 20px;
            border-radius: 10px;
            
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2>Luas dan Keliling Bujur Sangkar</h2>
        <div class="form-group">
            <label for="option">Pilih Opsi:</label>
            <select class="form-control" id="option">
                <option value="">--Pilih--</option>
                <option value="luas">Hitung Luas</option>
                <option value="keliling">Hitung Keliling</option>
                <option value="keduanya">Hitung Keduanya</option>
            </select>
        </div>

        <div id="luas-section" class="form-section">
            <h4>Hitung Luas</h4>
            <div class="form-group">
                <label for="sisi-luas">Panjang Sisi (cm):</label>
                <input type="number" class="form-control" id="sisi-luas">
            </div>
            <button class="btn btn-primary" onclick="hitungLuas()">Hitung Luas</button>
            <p id="hasil-luas" class="mt-3"></p>
        </div>

        <div id="keliling-section" class="form-section">
            <h4>Hitung Keliling</h4>
            <div class="form-group">
                <label for="sisi-keliling">Panjang Sisi (cm):</label>
                <input type="number" class="form-control" id="sisi-keliling">
            </div>
            <button class="btn btn-primary" onclick="hitungKeliling()">Hitung Keliling</button>
            <p id="hasil-keliling" class="mt-3"></p>
        </div>
    </div>

    <script>
        document.getElementById('option').addEventListener('change', function() {
            const option = this.value;
            document.getElementById('luas-section').style.display = option === 'luas' || option === 'keduanya' ? 'block' : 'none';
            document.getElementById('keliling-section').style.display = option === 'keliling' || option === 'keduanya' ? 'block' : 'none';
        });

        function hitungLuas() {
            const sisi = document.getElementById('sisi-luas').value;
            const luas = sisi * sisi;
            document.getElementById('hasil-luas').innerText = `Luas: ${luas} cm²`;
        }

        function hitungKeliling() {
            const sisi = document.getElementById('sisi-keliling').value;
            const keliling = 4 * sisi;
            document.getElementById('hasil-keliling').innerText = `Keliling: ${keliling} cm`;
        }
    </script>
</body>
</html>

JavaScript

Untuk menghitung luas dan keliling persegi, Anda bisa mengikuti rumus dan penjelasan berikut:

Rumus Persegi

Persegi adalah bangun datar dengan empat sisi yang sama panjang. Ini membuat perhitungannya menjadi sederhana karena semua sisinya memiliki panjang yang sama.

1. Luas Persegi

Luas persegi menunjukkan jumlah ruang yang dilingkupi oleh persegi. Rumus untuk menghitung luas persegi adalah:

Luas = s × s = s²

di mana:

s adalah panjang salah satu sisi persegi.

Contoh: Jika sisi persegi s = 4 cm, maka:

Luas = 4 × 4 = 16 cm²

2. Keliling Persegi

Keliling persegi adalah panjang total semua sisi persegi. Rumus untuk menghitung keliling persegi adalah:

Keliling = 4 × s

di mana:

s adalah panjang salah satu sisi persegi.

Contoh: Jika sisi persegi s = 4 cm, maka:

Keliling = 4 × 4 = 16 cm

Cara Menggunakan Kalkulator Luas dan Keliling Persegi

Anda dapat menggunakan rumus di atas dalam kalkulator dengan memasukkan panjang sisi s:

Masukkan nilai sisi s.
Hitung luas dengan rumus s².
Hitung keliling dengan rumus 4 × s.

Dengan memasukkan nilai sss, Anda bisa langsung mendapatkan luas dan keliling persegi sesuai dengan panjang sisi yang diberikan.

Dengan memasukkan nilai s, Anda bisa langsung mendapatkan luas dan keliling persegi sesuai dengan panjang sisi yang diberikan.