Berikut ini adalah contoh kode untuk membuat kalkulator faktorial lengkap dengan menggunakan JavaScript, HTML, dan CSS. Kode ini akan diimplementasikan dalam sebuah form HTML.
Kalkulator Faktorial
HTML
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Faktorial</title>
<style>
/* CSS untuk tampilan form */
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);
}
h1 {
text-align: center;
}
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: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>Kalkulator Faktorial</h1>
<label for="number">Masukkan angka:</label>
<input type="number" id="number" min="0">
<button onclick="calculateFactorial()">Hitung</button>
<div id="result"></div>
</div>
<script>
function calculateFactorial() {
var numberInput = document.getElementById("number");
var resultDiv = document.getElementById("result");
var number = parseInt(numberInput.value);
if (isNaN(number)) {
resultDiv.innerHTML = "Masukkan angka yang valid";
} else if (number < 0) {
resultDiv.innerHTML = "Angka harus lebih besar dari atau sama dengan 0";
} else {
var factorial = 1;
for (var i = 1; i <= number; i++) {
factorial *= i;
}
resultDiv.innerHTML = "Hasil faktorial dari " + number + " adalah " + factorial;
}
}
</script>
</body>
</html>Silakan salin kode di atas ke dalam file HTML baru dan jalankan di browser untuk melihat kalkulator faktorial dalam tampilan yang sudah diatur dengan CSS.
Kode ini akan membuat sebuah form dengan input angka dan tombol "Hitung". Ketika tombol "Hitung" ditekan, fungsi calculateFactorial() akan dijalankan. Fungsi ini akan mengambil nilai angka dari input, menghitung faktorialnya, dan menampilkan hasilnya di dalam elemen dengan id "result".
Pastikan Anda telah memahami kode ini sebelum menggunakannya. Jika ada pertanyaan, jangan ragu untuk bertanya.
Leave a Reply