Felix

Okay I figured out how to convert a JS Date object into a valid value string for an input element now and started to work on giving the user the ability to modify their attempts. It technically works but I find it really unintuitive and confusing, it also doesn’t seem like it’s possible to set a maximum and minimum time. I’ll discard the changes. But I do use the function to convert that Date object in one of my modals so it was worth it! I don’t think there’s much else to add so I’ll probably do some final touches and ship the project soon.

Updated the alien theme, most noticeably the font. Made some other tiny changes too, like actually using the font variables. Next, I want to make it so you’re able to modify your attempts. Last time I tried to do this I failed because I couldn’t figure out how to set the default value with the data of a Date object. Is definitely possible, might ask people for help though because I’m feeling kinda lazy right now. I’ll need to figure that out anyways because there is no indication that there’s a date/time input element when using iOS w/ Safari as there is no default value set.

Cleaned up some code (button are actually wrapped HTML button elements now…) and fixed small bugs. I spent most of the time trying to make it possible to edit the single attempts later on. I had an idea but ended up failing to set the default value & min/max value of a datetime-local input element using a JS Date object. I’ll try to figure that out in the future but right now I’m trying to implement authentication, it seems a simpler than I imagined, maybe I’m missing something though so ima have to see how it goes… I hope this works! Will share more details about that in the next devlog ofc, I only practiced auth outside of this project so it didn’t even count the time lol.

Cooked a banner in Figma, pretty happy with how it turned out. I used this really cool QR-Code generator called Mini QR (https://github.com/lyqht/mini-qr) which allowed me to create this cute QR-Code!
Not too sure about the URL, it might change later, haven’t deployed it anywhere yet.

Pretty happy how the Modal turned out. Just need to add an exit button for mobile users/small screens but that should be done pretty easily. I really like this backdrop blur filter when the modal is open, never thought about that before seeing that Flavortown does it like that.
I also made a reusable Checkbox component which fits way better than anything I could do by customizing HTML’s checkbox element using CSS.

Worked on the Dashboard’s styling and added a proper button to add new entries now, it opens a modal which allows you to enter basic information. I want to add the option to enter previous attempts in the future.
Trying to implement a modal in Typescript was a little different compared to how I used to do it in Javascript so I struggled with that a bit.

You can actually view your progress now! If you want to understand the logic behind it you can check out the source code of the Entry component in the Repository. It basically subtracts the current time with the creation date of the entry and works with that to tell you how much time has passed.

Tried out a few designs and am pretty happy with this one. Quite simple, I don’t know how I’m at three hours already lmao (lemme be slow :p). Went for a mobile-first design because everyone says you should, so why not give it a shot ig.
The design is inspired by the Sobriety App and I obviously copied those progress bars from the “I am Sober” app.

Happy New Year!!!

Added a maximum of colors you can select based on the amount of lines the Shonk has.
And I fixed the font rendering finally!! Turns out it only worked on my Desktop and not on my mobile devices because I actually had the font installed on my pc and it didn’t get overridden because I made a typo in the FontFace (T_T)
Also fixed some other bugs, you can check out the commit history on GitHub if you’re interested!

Oh, and I’m using VSCodium instead of VSC now :3

I added credits for the ASCII-Art and worked with React Router for the first time! Was actually way easier than I imagined it to be. Also changed the default font because the old one was hardly readable. Not too sure if I’ll stick with that one though. There’s also a link to the repository in the footer now!

Oh and the year is almost over, or maybe it is already for you. Hope you’re havin’ a great start into 2026!!

Trying to make the site mobile responsive is pain… It’s better than before but the text in the HTML canvas is somehow thinner on mobile than on Desktop?? I’m guessing that it has something to do with the pixel density but I don’t know how to fix it (if you have any idea then please tell me 😭😭)
In addition to the site being a bit more responsive, I also added preset color combinations, I’ll probably add a few more in the future! Apart from that I tweaked some small stuff.
Overall I feel like I’m pretty darn slow. The seemingly simple project is about to hit 24 hours of logged time…
I’m almost there though, I’ll just make some minor QOL changes, add different Shonk variants (and maybe an option to insert your own) and… cry while trying to make the site mobile compatible and make the color distribution more even when… it can’t properly distribute them evenly (T_T)

You can download your Shonk now!!
I achieved this by transforming the preview from simple elements into a HTML canvas which I can easily transform into an image you can download. This took a while but it finally works! I’ll also try to add the option to either download it with a transparent background or the with the background my site uses (or a custom one, idk yet).

You can now remove colors either with middle or right click!! Also changed some stuff regarding how I store the selected colors but that took a lil while cuz I don’t have that many braincells :P

This took wayyyy to loong but the basic functionality is done now. Just gotta let the user add any amount of colors themselves, add more Shonk variants, make preset color combinations (forgot about that in the Figma design) and make the customized Shonk downloadable!
Oh, and I actually have to implement the design I made in Figma, but that shouldn’t be too hard!