Proyek Web: Membuat Aplikasi To-Do List Anti Lupa
Halo Sobat Jurnal Coding! Selamat datang kembali di ruang eksplorasi kategori Proyek.
Mari kita bicara tentang keseharian kita sejenak. Apakah kamu pernah merasa harimu sangat kacau karena terlalu banyak hal yang harus dikerjakan? Kamu mungkin mencatat tugas-tugas penting tersebut di atas selembar kertas kecil. Namun naasnya, kertas tersebut kemudian hilang tertiup angin, terselip di bawah buku tebal, atau tidak sengaja terbuang ke tempat sampah. Pada akhirnya, tidak ada satu pun tugas produktif yang berhasil kamu selesaikan hari itu. Kejadian ini sangat manusiawi dan sering dialami oleh kita semua.
Sebagai seorang calon pengembang perangkat lunak profesional, kita memiliki sebuah kekuatan super. Kekuatan super tersebut adalah kemampuan untuk memecahkan masalah sehari-hari yang menyebalkan menggunakan baris-baris kode. Jika kertas catatan sering hilang dan tidak dapat diandalkan, mengapa kita tidak membuat mesin catatan digital kita sendiri?
Pada proyek kali ini, kita akan membangun sebuah aplikasi legendaris yang selalu menjadi ujian kelulusan wajib bagi setiap pemula: Aplikasi To-Do List (Daftar Tugas Harian). Proyek ini bukan sekadar main-main atau latihan mengetik biasa. Membangun aplikasi daftar tugas adalah sarana yang paling sempurna untuk mengasah logika Manipulasi DOM (Document Object Model) di dalam JavaScript.
Kita akan belajar bagaimana mengambil teks yang diketikkan oleh pengguna, menyulapnya menjadi elemen HTML baru dari ketiadaan (tanpa perlu memuat ulang halaman), dan merakit tombol hapus interaktif untuk mencoret tugas yang sudah selesai dikerjakan. Siapkan secangkir minuman hangat kesukaanmu, buka perangkat lunak penulisan kodemu, dan mari kita mulai merakit keajaiban ini!
Langkah 1: Menyusun Kerangka Bangunan (HTML)
Setiap mahakarya selalu dimulai dari fondasi yang kuat. Untuk aplikasi ini, kerangka yang kita butuhkan sebenarnya sangatlah sederhana. Kita membutuhkan sebuah judul besar, kotak teks tempat pengguna mengetikkan tugas, tombol pemicu untuk menambahkan tugas tersebut, dan sebuah wadah kosong (ul) yang nantinya akan menampung deretan tugas yang terus bertambah panjang.
Silakan buat file baru dan tuliskan struktur dasar berikut ini:
<div id="wadah-aplikasi">
<h2>Catatan Tugas Harian</h2>
<div class="area-input">
<input type="text" id="teks-tugas" placeholder="Tulis tugas barumu di sini...">
<button id="tombol-tambah">Tambahkan</button>
</div>
<ul id="daftar-tugas">
<!-- Nanti tugas-tugas baru akan bermunculan di sini -->
</ul>
</div>
Rahasia utama dari kerangka di atas terletak pada pemberian atribut identitas (ID). Atribut ID ibarat sebuah papan nama khusus. Nantinya, bahasa JavaScript akan memanggil elemen-elemen ini berdasarkan papan nama mereka agar tahu persis bagian mana yang harus dimanipulasi isinya.
Langkah 2: Menghias Antarmuka Menjadi Menawan (CSS)
Tanpa sentuhan tata rias, kerangka HTML kita akan terlihat sangat pucat dan membosankan, persis seperti halaman website dari zaman purba era 90-an. Tentu kita tidak ingin aplikasi portofolio kita terlihat jelek, bukan?
Mari kita berikan sedikit sihir warna dan pengaturan ruang agar aplikasi kita terlihat seperti produk premium bernilai jutaan rupiah. Kita akan menggunakan nuansa gelap dengan sedikit aksen menyala agar mata kita tetap nyaman meskipun menatap layar berjam-jam lamanya.
body {
font-family: sans-serif;
background-color: #121212;
color: #ffffff;
display: flex;
justify-content: center;
margin-top: 50px;
}
#wadah-aplikasi {
background: rgba(255, 255, 255, 0.05);
padding: 30px;
border-radius: 12px;
width: 400px;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
input {
width: 70%;
padding: 10px;
border: none;
border-radius: 4px;
}
button {
padding: 10px 15px;
background-color: #00ffff;
color: #000;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background: rgba(0, 255, 255, 0.1);
margin-top: 10px;
padding: 12px;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
}
.tombol-hapus {
background-color: #ff4c4c;
color: white;
}
Tampilannya sekarang pasti terlihat luar biasa elegan! Namun, seindah apapun rupanya saat ini, tombol tersebut masih mati. Jika kamu menekan tombol tambah seribu kali pun, tidak akan ada reaksi apapun. Di sinilah pahlawan sejati kita mengambil alih panggung.
Langkah 3: Menyuntikkan Otak Pintar (JavaScript)
Mari kita berikan nyawa pada aplikasi ini. Logika berpikirnya berjalan seperti ini: Saat tombol ditekan, mesin JavaScript akan membaca teks yang ada di dalam kotak input. Jika kotak tersebut kosong, kita akan memberikan peringatan tegas. Namun jika ada isinya, kita akan merakit sebuah elemen daftar baru, melengkapinya dengan tombol hapus merah menyala, lalu menempelkannya secara instan ke layar.
const kotakInput = document.getElementById("teks-tugas");
const tombolTambah = document.getElementById("tombol-tambah");
const wadahDaftar = document.getElementById("daftar-tugas");
tombolTambah.addEventListener("click", function() {
let isiTugas = kotakInput.value;
if (isiTugas === "") {
alert("Hei, tugasnya tidak boleh kosong!");
} else {
// Merakit elemen baru
let elemenBaru = document.createElement("li");
elemenBaru.innerText = isiTugas;
// Merakit tombol hapus
let tombolHapus = document.createElement("button");
tombolHapus.innerText = "Hapus";
tombolHapus.className = "tombol-hapus";
// Memberikan perintah pada tombol hapus
tombolHapus.addEventListener("click", function() {
elemenBaru.remove();
});
// Menyatukan tombol hapus ke dalam elemen tugas
elemenBaru.appendChild(tombolHapus);
// Menempelkan elemen tugas yang sudah jadi ke layar utama
wadahDaftar.appendChild(elemenBaru);
// Membersihkan kotak input setelah sukses
kotakInput.value = "";
}
});
Membedah Keajaiban Kode: Bagaimana Ini Terjadi?
Bagi kamu yang mungkin baru pertama kali melihat barisan perintah sepanjang ini, tarik napas dalam-dalam dan jangan panik. Mari kita bedah bersama fungsinya menggunakan bahasa manusia yang sangat masuk akal.
Pertama, kita berkenalan dengan perintah ajaib bernama document.createElement. Bayangkan perintah ini sebagai sebuah mesin cetak tiga dimensi yang sangat canggih. Ketika kamu menyuruhnya membuat wadah daftar yang baru, ia akan memproduksi benda tersebut secara gaib dari ketiadaan, menyimpannya sejenak di dalam memori komputer, padahal wujudnya belum pernah kamu tulis sama sekali di dalam kerangka HTML awal.
Kedua, kita menggunakan fungsi krusial bernama appendChild. Fungsi ini bertindak layaknya seorang kurir pengantar paket yang sangat patuh. Setelah mesin cetak selesai memproduksi elemen tugas baru, sang kurir akan menggendong elemen tersebut lalu menyisipkannya dengan rapi ke bagian paling bawah dari daftar layar komputermu. Proses bongkar pasang inilah yang menyebabkan layarmu seketika memunculkan baris teks baru tanpa perlu memuat ulang (refresh) halaman. Sangat jenius!
Tidak berhenti sampai di situ, setiap kali kita memproduksi tugas baru, kita juga mencetak sebuah tombol merah kecil yang menempel di sebelahnya. Kita menyisipkan pendeteksi telinga gaib (Event Listener) pada tombol tersebut. Ketika tugasmu di dunia nyata sudah selesai dan kamu mengeklik tombol hapus itu, sistem akan langsung menargetkan elemen pembungkusnya dan menghancurkannya dari layar menggunakan perintah remove(). Bersih, rapi, dan memberikan kepuasan batin tersendiri saat mencoret pekerjaan yang sudah tuntas!
Kesimpulan Proyek dan Langkah Lanjutan
Selamat dan berikan tepuk tangan meriah untuk dirimu sendiri! Kamu baru saja merakit salah satu proyek paling esensial dalam sejarah dunia pemrograman. Aplikasi interaktif ini menjadi bukti konkret bahwa kamu telah menguasai aliran data, pendeteksian kejadian pengguna, dan pembaruan visual secara langsung (Real-Time).
Tentu saja, aplikasi versi dasar kita ini masih memiliki satu kelemahan kecil: jika kamu menutup peramban web dan membukanya lagi esok hari, semua daftar yang sudah kamu ketik akan menguap hilang. Mengapa demikian? Karena kita belum mengajarinya cara mengingat data secara permanen. Namun jangan khawatir, itu adalah misteri seru yang akan kita pecahkan pada proyek-proyek tingkat lanjut berikutnya menggunakan basis data atau penyimpanan lokal (Local Storage).
Untuk hari ini, nikmatilah rasa bangga atas pencapaianmu. Gunakan aplikasi mandiri ini untuk merencanakan materi pelajaran apa saja yang ingin kamu pelajari esok hari. Jangan pernah takut untuk merusak kodenya; bereksperimenlah dengan mengubah warnanya, ubah bentuk tombolnya, dan jadikan aplikasi ini seratus persen milikmu. Teruslah berlatih, dan sampai jumpa di petualangan kode menakjubkan selanjutnya!
Mari kita bicara tentang keseharian kita sejenak. Apakah kamu pernah merasa harimu sangat kacau karena terlalu banyak hal yang harus dikerjakan? Kamu mungkin mencatat tugas-tugas penting tersebut di atas selembar kertas kecil. Namun naasnya, kertas tersebut kemudian hilang tertiup angin, terselip di bawah buku tebal, atau tidak sengaja terbuang ke tempat sampah. Pada akhirnya, tidak ada satu pun tugas produktif yang berhasil kamu selesaikan hari itu. Kejadian ini sangat manusiawi dan sering dialami oleh kita semua.
Sebagai seorang calon pengembang perangkat lunak profesional, kita memiliki sebuah kekuatan super. Kekuatan super tersebut adalah kemampuan untuk memecahkan masalah sehari-hari yang menyebalkan menggunakan baris-baris kode. Jika kertas catatan sering hilang dan tidak dapat diandalkan, mengapa kita tidak membuat mesin catatan digital kita sendiri?
Pada proyek kali ini, kita akan membangun sebuah aplikasi legendaris yang selalu menjadi ujian kelulusan wajib bagi setiap pemula: Aplikasi To-Do List (Daftar Tugas Harian). Proyek ini bukan sekadar main-main atau latihan mengetik biasa. Membangun aplikasi daftar tugas adalah sarana yang paling sempurna untuk mengasah logika Manipulasi DOM (Document Object Model) di dalam JavaScript.
Kita akan belajar bagaimana mengambil teks yang diketikkan oleh pengguna, menyulapnya menjadi elemen HTML baru dari ketiadaan (tanpa perlu memuat ulang halaman), dan merakit tombol hapus interaktif untuk mencoret tugas yang sudah selesai dikerjakan. Siapkan secangkir minuman hangat kesukaanmu, buka perangkat lunak penulisan kodemu, dan mari kita mulai merakit keajaiban ini!
Langkah 1: Menyusun Kerangka Bangunan (HTML)
Setiap mahakarya selalu dimulai dari fondasi yang kuat. Untuk aplikasi ini, kerangka yang kita butuhkan sebenarnya sangatlah sederhana. Kita membutuhkan sebuah judul besar, kotak teks tempat pengguna mengetikkan tugas, tombol pemicu untuk menambahkan tugas tersebut, dan sebuah wadah kosong (ul) yang nantinya akan menampung deretan tugas yang terus bertambah panjang.
Silakan buat file baru dan tuliskan struktur dasar berikut ini:
<div id="wadah-aplikasi">
<h2>Catatan Tugas Harian</h2>
<div class="area-input">
<input type="text" id="teks-tugas" placeholder="Tulis tugas barumu di sini...">
<button id="tombol-tambah">Tambahkan</button>
</div>
<ul id="daftar-tugas">
<!-- Nanti tugas-tugas baru akan bermunculan di sini -->
</ul>
</div>
Rahasia utama dari kerangka di atas terletak pada pemberian atribut identitas (ID). Atribut ID ibarat sebuah papan nama khusus. Nantinya, bahasa JavaScript akan memanggil elemen-elemen ini berdasarkan papan nama mereka agar tahu persis bagian mana yang harus dimanipulasi isinya.
Langkah 2: Menghias Antarmuka Menjadi Menawan (CSS)
Tanpa sentuhan tata rias, kerangka HTML kita akan terlihat sangat pucat dan membosankan, persis seperti halaman website dari zaman purba era 90-an. Tentu kita tidak ingin aplikasi portofolio kita terlihat jelek, bukan?
Mari kita berikan sedikit sihir warna dan pengaturan ruang agar aplikasi kita terlihat seperti produk premium bernilai jutaan rupiah. Kita akan menggunakan nuansa gelap dengan sedikit aksen menyala agar mata kita tetap nyaman meskipun menatap layar berjam-jam lamanya.
body {
font-family: sans-serif;
background-color: #121212;
color: #ffffff;
display: flex;
justify-content: center;
margin-top: 50px;
}
#wadah-aplikasi {
background: rgba(255, 255, 255, 0.05);
padding: 30px;
border-radius: 12px;
width: 400px;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
input {
width: 70%;
padding: 10px;
border: none;
border-radius: 4px;
}
button {
padding: 10px 15px;
background-color: #00ffff;
color: #000;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background: rgba(0, 255, 255, 0.1);
margin-top: 10px;
padding: 12px;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
}
.tombol-hapus {
background-color: #ff4c4c;
color: white;
}
Tampilannya sekarang pasti terlihat luar biasa elegan! Namun, seindah apapun rupanya saat ini, tombol tersebut masih mati. Jika kamu menekan tombol tambah seribu kali pun, tidak akan ada reaksi apapun. Di sinilah pahlawan sejati kita mengambil alih panggung.
Langkah 3: Menyuntikkan Otak Pintar (JavaScript)
Mari kita berikan nyawa pada aplikasi ini. Logika berpikirnya berjalan seperti ini: Saat tombol ditekan, mesin JavaScript akan membaca teks yang ada di dalam kotak input. Jika kotak tersebut kosong, kita akan memberikan peringatan tegas. Namun jika ada isinya, kita akan merakit sebuah elemen daftar baru, melengkapinya dengan tombol hapus merah menyala, lalu menempelkannya secara instan ke layar.
const kotakInput = document.getElementById("teks-tugas");
const tombolTambah = document.getElementById("tombol-tambah");
const wadahDaftar = document.getElementById("daftar-tugas");
tombolTambah.addEventListener("click", function() {
let isiTugas = kotakInput.value;
if (isiTugas === "") {
alert("Hei, tugasnya tidak boleh kosong!");
} else {
// Merakit elemen baru
let elemenBaru = document.createElement("li");
elemenBaru.innerText = isiTugas;
// Merakit tombol hapus
let tombolHapus = document.createElement("button");
tombolHapus.innerText = "Hapus";
tombolHapus.className = "tombol-hapus";
// Memberikan perintah pada tombol hapus
tombolHapus.addEventListener("click", function() {
elemenBaru.remove();
});
// Menyatukan tombol hapus ke dalam elemen tugas
elemenBaru.appendChild(tombolHapus);
// Menempelkan elemen tugas yang sudah jadi ke layar utama
wadahDaftar.appendChild(elemenBaru);
// Membersihkan kotak input setelah sukses
kotakInput.value = "";
}
});
Membedah Keajaiban Kode: Bagaimana Ini Terjadi?
Bagi kamu yang mungkin baru pertama kali melihat barisan perintah sepanjang ini, tarik napas dalam-dalam dan jangan panik. Mari kita bedah bersama fungsinya menggunakan bahasa manusia yang sangat masuk akal.
Pertama, kita berkenalan dengan perintah ajaib bernama document.createElement. Bayangkan perintah ini sebagai sebuah mesin cetak tiga dimensi yang sangat canggih. Ketika kamu menyuruhnya membuat wadah daftar yang baru, ia akan memproduksi benda tersebut secara gaib dari ketiadaan, menyimpannya sejenak di dalam memori komputer, padahal wujudnya belum pernah kamu tulis sama sekali di dalam kerangka HTML awal.
Kedua, kita menggunakan fungsi krusial bernama appendChild. Fungsi ini bertindak layaknya seorang kurir pengantar paket yang sangat patuh. Setelah mesin cetak selesai memproduksi elemen tugas baru, sang kurir akan menggendong elemen tersebut lalu menyisipkannya dengan rapi ke bagian paling bawah dari daftar layar komputermu. Proses bongkar pasang inilah yang menyebabkan layarmu seketika memunculkan baris teks baru tanpa perlu memuat ulang (refresh) halaman. Sangat jenius!
Tidak berhenti sampai di situ, setiap kali kita memproduksi tugas baru, kita juga mencetak sebuah tombol merah kecil yang menempel di sebelahnya. Kita menyisipkan pendeteksi telinga gaib (Event Listener) pada tombol tersebut. Ketika tugasmu di dunia nyata sudah selesai dan kamu mengeklik tombol hapus itu, sistem akan langsung menargetkan elemen pembungkusnya dan menghancurkannya dari layar menggunakan perintah remove(). Bersih, rapi, dan memberikan kepuasan batin tersendiri saat mencoret pekerjaan yang sudah tuntas!
Kesimpulan Proyek dan Langkah Lanjutan
Selamat dan berikan tepuk tangan meriah untuk dirimu sendiri! Kamu baru saja merakit salah satu proyek paling esensial dalam sejarah dunia pemrograman. Aplikasi interaktif ini menjadi bukti konkret bahwa kamu telah menguasai aliran data, pendeteksian kejadian pengguna, dan pembaruan visual secara langsung (Real-Time).
Tentu saja, aplikasi versi dasar kita ini masih memiliki satu kelemahan kecil: jika kamu menutup peramban web dan membukanya lagi esok hari, semua daftar yang sudah kamu ketik akan menguap hilang. Mengapa demikian? Karena kita belum mengajarinya cara mengingat data secara permanen. Namun jangan khawatir, itu adalah misteri seru yang akan kita pecahkan pada proyek-proyek tingkat lanjut berikutnya menggunakan basis data atau penyimpanan lokal (Local Storage).
Untuk hari ini, nikmatilah rasa bangga atas pencapaianmu. Gunakan aplikasi mandiri ini untuk merencanakan materi pelajaran apa saja yang ingin kamu pelajari esok hari. Jangan pernah takut untuk merusak kodenya; bereksperimenlah dengan mengubah warnanya, ubah bentuk tombolnya, dan jadikan aplikasi ini seratus persen milikmu. Teruslah berlatih, dan sampai jumpa di petualangan kode menakjubkan selanjutnya!
Apa pendapatmu tentang artikel ini?
Artikel Terkait
Proyek 29 Artikel
Baca →
Proyek Menyenangkan: Membangun Aplikasi Papan Ketik Piano Virtual Interaktif
Proyek 29 Artikel
Baca →
Proyek Fungsional: Membangun Aplikasi Konverter Mata Uang Cerdas dengan API
Proyek 29 Artikel
Baca →