Membuat Aplikasi Inspeksi Produk Menggunakan HTML, CSS, dan JavaScript

// Array untuk menyimpan data inspeksi materai
      let dataInspeksi = [
        {
          nomorSeri: 'M0001',
          tanggalProduksi: '2022-01-01',
          tanggalInspeksi: '2022-01-02',
          tanggalDiterimaKonsumen: '2022-01-03',
          kondisi: 'Baik',
          ukuran: '5 x 6 cm',
          kualitasCetakan: 'Baik'
        },
        {
          nomorSeri: 'M0002',
          tanggalProduksi: '2022-01-01',
          tanggalInspeksi: '2022-01-02',
          tanggalDiterimaKonsumen: '2022-01-03',
          kondisi: 'Kurang Baik',
          ukuran: '5 x 6 cm',
          kualitasCetakan: 'Kurang Baik'
        }
      ];
      // Fungsi untuk menampilkan data inspeksi materai
      function tampilkanDataInspeksi() {
        let dataInspeksiHTML = '';
        dataInspeksi.forEach((inspeksi, index) => {
          dataInspeksiHTML += `
            <tr>
              <td>${inspeksi.nomorSeri}</td>
              <td>${inspeksi.tanggalProduksi}</td>
              <td>${inspeksi.tanggalInspeksi}</td>
              <td>${inspeksi.tanggalDiterimaKonsumen}</td>
              <td>${inspeksi.kondisi}</td>
              <td>${inspeksi.ukuran}</td>
              <td>${inspeksi.kualitasCetakan}</td>
              <td>
                <button onclick="ubahDataInspeksi(${index})">Ubah</button>
                <button onclick="hapusDataInspeksi(${index})">Hapus</button>
              </td>
            </tr>
          `;
        });
        // Tampilkan data inspeksi di dalam elemen dengan id #daftar-inspeksi
        document.getElementById('daftar-inspeksi').innerHTML = dataInspeksiHTML;
      }
      // Fungsi untuk menambah data inspeksi materai
      function tambahDataInspeksi() {
        // Ambil data dari form
        const nomorSeri = document.getElementById('nomorSeri').value;
        const tanggalProduksi = document.getElementById('tanggalProduksi').value;
        const tanggalInspeksi = document.getElementById('tanggalInspeksi').value;
        const tanggalDiterimaKonsumen = document.getElementById('tanggalDiterimaKonsumen').value;
        const kondisi = document.getElementById('kondisi').value;
        const ukuran = document.getElementById('ukuran').value;
        const kualitasCetakan = document.getElementById('kualitasCetakan').value;
        // Validasi input
        if (!nomorSeri || !tanggalProduksi || !tanggalInspeksi || !tanggalDiterimaKonsumen || !kondisi || !ukuran || !kualitasCetakan) {
          alert('Mohon lengkapi data yang diperlukan');
          return;
        }
        // Tambah data inspeksi ke dalam array
        dataInspeksi.push({
          nomorSeri: nomorSeri,
          tanggalProduksi: tanggalProduksi,
          tanggalInspeksi: tanggalInspeksi,
          tanggalDiterimaKonsumen: tanggalDiterimaKonsumen,
          kondisi: kondisi,
          ukuran: ukuran,
          kualitasCetakan: kualitasCetakan
        });
        // Tampilkan data inspeksi
        tampilkanDataInspeksi();
        // Bersihkan form
        document.getElementById('form-inspeksi').reset();
      }
      // Fungsi untuk mengubah data inspeksi materai
      function ubahDataInspeksi(index) {
        // Ambil data dari array
        const inspeksi = dataInspeksi[index];
        // Isi form dengan data yang akan diubah
        document.getElementById('nomorSeri').value = inspeksi.nomorSeri;
        document.getElementById('tanggalProduksi').value = inspeksi.tanggalProduksi;
        document.getElementById('tanggalInspeksi').value = inspeksi.tanggalInspeksi;
        document.getElementById('tanggalDiterimaKonsumen').value = inspeksi.tanggalDiterimaKonsumen;
        document.getElementById('kondisi').value = inspeksi.kondisi;
        document.getElementById('ukuran').value = inspeksi.ukuran;
        document.getElementById('kualitasCetakan').value = inspeksi.kualitasCetakan;
        // Aktifkan tombol ubah dan hapus
        document.getElementById('ubah').disabled = false;
        document.getElementById('hapus').disabled = false;
        // Tambahkan event click pada tombol ubah
        document.getElementById('ubah').onclick = function() {
          // Ubah data di dalam array
          dataInspeksi[index] = {
            nomorSeri: document.getElementById('nomorSeri').value,
            tanggalProduksi: document.getElementById('tanggalProduksi').value,
            tanggalInspeksi: document.getElementById('tanggalInspeksi').value,
            tanggalDiterimaKonsumen: document.getElementById('tanggalDiterimaKonsumen').value,
            kondisi: document.getElementById('kondisi').value,
            ukuran: document.getElementById('ukuran').value,
            kualitasCetakan: document.getElementById('kualitasCetakan').value
          };
          // Tampilkan data inspeksi
          tampilkanDataInspeksi();
          // Bersihkan form
          document.getElementById('form-inspeksi').reset();
          // Nonaktifkan tombol ubah dan hapus
          document.getElementById('ubah').disabled = true;
          document.getElementById('hapus').disabled = true;
        }
      }
      // Fungsi untuk menghapus data inspeksi materai
      function hapusDataInspeksi(index) {
        // Hapus data di dalam array
        dataInspeksi.splice(index, 1);
        // Tampilkan data inspeksi
        tampilkanDataInspeksi();
        // Bersihkan form
        document.getElementById('form-inspeksi').reset();
        // Nonaktifkan tombol ubah dan hapus
        document.getElementById('ubah').disabled = true;
        document.getElementById('hapus').disabled = true;
      }
      // Tampilkan data inspeksi saat halaman di-load
      tampilkanDataInspeksi();