Berikut adalah contoh aplikasi membuat kalkulator penggajian yang memungkinkan pengguna menginput gaji per hari dan jumlah hari kerja menggunakan JavaScript. Kode ini juga mencakup penerapannya ke dalam elemen form HTML.
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Penggajian</title>
<style>
/* CSS styling */
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 10px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.form-group button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.form-group button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Kalkulator Penggajian</h2>
<form id="salaryForm">
<div class="form-group">
<label for="dailySalary">Gaji per Hari:</label>
<input type="number" id="dailySalary" name="dailySalary" required>
</div>
<div class="form-group">
<label for="workingDays">Jumlah Hari Kerja:</label>
<input type="number" id="workingDays" name="workingDays" required>
</div>
<div class="form-group">
<button type="submit">Hitung</button>
</div>
</form>
<div id="result"></div>
</div>
<script>
// JavaScript code
const form = document.getElementById('salaryForm');
const resultDiv = document.getElementById('result');
form.addEventListener('submit', function(event) {
event.preventDefault();
const dailySalary = parseFloat(document.getElementById('dailySalary').value);
const workingDays = parseInt(document.getElementById('workingDays').value);
const totalSalary = dailySalary * workingDays;
resultDiv.innerHTML = `Total Gaji: Rp ${totalSalary}`;
});
</script>
</body>
</html>Anda dapat menggunakan kode di atas untuk membuat kalkulator penggajian yang interaktif di halaman web Anda. Pengguna dapat menginput gaji per hari dan jumlah hari kerja, dan kemudian hasil penggajian akan ditampilkan secara otomatis setelah tombol “Hitung” ditekan.
Output:
Kalkulator Penggajian
Pastikan untuk menyimpan kode HTML di atas dalam file dengan ekstensi .html dan kode JavaScript dalam tag <script> di dalam file HTML tersebut. Anda dapat membuka file HTML tersebut di browser web untuk melihat kalkulator penggajian yang berfungsi.
Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat kalkulator penggajian dengan JavaScript dan HTML.
Leave a Reply