PROJECT SEDERHANA JAVASCRIPT #5 MODUL 5

 

Dynamic List Generator Web Page

1. 1)Form Input: Terdapat dua input dalam bentuk teks dan angka.

   • <input type="text" id="itemName">: Input untuk nama item.
   • <input type="number" id="itemCount" min="1">: Input untuk jumlah item dengan batasan minimum 1.

2. 2)Generate List Button: Tombol "Generate List" yang, ketika diklik, memanggil fungsi generateList().

3. 3)JavaScript Function generateList():

   • Mengambil nilai dari input nama item dan jumlah item.
   • Memastikan jumlah item positif dan ada nama item yang dimasukkan.
   • Menghasilkan elemen daftar HTML (<ul>) dengan elemen-elemen daftar (<li>) sesuai dengan nama item dan jumlah yang diinputkan.
   • Mengosongkan kontainer sebelum menghasilkan daftar baru.
   • Menambahkan daftar yang dihasilkan ke dalam elemen dengan ID 'listContainer'.

4. 4)Event Listeners:

   • Menambahkan event listener pada input nama item dan jumlah item untuk memanggil generateList() setiap kali terjadi perubahan pada input.

5. 5)Styling: Menggunakan file eksternal style.css untuk styling, tetapi file tersebut tidak disertakan dalam contoh yang diberikan.

Secara keseluruhan, halaman ini memberikan interaktivitas kepada pengguna untuk membuat daftar dinamis dengan mengisi nama item dan jumlah item, dan kemudian mengklik tombol "Generate List".

HASIL PREVIEW DAN SOURCE CODE:

https://github.com/2ndmurphy/Dynamic-List-Generator-Web-Page