PROJECT SEDERHANA JAVASCRIPT #13 MODUL 8

 

Mini Inventory Dengan Data Array

HTML Structure:

1. Form Input:

   • Terdapat input untuk "Nama Barang," "Berat," dan "URL Gambar."
   • Tombol "Tambah" untuk menambahkan data baru.

2. Tabel untuk Menampilkan Data:

   • Tabel dengan header berisi kolom "No," "Nama Barang," "Berat," "Gambar," dan "Aksi."
   • tbody dengan id="barangBody" untuk menampilkan baris-baris data.

JavaScript Logic:

1. Data Store:

   • var dataStore = []; untuk menyimpan data barang dalam bentuk array.

2. Fungsi tambahData():

   • Mengambil nilai dari input.
   • Mengecek jika berat lebih dari 5, menentukan kelas warna "highlight."
   • Menambahkan data baru ke array dataStore.
   • Menambahkan baris baru ke tabel dengan informasi yang diambil dari input.
   • Mengosongkan nilai input setelah menambahkan data baru.

3. Fungsi editBaris(row, data):

   • Menyimpan nilai asli sebelum diedit.
   • Mengubah sel menjadi input untuk diedit.
   • Mengganti tombol Edit menjadi Save.
   • Menghapus tombol hapus.

4. Fungsi saveBaris(row, dataIndex):

   • Mengambil nilai yang diedit.
   • Memperbarui data di array dataStore.
   • Mengembalikan sel menjadi teks.
   • Mengganti tombol Save menjadi Edit.
   • Menambahkan tombol hapus.

5. Fungsi hapusBaris(row):

   • Menghapus baris dari tabel dan data dari array dataStore.
   • Memperbarui nomor pada kolom "No" untuk mencerminkan perubahan.

CSS:

• Tambahkan style untuk kelas "highlight" yang memberikan latar belakang kuning jika berat lebih dari 5.

Dengan struktur ini, kode menjadi lebih terorganisir dan memudahkan untuk memahami fungsi dan interaksi antara data dan tampilan.

FULL CODE: https://github.com/2ndmurphy/Inventory-with-array-data