Cloud-Dark / simple-ajax-html-js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

File HTML ini merupakan sebuah halaman web sederhana yang digunakan untuk mencetak data dari sebuah API. File ini terdiri dari beberapa elemen HTML, CSS, dan JavaScript.

Pada bagian HTML, terdapat sebuah elemen <h1> yang menampilkan judul "Simple HTML untuk Mencetak Data dari API". Kemudian, terdapat sebuah elemen <a> yang merupakan hyperlink ke API yang akan digunakan.

Selanjutnya, terdapat sebuah elemen <p> dengan id "data-count" yang akan digunakan untuk menampilkan jumlah data yang akan diambil dari API.

Kemudian, terdapat sebuah elemen <table> dengan id "data-table" yang akan menampilkan data dalam bentuk tabel. Didalam <table>, terdapat elemen <thead> yang berisi baris judul kolom tabel, yaitu "Title", "Description", "Link", dan "Category". Selanjutnya, terdapat elemen <tbody> dengan id "data-body" yang akan digunakan untuk menampilkan data dari API.

Pada bagian CSS, terdapat beberapa aturan yang mengatur tampilan tabel. Tabel memiliki properti border-collapse: collapse; untuk menggabungkan garis-garis antara sel-sel tabel. Sel-sel tabel memiliki properti border: 1px solid black; untuk menampilkan garis di sekitar setiap sel. Selain itu, terdapat properti lain seperti padding, text-align, dan background-color yang mengatur tampilan tabel.

Pada bagian JavaScript, terdapat beberapa fungsi yang akan digunakan untuk mengambil dan menampilkan data dari API. Fungsi showLoading() digunakan untuk menampilkan pesan loading ketika data sedang diambil. Fungsi hideLoading() digunakan untuk menyembunyikan pesan loading setelah data selesai diambil. Fungsi fetchData() merupakan fungsi utama yang akan melakukan pengambilan data dari API. Fungsi ini menggunakan metode fetch() untuk mengambil data dari URL yang ditentukan. Setelah data diterima, fungsi ini akan memproses data tersebut dan memasukkannya ke dalam tabel dengan menggunakan DOM manipulation.

Pada akhirnya, fungsi fetchData() akan dipanggil untuk mengambil dan menampilkan data dari API saat halaman web dimuat.

Dengan demikian, file HTML ini akan menampilkan data dari API dalam bentuk tabel pada halaman web.

About


Languages

Language:JavaScript 79.2%Language:HTML 14.5%Language:CSS 6.3%