PROJECT SEDERHANA JAVASCRIPT #4 MODUL 5

 



Dynamic List Element Color Customization with JavaScript





  1. Daftar Elemen: Terdapat sebuah daftar dengan elemen-elemen <li> seperti "halo," "selamat," "pagi," dan seterusnya.


  3. Dropdown Menus: Ada dua dropdown menu dengan opsi warna, satu untuk elemen ganjil dan satu lagi untuk elemen genap.


  5. CSS Styling: Terdapat beberapa kelas CSS yang menentukan warna teks untuk elemen dengan kelas tertentu.


  7. JavaScript Functions: Ada dua fungsi JavaScript, yaitu Genap() dan Ganjil(), yang dipanggil ketika nilai dropdown diubah. Fungsi-fungsi ini mengatur warna elemen ganjil atau genap sesuai dengan pilihan dropdown.


  9. Dinamika Warna: Melalui JavaScript, warna elemen dapat diubah berdasarkan pilihan yang dibuat oleh pengguna pada dropdown.

Secara keseluruhan, halaman ini memberikan interaktivitas kepada pengguna untuk mengatur warna elemen-elemen dalam daftar dengan menggunakan dropdown menu dan JavaScript.


Hasil Review dan Source CODE:

https://github.com/2ndmurphy/Dynamic-List-Element-Color-Customization-with-JavaScript

Komentar

Posting Komentar

Postingan populer dari blog ini

PROJECT SEDERHANA JAVASCRIPT #14 MODUL 8

Gambar
 Inventory with pages Body Section: <body> : Bagian utama yang berisi elemen-elemen yang akan ditampilkan di halaman web. Input form untuk memasukkan data barang. Tabel untuk menampilkan data barang. Daftar untuk menampilkan navigasi halaman (pagination). <script> : Bagian ini berisi script JavaScript untuk mengatur logika interaksi pengguna. JavaScript Section: Variabel seperti dataStore , itemsPerPage , dan currentPage digunakan untuk menyimpan data dan mengatur pagination. Fungsi tambahData() : Menambahkan data ke tabel ketika tombol "Tambah" ditekan. Fungsi editBaris() : Mengubah baris tabel menjadi form input untuk pengeditan. Fungsi saveBaris() : Menyimpan perubahan setelah pengeditan. Fungsi hapusBaris() : Menghapus baris dari tabel. Fungsi tampilkanData() : Menampilkan data pada tabel dan membuat navigasi halaman. Load Data on Page Load: Terdapat pemanggilan fungsi tampilkanData() untuk menampilkan data saat halaman dimuat. Dokumen ini memberikan fungsio...
Baca selengkapnya