PROJECT SEDERHANA JAVASCRIPT #1 MODUL 4

 

Toggle Bold Blue Text on Odd Items

halo semua, kali ini saya akan memberi contoh beserta source code untuk mini project kita kali ini. Saya akan membuat beberap contoh dan menjelaskan setiap fungsi yang ada sebisa mungkin.

Di blog kali ini kita akan membuat mini project "fungsi button" yang di mana button ini terhubung dengan beberapa elemen html dan bisa memanipulasi nya BAIK LANGSUNG SAJA YA GUYS YA!!!

1. Sebuah list dan button: Buat sebuah list, dan sebuah button. Jika button diklik, setiap item list yang genap akan berubah menjadi biru dan tebal.

 

Baik, setelah di perhatikan pada langkah pertama, kita memulai dengan membuat beberapa elemen list html. Disini saya membuat 5 elemen yang dimana nnti kita memfokuskan elemen list bernilai genap yaitu 2 dan 4. Lalu memberi dua button dengan method yang berbeda dari javascript. Satu untuk mengubah warna dan sebaliknya mereset warna ke default. 

Langkah kedua, harus membuat sebuah selector class di css sebagai contoh saya menggunakan class (.blue-bold), setelah itu kita bisa memberi property pada kelas itu seperti sebuah warna dan tulisan yang tebal, ini di buat nnti nya ketika kita memanggil class ini ke javascript di bagian fungsi button untuk merubah elemen list yg di ingin kan.

Langkah ketiga, gunakan tag script di dalam body html lalu kita mulai dengan memberi fungsi ke button pertama, Nah, dalam fungsi ini button (pengubah warna) di berikan sebuah variabel bertipe VAR yang mengambil selector tag html berdasarkan id dan nama tag yang akan di ubah. Kita bisa melihat ada sebuah id di dalam tag "ul" bernama "list" dan di dalamnya ada tag "li" kita panggil dengan DOM querySelectorAll("#list li"), "#" digunakan untuk selector id.

Selanjutnya kita memulai operasi pengambilan index yang diinginkan menggunakan FOR LOOP dengan condition menghitung length(panjang) dari variabel yang berisi elemen html nya. Setelah itu kita membuat conditionl statement apabila "i" tadi (yang menyimpan nilai length variabel) habis di bagi 2 itu menyisakan 1, yang artinya index dari variabel yang di bagi dua itu habis. Ini sama saja seperti bentuk list versi script nya [1,2,3,4,5] nah jika perhatikan list di elemen html kita ada 5 index, index sendiri mulai dihitung dari 0. 

Jika kita lihat ada beberapa index yang habis di bagi dua yakan? nah jadi itu lah target bernilai genap kita dan elemen yang akan berubah ketika button di tekan. Okeii selanjutnya jika sudah kita masukan eksekusi kode nya mengambil variabel tadi dengan index dari variabel for loop yaitu [i]

items[i].classlist.toggle('blue-bold')

classList adalah properti yang ada pada objek elemen di DOM (Document Object Model) yang menyediakan metode untuk menambah, menghapus, dan memeriksa kelas pada elemen HTML.

Fungsi toggle() biasanya digunakan untuk mengubah status visibility atau kelas pada elemen HTML. Dengan toggle(), kita bisa beralih (toggle) antara dua keadaan: menampilkan atau menyembunyikan elemen, atau menambah atau menghapus suatu kelas pada elemen di dalam toggle() sendiri kita harus menambahkan class "blue-bold" yang sudah kita buat. Setelah itu membuat kondisi else yg dimana jika button nya tidak di tekan masih berwarna default.

UNTUK TOMBOL RESET ITU SAMA SEPERTI YANG DIATAS KITA HANYA PERLU MENGUBAH METODE toggle() menjadi remove() untuk menghapus

PREVIEW DAN FULL CODE:

https://github.com/2ndmurphy/Toggle-Bold-Blue-Text-on-Odd-Items

TERIMA KASIH SEMUA!!

masukan kritikan jika ada yang kurang yah..