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
