Begini Cara Membuat Aplikasi to Do App Dengan Html Css Javascript
Posted on April 16, 2022 • 3 minutes • 513 words
Pada tutorial kali ini saya akan membuat project dengan html,css dan javascript.
Untuk membuat program apliask to-do App, dimana nanti program tersebut nanti bisa digunakan untuk bahan pembelajaran teman-teman semua.
Untuk tutorial ini dapat diikuti oleh beginner, yang penting sudah mengetahui basic html,css dan javscript sudah cukup. Tidak bisa javascript juga tidak apa-apa.
Nanti dengan sendiri akan mudah jika dilatih.
Kita mulai..
Baik, pertama kamu bisa buat project folder baru, bebas dimana saja.
Saya ada di C:\user\iyan\code\NAMA_PROJECT
Nama project saya berikan “todoapp”
Buka folder project kamu.
Buat 3 File dengan nama masing-masing
- index.html
- main.css
- main.js
Untuk tutorial full bisa lihat video di youtube saya :
Disini saya akan memberikan screenshoot agar teman-teman bisa belajar tanpa copy pasti secara langsung.
Dengan ini saya harpakan teman-teman dapat mengerti setiap langkahnya.
Pertama buka index.html, ketikan
Untuk pertama kita akan buat bagian tersebut dulu, kemudian kita percantik sedikit dengan CSS.
Buka main.css, ketika code berikut
Dengan code css tersebut kamu sudah melihat perbedaan dari sebelumnya, kurang lebih tampilannya seperti ini
Oke kita lanjut untuk mempercantiknya, tambahkan css dibawah ini ke main.css
Maka tampilanya kurang lebih jadi sepert ini
Oke, kita lanjut buat tambahin code di index.html
tambahkan berikut dibawah tag header
Lanjutkan utuk mempercantik tampilan tambahkan kode css berikut
Tampilannya kuran lebih akan seperti ini
Jadi nanti task yang akan kita tambahkan akan berada di my task 1 dan seterusnya.
Oke sekarang kita comment code di index.html yagn barada didalam tag div dengan nama class task
Karena nanti div tersebut akan ditampilkan lewa javascript.
Oke lanjut aja biar tidak tambah mumet.
Step 2 Code in Javscript
Kita buka file main.js
Ketika kode javascript berikut
Fungsi diatas untuk membuat variable yang berisi ID dan Class yang berada di index.html
oke kita tambahin kode javascript dibawahnya
Kemudian kamu coba untuk klik tombol add task tanpa mengisi inputan, dan coba juga klik dengan mengisi inputan. Jangan lupa bukan console kamu dibrowser.
Jika kosong maka akan muncul pop-up alert dibrowser dan jika di isi akan muncul info di console.
Oke kita lanjut sekarang bagaimana supaya task yang kita inputkan tampil secara list.
Perhatikan saya mengubah kode javascript sebelumnya, jadi perrhatikan dengan teliti supaya tidak terjadi error. Saya tandai dengan comment //perhatian.
Kemudian coba tambahkan beberapa task maka akan tampil sepert ini
Setiap task yang kita masukan akan tampil di list.
Oke untuk selanjut bagaiman cara kita untuk edit dan hapus task list yang ada.
Oke lanjut untuk kode javascriptnya, lihat dan perhatikan dengan seksama, saya berikan comment //perhatian
Lihat gambar sebelumnya clue untuk kamu lihat line 18 kode disisipkan diline tersebut.
Kemudian coba kembali untuk mengisi task,
Sudah keluar kah?
Akan tetapi disini tombol edit dan delete belum keluar.
Mari kita tambahkan kode di javascript agar tombol edit dan delete keluar. Sisipkan pada line 16 lihat gambar sebelumnya.
Oke setelah berhasil tambah tombol, sekarang waktunya untuk membuat fungsi dari tombol edit dan delete agar bisa melakukan action.
Coba kamu jalankan programan coba tambahkan ,edit dan delete.
Apakah bisa, jika ada kendala, bisa langsung dm saya di instagram: https://www.instagram.com/noviyantoian twitter: https://www.twitter.com/noviyantoian
Terim kasih, jangan lupa share ke teman-teman kalian ya jika bermanfaat.