KITools

Hey guys, added a couple of things today. First, I finally added a README, which I probably should’ve h done a while ago lol. And also, I updated the banner generator tool. I realized that having only one color background was pretty boring and limiting, so I decided to let the user have some more freedom by enabling YOU to upload a custom background! Yup, now there’s an option to upload your own image to serve as the background for your epic bannersss.
You can adjust the size and placements via the controls I added, which are the x-axis, y-axis transforms, and a zoom to scale the image. They’re sliders that appear ONLY IF you have added a file.
Oh and obviously I had to update the reset banner button to remove it :b
Also now there’s a remove image button to get rid of it altogether. It also hides/shows depending on if you have uploaded anything or not.
That’s it! Pretty much I think the site’s looking pretty finished!

In these past days Ive learned about adding tables to html. So, i decided to make a todo list tool!
I added full function UI for it where you can input the task descirpiton, date, and time. This is basically for the due date column and time columns. Besides that there’s an add button that pushes your info into the list table.
The table’s divided into rows and columns, and you can see border outlines like in spreadsheets. It will show your task, the date, and time in corresponding columns and rows.Also I added a delete button that you can use to…delete the task obviously.
BUT if you get motivated by seeing your tasks CROSSED OUT, i added an option for that too with a checkbox to the left. You can check it to get the “crossed-out” effect on text and it also turns opacity down a bit. I decided to center it all in a widget so it doesn’t look awkward when the to do list is on the left and there’s a bunch of empty space on the right..

And finally I added some styles to handle dark mode as well so that the UI is readable and easy to navigate!
Then I integrated the link to it in all other tool pages!
Plus I extend Queenie’s dialogue system with Todo List-specific messages, so make sure to check them out too~
That’s all, have fun and good luck getting your tasks done!

So today I returned to improve Queenie’s toggle system as promised! I added a new state to her with opacity/transform transitions for smoother show/hide animations. Plus she’s got a bounce now too, whenever she shows up that is. I spent a LONG time debugging though, struggling to get the animations to show up. You know why? Because I forgot about a hide class already in css that was overwriting all my queenie-specific code… i feel dumb. But I’m glad it’s resolved now… at least it made me add some extra lines of protection against program crashes, along the way :b
O and while at it I had to tweak some Queenie toggle logic to use class-based visibility instead of direct style manipulation, and updated button text dynamically (Hide/Show Queenie) b/c it was glitching after I made some change sto the css.
And while at THAt I added some space between the dark mode button and the toggle queenie button. To make it easier for future use I just grouped them into the same container of settings-btns. now the stretch full length of the sidebar also!
That’s it byee

Long time no coding..! I came back to work on improving Queenie now that the tests are over. So in short what I did was add toggle visibility system w/ persistence and dialogue flow updates, but here’s in more detail for anyone curious:
I added a “Hide Queenie” toggle button on all the pages so that now you can actually make her GO AWAY if you don’t ant her there.. :) but you can also bring her back upon clicking the button again. For this part i also used localStorage-based visibility state. I still wanna improve on it though, its not final version. I want to make the animation nicer but i’ll likely do this tomrrow.
Next uh yeah I added a modified dialogue system where i control progression behavior based on if it only allows one dialogue or several dialogues per page load. Basically i added fucntions for repeat visits (non-progressive random dialogue) and some prevention from clicks from advancing dialogue when in single-dialogue mode. I alos made it so the program auto-hides her textbox after delay when text finishes typing, so the textbox doesnt linger there forever.
Oh and the dialogues are randomized in a way that u don’t get the same one twice :) Hope yall enjoy! more updates soon…

I did something reeeally fun today… worked on making oe of my own office-format desktop pets! Well, right now it’s a bit of a stretch to call this a “web-pet”, but now the dog follows you from tool to tool!! Hopefully it’s not an annoying change lol..
In some more details:
I moved Queenie HTML creation from static index.html into JS (createQueenie function) and essentially initialized Queenie on DOMContentLoaded for all tool pages. Also hence why she’s not really “moving” but instead appears on teh same spot. But I’ll fix that later.
I used a path-aware asset loading for tools subdirectory to like get that modular setup functions ( like dialogueSetup and clickSetup)
AND added contextual dialogues based on what current tool youre on. While at it i altered mytyping/talking logic.

And i finally fixed a css bug!
I realized why my links on the sidebar had a wonky jumping effect… i forgot to add padding to anything with a class “active”. Now all the links have equal, balanced spacing between them. Beauty!
Well, lemme know what you think about the Queenie update, I’m for sure gonna work on enhancing it more! :)

Added a new tool to KITools today, a JSON formatter and validator!
Ik this one’s pretty straightforward but actually super useful b/c you can now paste in any JSON and either format it nicely (with proper indentation) or validate it to check for any errors. I used try/catch for that. Basically if it’s valid, it gives a clean success message, and if not, it shows the error so you know what went wrong.
And ofc I styled it properly :)
Hopefully now someone can find use of it and make debugging json less tedious :b
Also added a lil output box to display the formatted JSON or errors.
AND updated all the relevant pages and fixed the HTML Preview link path on the homepage since it was pointing to the wrong place before loll, surpirsed it still worked.
Anwyay, might expand it later with things like minifying JSON or maybe even file upload support… we’ll see :)

Two changes made to my generators! So I added a reset button to the banner geenrator and also improved the UI and layout for my qr code generator. To be more specific, I improved QR code and banner tool UI and layout changing the the banner-info-group and banner-info-row classes to be more global, by changing it to tool-info group/row so that QR code tool can share that oragnized layout too! Plus I updated the wifi info selection so that now it collapses into view via show transition. I know it’s not the smoothest thing, but to me it looks neat enough. If there’s a more efficient/better wya to do a showing effect plz let me know lol…
And now for the button, uh, it’s straight forward. I added a reset button plus the functionlity to make it work. Now when u click it on the banner it will reset all: the titles, colors, and positions.
I’m thinking about adding a local storage for the banner too, but idk if that’s really necessary… so i might add it when i run out of other ideas :)

Ha! Didn’t notice you could move the title and subtitle outside the banner area… I fixed that. Now the texts are bound to the max width and height of the banner.
Also I refactored the UI :) I deicded to reorganize inputs into grouped sections for text, colors, and sizes and added what you call a grid based layout for the control panel. Did that by adding banner-info-group and row styling. Now it should be more orgnized and clean (or so I hope)

Holy, I legit spent around an hour trying to figure out why my thing’s not working.. anyway, so I tried to make the banner title and subtitle draggable, so it’s not just closed in place in center, right? I used .getBoundingClientRect() to get the size of banner title and its position and then adjust it’s position based on your mouse movement. I kept reriting it until I eventually realizes that the css bannner-display class was overriding the new positions…hence why the title didnt seem to move… well and then i moved on to make the subtitle movable too! but turns out so far I’ve been HARDCODING the title to be movable…. so I had to rewrite it all as a function instead that will take it either the title or subtitle as parameter and adjust it accordingly…
Turns out that’s a very efficient way to write code like that, so yipee :D i was smart and got it working!

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.