Noviyanto
April 16, 2022

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

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

index html

Untuk pertama kita akan buat bagian tersebut dulu, kemudian kita percantik sedikit dengan CSS.

Buka main.css, ketika code berikut

index html

Dengan code css tersebut kamu sudah melihat perbedaan dari sebelumnya, kurang lebih tampilannya seperti ini

index html

Oke kita lanjut untuk mempercantiknya, tambahkan css dibawah ini ke main.css

index html

Maka tampilanya kurang lebih jadi sepert ini

index html

Oke, kita lanjut buat tambahin code di index.html

tambahkan berikut dibawah tag header

index html

Lanjutkan utuk mempercantik tampilan tambahkan kode css berikut

kode css 3

Tampilannya kuran lebih akan seperti ini

index html

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

javscript 1

Fungsi diatas untuk membuat variable yang berisi ID dan Class yang berada di index.html

oke kita tambahin kode javascript dibawahnya

javscript 1

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.

javscript 1

Kemudian coba tambahkan beberapa task maka akan tampil sepert ini

javscript 1

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. javscript 1

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.

javscript 1

Oke setelah berhasil tambah tombol, sekarang waktunya untuk membuat fungsi dari tombol edit dan delete agar bisa melakukan action.

javscript 1

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.

coding project aplikasi html css javscript
Follow me

I work on everything coding and Blogging