[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

Room generator untuk dungeon

Algorithma untuk membuat ruangan dalam dungeon.

Kodenya di desain agar bisa dijalankan secara step by step ataupun langsung.

Disertai dengan editor untuk kode sumbernya sehingga bisa di edit dan di test secara langsung.

Demo:
https://hagarden.netlify.app/blog/room_gen_steps/edit.html

Playground:
https://hagarden.netlify.app/blog/room_gen_steps/edit.html

Warung WA Warung berbasis WA [draft]

Warung WA adalah warung yang terinspirasi dari group WA jualan di perumahan selama pandemi. Banyak ibu-ibu ataupun bapak-bapak yang bergabung dalam group WA untuk berjualan.

http://warungwa.hagarden.xyz/

Warung ini sederhana. Semua transaksi dilakukan lewat WA dan tampilan warung berfungsi sebagai katalog. 

Warung ini bisa mendukung banyak anggota dimana tiap anggota bisa memiliki lapak-lapak sendiri dan bisa saling membantu mempromosikan barang sesama penjual.

Enable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldEditEdit in GingerEdit in Ginger×

Purwarupa: Silsilah Keluarga

Aplikasi silsilah keluarga sederhana yang dibuat dengan menggunakan javascript.

Bisa di coba disini:
https://hagarden.netlify.app/silsilah/




Applikasi ini masih berupa prototype dan dalam pengembangan.Enable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldEditEdit in GingerEdit in Ginger×Enable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldEditEdit in GingerEdit in Ginger×

Algorithma Path Finding #10: Berhenti di sebelah target [DRAFT]

Penerapan algorithma path-finding dalam game onet [Draft]

Agorithma Path Finding #9: Config [DRAFT]

Ini adalah pembahasan ke 9 dari seri Algorithma Path Finding. Pembahasan pertama bisa Anda baca pada tautan ini.

Pada pembahasan sebelumnya kita membahas tentang refaktoring kode sumber kita untuk persiapan pembahasan selanjutnya yang akan banyak membahas tentang variasi dalam path finding. Kita akan membuat algorithma kita lebih fleksibel dengan konfigurasi yang bisa diubah-ubah sesuai kebutuhan.

Kode sumber bisa di download disini

Video Youtube:

(https://www.youtube.com/embed/NVe-ASdHAJ0 )

Anda juga bisa mencoba secara daring disini.

Bila Anda mencoba demo di atas, maka Anda akan melihat di pojok kanan atas ada menu kecil. Saat ini  pilihannya hanya ada dua: yaitu Fast dan A star. Untuk melihat perbedaan keduanya silahkan lihat pada videonya. Perilaku algorithma akan terlihat berubah pada kondisi-kondisi tertentu.

Apa yang berubah?

Perubahan pertama yang terlihat adalah adanya tambahan menu. Pembuatan menu sendiri sebenarnya bukan termasuk pembahasan dari algorithma path finding, namun diperlukan untuk membantu agar aplikasinya bisa berjalan.

Perubahan kedua adalah penambahan konfigurasi pada algorithma yang kita pakai. Dengan adanya konfigurasi ini kita tidak perlu membuat algorithma terpisah untuk masing-masing perilaku. 

Perubahan pada file PathFinder.js

function cellBuat(parent, x, y, tx, ty) {

    let cell = {

        x: x,

        y: y,

        buka: 1,

        jarak: -1,

        induk: parent,

        g: parent ? parent.g + 1 : 0

    };

    if (PF_CEPAT == pfConfig.mode) {

        cell.jarak = Math.abs(tx - x) + Math.abs(ty - y);

    }

    else if (PF_A_STAR == pfConfig.mode) {

        cell.jarak += (cell.g * 1.1);

    }

    return cell;

}

Fungsi cellBuat memiliki sedikit perubahan untuk menghitung jarak.

Pada fungsi sebelumnya jarak kita hitung dengan menghitung jarak horizontal dan vertikal. Sekarang jarak ditentukan tergantung dari modenya. Bila mode-nya adalah PF_CEPAT maka penghitungannya sama dengan sebelumnya, bila tidak maka penghitungannya ditambah dengan menambahkan faktor g.