Cara Membuat Aplikasi To Do List dengan HTML, CSS, dan JavaScript
Membuat To Do List dengan JavaScript Pada artikel ini Anda akan belajar cara membuat Daftar Todo menggunakan JavaScript. Daftar Todo JavaScript membantu Anda membuat daftar hal-hal yang ingin Anda lakukan sepanjang hari. Misalkan Anda ingin melakukan sesuatu sepanjang hari yang dapat Anda daftarkan di sini. Setiap kali Anda menyelesaikan tugas itu maka Anda dapat menghapusnya.
Dalam tutorial ini, kita akan membangun aplikasi To-Do List menggunakan JavaScript murni. Jika Anda seorang pemula dan bosan belajar dari tutorial teori yang membosankan maka Anda berada di tempat yang tepat karena di sini kami akan secara praktis membangun aplikasi To-Do ini dari awal. Jangan khawatir, saya telah menjelaskan setiap langkah untuk mengembangkan aplikasi To-do kami.
Dalam aplikasi ini, kami akan dapat menambahkan tugas baru yang harus diselesaikan, menghapus tugas, menandai tugas setelah selesai, kami akan memiliki menu search untuk memfilter tugas kami berdasarkan tugas yang selesai atau tidak lengkap. Sebagai bahan untuk pembelajaran kami juga menyediakan source code gratis to do list template.
Disini kita harus membuat folder dan kita akan membuat tiga file seperti:
- index.html
- style.css
- source.js
toDo website
Todo website for writing daily tasks
Options
- Search tasks
- Delete tasks
- Do not delete tasks by refreshing the page
1. Buat file index.html
Karena tutorial ini terutama berfokus pada pengajaran konsep JavaScript, saya berasumsi bahwa Anda harus terbiasa dengan sintaks HTML dan mudah memahami kode di bawah, tetapi kita masih akan membahas secara singkat tentang apa yang terjadi di file html ini.
Dalam tag body file ini, kami memiliki tiga bagian utama: 1. Heading 2. Form 3.Task Container dan terakhir kami hanya menautkan file JavaScript kami.
Bagian heading seperti yang sudah Anda duga berisi judul aplikasi yang kami buat.
Di bagian formulir, kami memiliki elemen input untuk memasukkan tugas baru, tombol untuk menampilkan tugas itu di bawah, tombol search yang memfilter tugas yang di daftar berdasarkan kata kunci dari nama yang dibuat.
Baca juga : Pengenalan Dasar HTML dan Contohnya
2. Buat file style.css
Kode css ini adalah style saya untuk aplikasi To-Do List kami yang dapat Anda pahami dengan mudah hanya dengan membaca sekali karena saya juga telah menambahkan style.scss yang mendefinisikan peran kode tersebut. Anda juga dapat menata bagian css Anda sendiri sesuai dengan selera Anda.
Disini saya menambahkan dan membuat folder style yang terdapat file style.scss didalamnya
Masih di lokasi yang sama saya juga memisahkan bagian tersebut! Didalam folder style saya menambahkan folder baru dengan nama "dist" dan didalamnya saya menambahkan file style.css
Dan silahkan kirimkan link styling anda di kolom komentar. Saya akan senang melihat semua gaya kreatif Anda.
Baca juga : Pengenalan Dasar CSS dan Contohnya
3. Buat File JavaScript untuk fungsionalitas
File JavaScript ini berfungsi untuk menampung semua kode dengan fungsi-fungsi dari javascript yang akan kita gunakan untuk membuat to do list. Disini saya membuat folder dengan nama "source" dan didalamnya terdapat file dengan nama source.js
Baca juga : Pengenalan Dasar JavaScript dan Contohnya
Inilah bagian yang menarik yang kalian baca ini. File JavaScript bertanggung jawab atas semua fungsi aplikasi kami.
1. Menyimpan Elemen dalam konstanta
Pertama mari kita simpan elemen html yang akan kita gunakan dalam fungsi yang berbeda.
const content = document.getElementsByClassName("content")[0];
const btn_add = document.getElementById("btn-add");
const input_add = document.getElementById("input-add");
const btn_search = document.getElementById("btn-search");
const btn_close_search = document.getElementById("btn-close-search");
const search_container = document.getElementsByClassName("search-container")[0];
const input_search = document.getElementById("input-search");
Di sini, dengan bantuan metode document.getElementsByClassName() kita menyimpan elemen html dengan kelas tertentu ke konstanta masing-masing. Sekarang konstanta content, btn_add, input_add, btn_search, btn_close_search, search_container, dan input_search berisi elemen html.
2. Menambahkan Event Listeners ke elements
Sekarang kami akan menambahkan event listeners klik pencarian ke Tombol search untuk mencari daftar input.
// search
btn_search.addEventListener("click", function() {
search_container.classList.remove("closeSearch");
search_container.classList.add("openSearch");
})
btn_close_search.addEventListener("click", function() {
search_container.classList.remove("openSearch");
search_container.classList.add("closeSearch");
})
input_search.addEventListener("input", function() {
let searchValue = input_search.value;
searchValue = searchValue.replace(" ", " ");
input_search.value = searchValue;
if (searchValue) {
$(".task-container").css("display", "none");
$(".task-name:contains(" + searchValue + ")").parent().parent().css("display", "flex")
} else {
$(".task-container").css("display", "flex");
}
})
Metode addEventListener() menempelkan event handler ke elemen yang ditentukan. Sekarang ketika kita akan mengklik elemen tombol '+' di input kita maka fungsi btn-search akan dijalankan. Ketika Anda akan mengklik tugas apa pun yang ditambahkan dalam wadah tugas aplikasi kami, maka fungsi btn-close-search akan dijalankan.
To do list artinya daftar tugas yang harus dilakukan dalam rentang waktu tertentu. Biasanya digunakan dalam harian, mingguan, atau bulanan. Ini adalah bagian dari perencanaan. To do list dapat dibuat untuk tim, atau untuk individu.
Pada postingan kali ini kami tidak akan menjelaskan satu per satu secara detail namun kami akan membagikan source code aplikasi to do list secara gratis. Ini adalah kode sumber gratis yang dapat Anda pelajari dan gunakan untuk mempelajari cara menautkan dan menghubungkan file html, css, dan javascript.
Hasil Tampilan
Berikut ini adalah hasil tampilan dari to do list dengan html css javascript:
Bagaimana hasilnya? cukup memuaskan bukan? Dengan Membuat Simple Todo List Dengan Html Css Javascript ini kita dapat belajar banyak hal dari pengkodean dari bahasa pemrograman yang digunakan.
Itu saja untuk hari ini. Saya harap ini bermanfaat untuk teman-teman. Saya akan memposting ide-ide saya tentang berbagai topik dan kami akan membangun banyak aplikasi keren bersama.
Kesimpulan
Dalam tutorial JavaScript ini, kami membuat proyek yang indah di To-do list. Kami menggunakan berbagai fungsi untuk mencapai hasil yang berbeda dalam program kami. Sekarang setelah Anda memiliki pemahaman yang lebih baik tentang prosedur yang perlu Anda ikuti untuk membuat halaman web, Anda siap untuk membangun proyek yang lebih maju.
Demikian posting kali tentang Cara Membuat Aplikasi To Do List dengan HTML, CSS, dan JavaScript. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!
samuelpasaribu.com
samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.
