Berikut ini adalah contoh kode untuk membuat kalkulator Teorema Pythagoras dengan menggunakan JavaScript, CSS, dan HTML:
Kalkulator Teorema Pythagoras
Hasil:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Teorema Pythagoras</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="number"] {
box-sizing : border-box;
width: 100%;
padding: 10px;
font-size: 11pt;
margin-bottom: 20px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
padding: 10px;
background-color: #f2f2f2;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>Kalkulator Teorema Pythagoras</h1>
<label for="sideA">Leg A:</label>
<input type="number" id="sideA">
<label for="sideB">Leg B:</label>
<input type="number" id="sideB">
<button onclick="calculate()">Hitung</button>
<div class="result">
<p>Hasil:</p>
<p id="result"></p>
</div>
</div>
<script>
function calculate() {
var sideA = parseFloat(document.getElementById('sideA').value);
var sideB = parseFloat(document.getElementById('sideB').value);
var result = Math.sqrt(Math.pow(sideA, 2) + Math.pow(sideB, 2));
document.getElementById('result').innerHTML = result.toFixed(2);
}
</script>
</body>
</html>Silakan salin kode di atas dan simpan dalam file dengan ekstensi .html. Anda dapat membuka file tersebut di browser untuk melihat kalkulator Teorema Pythagoras yang berfungsi.
Pastikan Anda memiliki pengetahuan dasar tentang JavaScript, CSS, dan HTML untuk memahami dan mengubah kode tersebut sesuai kebutuhan Anda.
Leave a Reply