Hi sobat webbiz, kali ini kita akan share kalkulator untuk menghitung luas dan keliling trapesium yang dibuat menggunakn JavaScript, beserta source code yang bisa kalian gunakan untuk membuat aplikasi yang sama.
Kalkulator Luas dan Keliling Trapesium
Hitung Luas Trapesium
Hitung Keliling Trapesium
Code:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Trapesium</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.container {
width: 500px;
background-color: #f8f9f9;
padding: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Kalkulator Luas dan Keliling Trapesium</h1>
<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-section">
<h3>Hitung Luas Trapesium</h3>
<div class="form-group">
<label for="alas1">Alas 1:</label>
<input type="number" class="form-control" id="alas1" placeholder="Masukkan panjang alas 1">
</div>
<div class="form-group">
<label for="alas2">Alas 2:</label>
<input type="number" class="form-control" id="alas2" placeholder="Masukkan panjang alas 2">
</div>
<div class="form-group">
<label for="tinggi">Tinggi:</label>
<input type="number" class="form-control" id="tinggi" placeholder="Masukkan tinggi">
</div>
<button class="btn btn-primary" onclick="hitungLuas()">Hitung Luas</button>
<h4 id="hasilLuas"></h4>
</div>
<div id="kelilingForm" class="form-section">
<h3>Hitung Keliling Trapesium</h3>
<div class="form-group">
<label for="sisi1">Sisi 1:</label>
<input type="number" class="form-control" id="sisi1" placeholder="Masukkan panjang sisi 1">
</div>
<div class="form-group">
<label for="sisi2">Sisi 2:</label>
<input type="number" class="form-control" id="sisi2" placeholder="Masukkan panjang sisi 2">
</div>
<div class="form-group">
<label for="sisi3">Sisi 3:</label>
<input type="number" class="form-control" id="sisi3" placeholder="Masukkan panjang sisi 3">
</div>
<div class="form-group">
<label for="sisi4">Sisi 4:</label>
<input type="number" class="form-control" id="sisi4" placeholder="Masukkan panjang sisi 4">
</div>
<button class="btn btn-primary" onclick="hitungKeliling()">Hitung Keliling</button>
<h4 id="hasilKeliling"></h4>
</div>
</div>
<script>
document.getElementById('optionSelect').addEventListener('change', function() {
var selectedOption = this.value;
document.getElementById('luasForm').style.display = selectedOption === 'luas' || selectedOption === 'keduanya' ? 'block' : 'none';
document.getElementById('kelilingForm').style.display = selectedOption === 'keliling' || selectedOption === 'keduanya' ? 'block' : 'none';
});
function hitungLuas() {
var alas1 = parseFloat(document.getElementById('alas1').value);
var alas2 = parseFloat(document.getElementById('alas2').value);
var tinggi = parseFloat(document.getElementById('tinggi').value);
var luas = ((alas1 + alas2) * tinggi) / 2;
document.getElementById('hasilLuas').innerText = 'Luas Trapesium: ' + luas;
}
function hitungKeliling() {
var sisi1 = parseFloat(document.getElementById('sisi1').value);
var sisi2 = parseFloat(document.getElementById('sisi2').value);
var sisi3 = parseFloat(document.getElementById('sisi3').value);
var sisi4 = parseFloat(document.getElementById('sisi4').value);
var keliling = sisi1 + sisi2 + sisi3 + sisi4;
document.getElementById('hasilKeliling').innerText = 'Keliling Trapesium: ' + keliling;
}
</script>
</body>
</html>Berikut ini penjelasan mengenai rumus dan cara menghitung luas serta keliling trapesium:
Pengertian Trapesium
Trapesium adalah bangun datar segi empat dengan sepasang sisi yang sejajar. Ada tiga jenis trapesium: trapesium siku-siku, trapesium sama kaki, dan trapesium sembarang. Rumus luas dan kelilingnya dapat diterapkan pada semua jenis trapesium.
1. Rumus Luas Trapesium
Luas trapesium bisa dihitung dengan rumus:
di mana:
- a dan bbb adalah panjang sisi-sisi yang sejajar,
- t adalah tinggi trapesium (jarak tegak lurus antara kedua sisi sejajar).
Contoh: Jika a = 8 cm, b = 5 cm, dan t = 4 cm, maka:
2. Rumus Keliling Trapesium
Keliling trapesium adalah jumlah panjang semua sisinya. Rumus keliling trapesium adalah:
Keliling = a + b + c + d
di mana:
- a dan b adalah panjang sisi sejajar,
- c dan d adalah panjang dua sisi lainnya yang tidak sejajar.
Contoh: Jika a = 8 cm, b = 5 cm, c = 4 cm, dan d = 6 cm, maka:
Keliling = 8 + 5 + 4 + 6 = 23 cm
Cara Menggunakan Kalkulator Luas dan Keliling Trapesium
- Masukkan panjang sisi sejajar a dan b.
- Masukkan tinggi t untuk menghitung luas.
- Masukkan panjang sisi miring c dan d untuk menghitung keliling.
- Hitung luas dengan rumus (a+b)×t /2
- Hitung keliling dengan rumus a + b + c + d.
Dengan memasukkan nilai-nilai di atas, Anda bisa langsung menghitung luas dan keliling trapesium!
Semoga bermanfaat..