[DRAFT] Membuat Aplikasi To Do List Tanpa Menggunakan Framework

tautan demo:
Anda bisa mencoba applikasinya di link berikut:
https://hagarden.netlify.app/tdl/

playground:
https://hagarden.netlify.app/tdl/edit.html

Aplikasi ini tidak menggunakan database. Data disimpan dalam bentuk json dan disimpan di local storage.

wireframe:

Layout HTML:

<div class='cont tdl'>

    <div class='header'>

        <span class='judul'>>> RENCANAKU</span>

        <button class='tambah'>+</button>

    </div>

    <div class='bayangan'>

    </div>

    <div class="daftar-cont">

    </div>

    <template>

        ....

    </template>

</div>

Secara umum layout ini bisa di bagi tiga, di bagian atas berisi judul dan tombol untuk menambah item. Di bagian bawah ada kontainer untuk menampung item-item yang sudah dibuat dan dibawahnya lagi ada template untuk menyimpan template-template yang kita pakai.

penjelasan file tdl.js:
File tdl.js adalah file yang berisi kode sumber utama dari applikasi. Hampir semuanya ditaruh disini.

"use strict";

let tdl = {};

tdl.item = {};

tdl.db = {};

tdl.view = {

    tambahTbl: document.body.querySelector('div.tdl div.header button.tambah'),

    daftarCont: document.body.querySelector('div.tdl div.daftar-cont')

};

• Layout Utama
• HTML
• Membuat tautan
• Layout Item
• Posisi terbuka
• Posisi Tertutup

• Menambahkan Membuat Item Baru
• Membuat Event on click
• Isi data deskripsi
• Membuat View

• Event pada view
• Edit
• Hapus
• Update
• Sudah
• Belum  Selesasi

• Database
• Simpan
• Load
• Hapus