<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hitung Luas Persegi Panjang</title>
<style>
table {
margin: 20px 0;
border-collapse: collapse;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<h2>Hitung Luas Persegi Panjang</h2>
<table border="1">
<tr>
<td>Panjang:</td>
<td><input type="number" id="panjang" placeholder="Masukkan panjang"></td>
</tr>
<tr>
<td>Lebar:</td>
<td><input type="number" id="lebar" placeholder="Masukkan lebar"></td>
</tr>
</table>
<button onclick="hitungLuas()">Hitung</button>
<button onclick="resetForm()">Reset</button>
<p>Hasil: <span id="hasil"></span></p>
<script>
function hitungLuas() {
var panjang = parseFloat(document.getElementById("panjang").value);
var lebar = parseFloat(document.getElementById("lebar").value);
if (!isNaN(panjang) && !isNaN(lebar)) {
var luas = panjang * lebar;
document.getElementById("hasil").textContent = "Luas persegi panjang adalah: " + luas;
} else {
document.getElementById("hasil").textContent = "Masukkan nilai panjang dan lebar yang valid.";
}
}
function resetForm() {
document.getElementById("panjang").value = "";
document.getElementById("lebar").value = "";
document.getElementById("hasil").textContent = "";
}
</script>
</body>
</html>
Tidak ada komentar:
Posting Komentar