Weekend project sorted! I'll need a grid with a minimum of 6 columns, Dexie.js to do IndexedDB stuff (never done it before, I hear Dexie makes it painless?), and possibly GSAP for a bit of whimsy.

I want to build my own weekly planner πŸ₯Ί

I reached for Codepen to quickly throw something together - this is a great editor πŸ’œ Ready to hit the ground with some JS tomorrow.

I might not add GSAP _just_ yet, as I found out about the HTML Drag and Drop API, so want to learn that quick: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

@hejchristian Another cool thing about Dexie, they have a cloud offering to easily sync stuff if you need it down the line. 😊

Have fun building!

@amxmln Nice! Yeah looked into that a bit and sounds promising if I ever want to try and get data to persist across devices πŸ€”

I'm looking forward to try it :)

@amxmln I ended up trying idb first πŸ˜… but dexie is still on the cards! But for now will focus on adding some other features in :) I'm sure it'll be easy enough to switch between the two now I have IndexedDB working to some degree.
@hejchristian No worries, whatever works! 😊 Surely it’s not too hard, they’re wrappers for the same base after all. πŸ˜…

Maybe this will be turn out to be day project instead of the whole weekend (at least for my desired MVP), the HTML Drag and Drop API is working great so far πŸ₯³

After lunch, time to play around with Dexie.js

Now with some local data persistence πŸ₯³ Using IndexedDB via idb: https://github.com/jakearchibald/idb which was recommended to me as an alternative to Dexie, which I decided to try first.

The JS behind it could probably do with some optimising, but I think I can take a break for now and add some more fun stuff for a bit.

Now with actual dates! The week number, month, year, and days of the week are set by using the new Temporal object.

and an extra list that uses the systems native colour picker, to assign a colour to every item within 🎨 The plan is to allow adding any number of additional lists as required.

@hejchristian oh this will help with something I’ve been playing with as well thanks for the share!
@midknight Nice, Good luck with it! I’ve not tested it yet with a full browser close or shutdown of the machine. but hopefully it’ll still be there when I do πŸ˜…
@hejchristian that's awesome! I also started a weekend project to build a toggl plan style project manager and went with sqlite (dbs aren't my forte), how is indexeddb?

@alansuspect Cool! that looks like a fun project :)

Databases aren't my forte either but IndexedDB seemed simple enough to get going with, having a named object store and get/set like functionality.

I'm not entirely sure what I'm doing, but it works so far πŸ˜…

@hejchristian Oooh, I have a use for that! Where was that 15 years ago when I needed it?

Point me at the docs?

@ericphelps Here you are ☺️

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

The kanban example covers dragging elements within a page well :)

HTML Drag and Drop API - Web APIs | MDN

HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers.

MDN Web Docs