KITools

Ha, so that was quick actually :) I’ll devlog anyway
So I add inputs for title color and subtitle color customization so now there’s an added range input for adjusting subtitle font size!
Of course I also updated the banner.js to handle new inputs apply your text colors and subtitle size to the css.
Should I make the labels and color/range selections be in the horizontal direction? Or is it good as it is right now (vertical)?

So, since yesterday I did a QR code geenrator, I got inspired to make a Github banner generator too! So that’s the tool I made today. Yeah, right now I chose not to focus on styling the QR code generator and instead make another tool… that’s because I plan to style that page later… yu need to act when you get the motivation/ ideas, right?
So like I said I added a GitHub (to be specific) Banner Generator tool with live preview and UI updates like bg color and text size. As well as title and subtitle inputs.
Another little thing I chnaged tho is I decided to introduce new “Design” category in navigation tab and include Banner Generator link and QR Code Generator link there. I just thnk it looks much cooler having more categories for tools… PLUS banner generator and qr code geenrators are both GENERATORS so hey, that works, they get their own special category!
Anyway, I’m still working on the banner stuff as I plan to add an option to customize text color as well as change the size of subtitle. And then an option to download the banner. AND onl after that I’ll maybe try to add some cool features like dragging text around, but I’ll have to look that up …

That’s it for now!

Okay! I added support for multiple QR code types now, which includes WiFi, phone, and URL plus the text.
For the wifi I added WiFi input fields (SSID, password, encryption) with conditional display and updated JS to generate QR codes accordingly! Btw, I made it so that the qr code generates anyway even if you only enter a wifi name (no password), but I don’t think that’s a problem… it might actually be good b/c I was initially going for that “live updating” look anyway. But you guys let me know if I should change it in any way!
Also made some small adjustments to CSS for QR code container and labels.

We’re almost halfway through March.. if there’s any ideas for tools anyone would like to see added here, don’t be shy to about writing your opinion here, ok?

Hey all! Today I further improved the customizability of the QR code by adding option to choose the foreground and the background colors. Although as I was testing it I realized that if both colors match the QR code won’t really be useful… so i made it so you can’t do that (do them both of the same color I mean) >:)
Also moved the download button below the QR code for aesthetic purposes.
Next step? Gonna be working on adding QR types (URL / Phone / WiFi / Text) so that yu don’t hav eto manually chnage the beginning part fo the link!

Hey all, so today I worked on a new tool for the Utility section. It’s a QR code maker! The goal was to make a QR code generator where users can create, customize and download QR codes. And right now it’s got all the basic features of you, the user, being able to enter website link, text, phone number, WiFi info, etc.
Then you click Generate and it will display the QR code instantly. I used the QRCodejs library btw!
Right now you see the input box on the left part of the screen, and the download button underneath it. Oh yeah, and there’s aso an option to download the QR code as a png. Anyway, to the right I added a widget where the qr code will display when you type something into the input box.
I’m gonna work on adding the color selection options now, so it’ll be like choosing background or the qr code line color or something else maybe!
I’m looking for inspo on other sites too, so if anyone’s got feedback or ideas please lmk, I appreciate all input :)

Hey, yesterdsay I didn’t devlog but I essentially added a blinking animation to the dog sprite in the main page. Now she’s blinks randomly every 3.5-7 seconds or so. Today I added a HTML preview tool with live iframe preview. I wanted to make a mock-code-editor but simpler. Right now it doesn’t catch errors tho, so if you write Hi it still outputs it even if there’s no backslash. I might fix that or just move on for now.
But yeah, I think most of the time went into learning what’s more popular in modern sites for doing basically the same thing (like CodePen).
I was rewriting the same code again and again, experimenting with style and output result. Perhaps next I’ll try to make the preview update live while you type!
It’s also probably the quickest tool I’ve done so far lol.

Today I updated timer tool’s progress circle to adjust to the changing dark/light modes, as well as the display text. A big improvement was that I added an actual alarm sound instead of a alarm in the browser; i tried to choose a calm sound :). That led to me refining the screen to be flashing and the display time changing to text.
I did the same thing wiht the alarm for Pomodoro btw!
Anyway, I also worked on the pet~
Now her dialogue system’s with typewriter effect and multiple messages. And she now greets you differently based on if it’s a first or return visit! I also added click handling on textbox like in real RPGs to advance/skip dialogues.
And that’s it, the rest are minor css tweaks but I won’t list all the neat picky stuff lol

Small update but hella cute (in my opinion)! I added a dog “guide” character with animated dialogue to the main page so it doesn’t look as bland! She’s in the bottom-right corner and has a typing animation and talking sprite toggle. I did it with 2 png’s that change quickly to make a talking effect. The sprite is also my original work, so I’m not using someone else’s sprites!
Well and of course I adjusted the dark mode to fit it as well. Honestly, the longest time was figuring out how to do the animation and find the best placement for the textbox and Queenie.
I hope to make the textbox actually look like a textbubble like you see in RPGs!
And hopefully make her an intercative pet :)

Today I finally started on the pomodoro tool. Honestly, idk why I’ve been procrastinating on it. After reading about the logic I realized I overcomplicated it in my head lol. So basically today I implement ed a BASIC Pomodoro timer UI + functionality. It’s got the the tsrat, pause, reset buttons and 2 modes to choose from. It’s the classic 25/5 split right now. Later I wanna make it customizable.
Also I plan on doing the circle timer effect I did on the “timer” tool, should I do that? Or would they be too similar? I can make the line be thinner and more “aesthetic” if you know what i mean.
Also right now its got an alert message at the end of the timer, but I’m thinking of adding another type of visual for that….
;)) I’m already thinking of something fun that’s gonna be added later… a lil pet perhaps… wait and see lol

I did another quick round of improving deck card layout and button styling. Basically, I moved the “Study” and “X” buttons to be below the deck title, and I switched the circular format of the dleete button to be rectangular like the rest of the buttons. And since it’s got color, I chose to make the study button green/ olive.
I also touched up a lil on the coin background. So yeah, the flashcrads are pretty much good to go i think. I’ll either start on the pomodoro or do another quick tool for the “text section.

BRUHHH I just exited out of my devlog ;-; Gotta rewrite it again so I’ll be brief
I refined the CSS for dark mode today, mainly to make the text for user-friendly with actual readability. Also I worked on adding functionality to my flashcards tool.
Sepcifically, I created. astudy mode option where you will see your cards dsplay one by one. You can press “exit” to exit the study mode and regular deck view will be back up. Next I also added logic to the search bars so that you can search for decks/cards and they will display in the corresponding grid. It searches for the closest match and hides the other decks/cards.
Right now tho i didn’t yet touch on stylying the study button properly, whoch is why it looks pretty squished imo to the text. I’ll work on fixing that.

Not much time to code this weekend and following week tho b/c there’s SAT coming up… good luck to any of y’all planning on taking it!

Finally got around to try implementing a dark mode feature! Although I just picked out the colors and wrote the switching logic… it looks pretty rough to be honest in some pages. But overall. so far, it looks good I think. If anyone has feedback for it or suggestions, please share, I’m always happy to hear ways to improve my work :)
Ahem, it more details, I added a PERSISTANT theme toggle for dark mode. So I had to go back and refactor some existing colors in CSS to use custom properties. I replaced many standard # colors with vars in :root. And started on updating my pages accordingly. I don’t like how the flashcards look still, but again that’s what I’m gonna focus on for now.

I did a quick session today, polishing the timer setup screen. Since, yesterday, the button inputs were vertical and gray, I adjusted that. Also I replaced the hor/minute/second fields with custom arrow controls that can change the time by 1’s. Sadly, the user can’t manually type in the time yet, BUT that’s what I plan to fix tomorrow (if have time… no pun intended).

Uhh whoops I should’ve devlogged earlier, I had this moment of “ok i got the basic logic written” but when I went in to try and make it more functional I got hit with bugs…many bugs. Got it resolved tho!
Anyway yeah, today I decided to add a new (kinda basic )tool, a countdown timer. I saw someone use svg to make an animated circle timer so I decided to remake that! Basically you can select the timer duration in the first screen, then you hit “continue” and get faced with a full circlewith numbers inside of it. When you click start the timer start counting down, and the circle moves too. I barely got it the logic working today so i decided not to risk making the first screen “fancy” today.
So please don’t mind the boring first screen time-inputs! I’ll make them prettier :)

Didn’t have much time ot code today. I still wanna code at least an hour daily tho.
Anyway, I added versioned localStorage persistence with load/save handling, fixed some important typos, made it so edited cards stay reflect in stated-earlier-storage, AND added an animated divider! Also centered the delete/edit buttons for cards, but yeah that’s it for today

Made the site cuter :D So far I made the UI more pastel and added CSS custom properties by adding :root for common color palette, then applied it throughout the site like on the sidebar (w/ hover accents and borders) and learned to add a radial background (in the main view). Rounded more buttons’ corners, cleanened shadows, smoothd transitions, etc.
Oh yeah and also went back to the coin. The coin now got gradient faces w/ inset borders, a cubic-bezier spin, better transition handling instead of timeout(). I also did a little bounce effect on landing. Plus for flashcards I changed the card and deck widgets w/ gradients, hover lifts, restyled the delete button,
BASICALLY applied the new css everywhere, but looks cute does it not?

Bugs fixed! I added nice slide animations for next/previous navigation buttons so cards now move left and right smoothly instead of just snapping. I created an animateCardChange() helper to handle transitions cleanly and wired up click-to-flip so the whole card flips instead of just the text. I also added full editing support using an editingIndex state, refactored the save logic so it handles both new and existing cards, and made sure cancel properly resets edit mode. Cleaned up event listeners to consistently use the cardList container (instead of mixing with cardGrid), fixed rendering issues, and did some small CSS/HTML cleanup. There’s some stylistic changes I plan to play around with still, like button position and more interesting color palatte

I know I said I was gonna work on the save buttons, but change of mind. So I refactored the flashcards interface. I tried to improve both usability and structure by replacing the old list-based card view with a responsive grid layout built around reusable card widgets. Each card includes inline edit and delete actions. But I must’ve accidentally deleted or changed the buttons somehwere because neither the flip, next, or previous buttons work :( Tomorrow I’ll have to debug that
I also improved event delegation to properly handle grid-based interactions and ensured active card state remains consistent after edits or deletions. On the performance side, I optimized the flashcard flip animation by adding a will-change hint for smoother transforms. So hopefuly this makes UI cleaner, more scalable, and significantly more UX friendly.

Did some redesigning of the flashcards layout to separate deck and card views, replacing the old sidebar list with a responsive grid of deck widgets. I implemented a modal-based deck creation flow instead of using prompt, added deck deletion support, and introduced an empty state message when no decks exist. The deck widgets now include hover effects and a styled delete button, with updated CSS for the new grid layout and UI polish. On the JS side, I refactored rendering logic to support view switching, added back navigation from card view to deck view, simplified the card list to show only front text, and ensured the app initializes cleanly with renderDecks() on load.
Only issue is the save card button doesn’t work right now…WHICH IS THE MAIN PURPOSE OF FLASH CARDS! :( I’ll work on debugging that. This day’s focus was getting the deck to style the way I want it to. Lemme know guys if you have nay feedback or ideas for more tools!

Hiya, this time I replaced the prompt-based card creation with a proper modal form thats got question and answer inputs, and with a save and cancel actions. I added the necessary modal styles and a reusable .hidden utility class in CSS. Also refactored the card list to use event delegation with data-index attributes instead of attaching individual click listeners, and made sure the active card state updates correctly when navigating with the next and previous buttons. I also removed the CSS counter-based numbering from the card list, cleaned up the related rendering logic, and added the lang=“en” attribute to the flashcards HTML document.

Okay, so, I finally finished debugging the whole bugs out the flashcards feature. BUT rigght now I managed to make it so you write the question and answer in an alert that pops up, I wanna change it tho. I want it to be functioning in the small “add card” section at the bottom so that what i’ll probably do next. There’s now a dedicated flashcards deck and card management, navigation between cards, and a list view so you can see everything in your deck. I also updated the sidebar to include flashcards (forgot first time WHOOPS) and cleaned up some letter consistency across pages (titles and headings now have same capitalization). Also CSS changes for better layout and interaction styling like rounded corners, shadows, and improved spacing, and changes to flashcard flip and list states so interaction is smoother. Also likely I’ll keep refining the UI and logic so deck management and card viewing are more intuitive.

Im begun working on a flashcards page setup, so I created separate HTML file and JavaScript file for that. I added the css for it too with dark, clean buttons, an area to view your deck with rounded corners and subtle shadows. I also centered the layout. Also styled the card with a 3D flip effect when flipped. I’ll keep working on polishing up both the UI and logic so you can actually interact with the cards

Im back: I refactored the app from dynamic single-page loading to a multi-page setup, so each tool now has its own standalone HTML file instead of being injected into the main view with JavaScript. That let me delete main.js entirely and simplify the navigation to normal links.
I redesigned the UI a bit too: darker, cleaner sidebar with uppercase category labels, softer main background, updated button styles with hover lift + accent color, and improved textarea styling with rounded corners and subtle shadows. I also centered the coin flip layout and doubled the coin size to make it feel more impactful.
Each tool page now includes the full layout (sidebar + main view) so navigation is consistent across pages, and I added proper active states in the sidebar instead of relying on JS.

Omg finally…. I struggled to get the logic working buuuuut I added a new Coin Flip tool with its own HTML, CSS, and JavaScript, a 3D flipping coin, a flip button, and a result display. I wired it into the sidebar so it loads dynamically like the other tools, updated the main CSS for coin styling and animations, cleaned up some button and text formatting, and removed the old unused whitespace CSS file. I thought it’d be easier lol

I wired up dynamic tool loading from the sidebar into the main view, added the first actual tool (a whitespace remover) with its own HTML and JavaScript, and updated the CSS to support textareas, buttons, and an active state for the selected tool, along with some minor formatting cleanup and giving the main view an ID so it can be targeted by JavaScript.

I set up the initial HTML structure with a sidebar and main content area, added a main CSS file for global resets and layout styling, and moved the JavaScript into a js folder, and removed the old unused stylesheet.