Pada artikel ini, kita akan mengimplementasikan Halaman Arahan Bookmark menggunakan HTML, CSS, dan Javascript. Pengguna dapat dengan mudah menambah, mengelola, dan menghapus bookmark, sehingga menghasilkan perpustakaan digital yang rapi untuk situs web favorite mereka. Menandai halaman arahan mengacu pada halaman web atau situs web tempat pengguna mem-bookmark situs web tersebut, untuk menyimpannya di browser web mereka untuk akses yang mudah dan cepat.
Prasyarat
- HTML
- CSS
- Javascript
Mendekati
- Buat folder proyek baru dan atur dengan file berikut: index.html, style.css, dan script.js
- Buka index.html di editor kode dan buat struktur HTML dasar. Sertakan header, formulir untuk input, dan daftar kosong untuk bookmark.
- Jika URL tidak kosong (validasi formulir berhasil).
- Ini membuat elemen item daftar baru (<li>) untuk mewakili bookmark
- Ia menambahkan kelas "item-bookmark" ke item daftar untuk menerapkan gaya css
- ini menetapkan konten HTML dari item daftar, termasuk elemen jangkar (<a>) untuk URL dan tombol "Hapus".
- Itu menambahkan item daftar yang baru dibuat ke daftar bookmark.
- Ini menghapus kolom input untuk entri bookmark berikutnya.
- Ini memanggil fungsi addDeleteBookmarkListener untuk menambahkan pendengar acara ke tombol "Hapus".
- Ketik tombol "Hapus" diklik, item penanda yang terkait akan dihapus dari daftar penanda.
- Di file style.css, tambahkan aturan CSS untuk menata gaya halaman anda. Gunakan kelas dan ID untuk menargetkan elemen tertentu dan membuat desain menarik secara visual.
- Di file script.js, mulailah dengan menambahkan pendengar acara untuk menangani penambahan bookmark.
Contoh: Dibawah ini adalah implementasi Bookmark Landing Page menggunakan HTML, CSS, dan Javascript.
Hasil Akhir
Github links: Ferdyrahman2001/bookmark: Bookmarks (github.com)
No comments:
Post a Comment