Berikut adalah contoh kode untuk membuat kalkulator sederhana penghitung jumlah jam.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Waktu</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
.input-group {
margin-bottom: 10px;
}
.input-group label {
display: block;
margin-bottom: 5px;
}
.input-group input {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.result {
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<h1>Kalkulator Waktu</h1>
<div class="input-group">
<label for="hours">Jam:</label>
<input type="number" id="hours" min="0" placeholder="Masukkan jumlah jam">
</div>
<div class="input-group">
<label for="days">Hari:</label>
<input type="number" id="days" min="0" placeholder="Masukkan jumlah hari">
</div>
<div class="input-group">
<label for="months">Bulan:</label>
<input type="number" id="months" min="0" placeholder="Masukkan jumlah bulan">
</div>
<div class="input-group">
<label for="years">Tahun:</label>
<input type="number" id="years" min="0" placeholder="Masukkan jumlah tahun">
</div>
<button onclick="calculate()">Hitung</button>
<div class="result" id="result"></div>
<script>
function calculate() {
var hours = parseInt(document.getElementById('hours').value);
var days = parseInt(document.getElementById('days').value);
var months = parseInt(document.getElementById('months').value);
var years = parseInt(document.getElementById('years').value);
var totalHours = hours + (days * 24) + (months * 30 * 24) + (years * 365 * 24);
document.getElementById('result').innerHTML = "Total jam: " + totalHours;
}
</script>
</body>
</html>Output:
Kalkulator Waktu
Silakan gunakan kode di atas untuk membuat kalkulator waktu yang dapat menghitung jumlah jam. Anda dapat menyesuaikan tampilan dan perilaku kalkulator sesuai kebutuhan Anda.
Leave a Reply