Kalkulator Penggajian menggunakan JavaScript

Membuat Kalkulator Penggajian menggunakan JavaScript

—

by

Webbiz.ID
in ,

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.

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>
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

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.

Artikel Terbaru ⭐