PROJECT SEDERHANA JAVASCRIPT #11 MODUL 8

 

Sorting Page with Dynamic Table

Mari saya jelaskan bagian-bagian utama dari kode HTML, CSS, dan JavaScript tersebut:

HTML:

1. Input Angka dan Sorting Order:

   • Terdapat input teks (<input type="text" id="inputNumbers">) untuk memasukkan angka yang dipisahkan oleh koma.
   • Terdapat radio button untuk memilih urutan sorting, yaitu ascending dan descending.

2. Button Sorting:

   • Tombol "Sorting" (<button onclick="sortNumbers()">Sorting</button>) yang akan memanggil fungsi JavaScript sortNumbers() saat diklik.

3. Hasil Sorting Table:

   • Sebuah tabel (<table id="resultTable">) yang akan menampilkan hasil sorting.

CSS:

1. Styling:
   • Beberapa aturan CSS untuk mengatur tata letak dan tampilan halaman.

JavaScript:

1. Fungsi sortNumbers():

   • Mendapatkan nilai input angka dari elemen dengan id inputNumbers.
   • Memisahkan angka dengan koma dan mengonversinya menjadi array angka (numbersArray).
   • Mendapatkan nilai urutan sorting (ascOrder) dari radio button.
   • Melakukan sorting pada array angka berdasarkan urutan yang dipilih.
   • Membuat dan memasukkan angka yang telah diurutkan ke dalam tabel hasil (resultTable).

2. Menonaktifkan Radio Button:

   • Setelah sorting, kedua radio button (ascOrder dan descOrder) dinonaktifkan agar tidak dapat diubah lagi.

Penjelasan Tambahan:

• map(Number): Menggunakan map(Number) untuk mengonversi setiap elemen array yang dihasilkan dari split(',') menjadi tipe data Number.
• insertRow dan insertCell: Menggunakan metode ini untuk membuat dan menyisipkan baris dan sel dalam tabel hasil.

PREVIEW DAN SOURCE CODE:

https://github.com/2ndmurphy/Sorting-Page-Dynamic-Table