Tutorial Membuat Aplikasi Sederhana “Menghitung Masa Kerja” dengan HTML, JavaScript, dan Bootstrap
Masa kerja adalah salah satu informasi penting yang dibutuhkan oleh karyawan, baik untuk keperluan administrasi maupun untuk kepentingan pribadi. Masa kerja dapat digunakan untuk menghitung berbagai hal, seperti hak cuti, kenaikan gaji, atau pensiun.
Untuk menghitung masa kerja, kita dapat menggunakan berbagai metode, salah satunya dengan menggunakan kode HTML, JavaScript, dan Bootstrap. Dengan metode ini, kita dapat membuat aplikasi sederhana untuk menghitung masa kerja.
Langkah-langkah
Berikut adalah langkah-langkah untuk membuat aplikasi menghitung masa kerja dengan kode HTML, JavaScript, dan Bootstrap:
Buat file HTML dan CSS untuk struktur dasar aplikasi.
Buat file index.html dan masukkan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menghitung Masa Kerja</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="card mt-4">
<div class="card-header">
<h4>Menghitung Masa Kerja</h4>
</div>
<div class="card-body">
<form id="form-masa-kerja">
<div class="mb-3">
<label for="tgl-mulai" class="form-label">Tanggal Mulai Bekerja:</label>
<input type="date" class="form-control" id="tgl-mulai" required>
</div>
<div class="mb-3">
<label for="tgl-sekarang" class="form-label">Tanggal Sekarang:</label>
<input type="date" class="form-control" id="tgl-sekarang" required>
</div>
<button type="submit" class="btn btn-primary">Hitung Masa Kerja</button>
</form>
<div id="hasil-masa-kerja" class="mt-3"></div>
</div>
</div>
</div>
</body>
</html>Kode HTML di atas membuat struktur dasar aplikasi dengan Bootstrap card. Card terdiri dari header, body, dan footer. Di dalam body, terdapat form untuk memasukkan tanggal mulai bekerja dan tanggal sekarang. Di bawah form, terdapat div untuk menampilkan hasil perhitungan masa kerja.
Buat form untuk memasukkan tanggal mulai bekerja dan tanggal sekarang.
Di dalam form, masukkan dua input dengan tipe date. Input pertama untuk tanggal mulai bekerja dan input kedua untuk tanggal sekarang.
<form id="form-masa-kerja">
<div class="mb-3">
<label for="tgl-mulai" class="form-label">Tanggal Mulai Bekerja:</label>
<input type="date" class="form-control" id="tgl-mulai" required>
</div>
<div class="mb-3">
<label for="tgl-sekarang" class="form-label">Tanggal Sekarang:</label>
<input type="date" class="form-control" id="tgl-sekarang" required>
</div>Buat kode JavaScript untuk menghitung masa kerja.
Di dalam kode JavaScript, masukkan kode berikut:
const formMasaKerja = document.getElementById("form-masa-kerja");
const tglMulai = document.getElementById("tgl-mulai");
const tglSekarang = document.getElementById("tgl-sekarang");
const hasilMasaKerja = document.getElementById("hasil-masa-kerja");
formMasaKerja.addEventListener("submit", function (event) {
event.preventDefault();
const tglMulaiInput = new Date(tglMulai.value);
const tglSekarangInput = new Date(tglSekarang.value);
if (tglMulaiInput > tglSekarangInput) {
alert("Tanggal mulai bekerja tidak boleh lebih besar dari tanggal sekarang.");
return;
}
const masaKerja = Math.floor((tglSekarangInput - tglMulaiInput) / (1000 * 60 * 60 * 24 * 365));
hasilMasaKerja.innerHTML = `Masa kerja: ${masaKerja} tahun`;
});