Membuat TODO list sederhana menggunakan javascript
Halo teman-teman, kali ini kita akan mempraktekan bagaimana cara Membuat TODO list sederhana dengan menggunakan Bahasa pemogramman javascript. Sebelum memulai membuat program nya, kita pelajari dahulu definisi dari todo list.
Todo list merupakan daftar pekerjaan yang harus diselesaikan, diurutkan berdasarkan skala prioritas. Nah nantinya kita akan membuat todo list ini dapat ditambah, dicoret, dan dihapus dari daftar tersebut dan juga bakal kita kembangkan agar list todo kita dapat tersimpan dibrowser.
Membuat file HTML
Langsung saja kita praktekkan caranya Pertama buat dulu file html beserta element yang dibutuhkan
<pre class="language-markup"><code>
</code> </pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style> .done {text-decoration: line-through;} </style>
<h1 class=""> membuat todo </h1>
<form action="">
<label for="isi"> masukan isi</label>
<input type="text" name="isi" id="isi" class="isi">
<input type="button" value="tambah" class="tambah" onclick="tambah()">
</form>
<ul id="list">
</ul>
<script>
</script>
</body>
</html>
2. Membuat fungsi script
Ingat-ingat nama event onclick tersebut, karena akan berfungsi sebagai pemanggil fungsi yang nanti akan kita buat.
Lalu, pada bagian script tambahkan kode berikut untuk mengambil elemen dari ul dengan id list.
<script>
const box = document.querySelector('#list')
</script>jika sudah,
saatnya membuat fungsi baru Bernama tambah() yang akan kita gunakan untuk
menambah data inputan kita ke dalam list. letakan dibawah variabel box.
function tambah() {
let tex = document.querySelector('#isi')
console.log(tex)
let todo = "<li> <span onclick='toggle(this)'> "+ tex.value +"</span>"
+ "<span onclick='del(this)'> [X] </span>" + "</li>"
box.insertAdjacentHTML('afterbegin', todo)
tex.value =""
}
cek dan jalankan halaman kita, apakan sudah bisa membuat list.
selanjutnya kita membuat fungsi toggle() yang nantinya berfungsi sebagai penanda(tercoret garis tengah) jika kita menekan salah satu list tersebut
function toggle(el) {
el.classList.toggle('done')
}
nah jangan lupa kita membuat fungsi hapus() pada text [x]
function del(el) {
el.parentElement.remove()
}
saatnya kita coba, buka Kembali halaman html tersebut, lalu coba masukan beberapa data. Lalu klik salah satu list tersebut, maka list yang kita pilih bakal garis tengah. Dan juga saat menekan [x] maka akan menghapus list tersebut.
3. Penutup
Demikian tutorial untuk membuat todolist sederhana, selanjutnya kalian bisa mengembangkannya menggunakan API localstorage agar data-data yang kita masukkan tadi tersimpan kedalam browser Jadinya walaupun kita menutup browser, data list kita tidak akan terhapus, selama tidak menghapus cookie halaman yang kalian buat tadi.
Reviewed by andri aditya
on
February 07, 2022
Rating:
No comments: