add dark mode 🌜🌜🌜🌜🌜
fix some problem with html policy
also, a lot of initialization was done outside of init(). when i tried to move it inside, the whole thing blew up because other functions were directly accessing those variables
i have been trying to fix that
i fixed the home page
it should be able to be used now
done [1], [2]
roadmap [3]
i think i should add some screenshot and introduction
problems keep popping out
<a href="
javascript:(function()
{
const s=document.createElement('script');
s.src='http://127.0.0.1:5500/script/notepad.js';
document.body.appendChild(s);
})();
">here</a>
i need to change this, because i am going to develope this website into a github page
the CSS i add by using appendChild(“”) is ruining the original webpage
im gonna solve this by using shadow DOM
bad bg and font color under darkmode
done [2]
roadmap [1], [3]
11 days left
i decided to add more bookmarklets, making this project a collection of bookmarklet
roadmap
this is my first time make a bookmarklet
i originally create this for Hacklet, a ysws about bookmarklets, but i prefer a 3d printing credit rather than a domain…
what i made
I expanded TickTock from a single timer into a multi-tool station (Hub)! This time, I built a Timer and a Stopwatch. It was a huge challenge for me to handle standard browser behaviors, especially turning a single-page SPA into a structured Astro website with a homepage and sub-pages. It took lots of testing, but I feel so proud when everything finally aligned perfectly.
⭐means new features of the previous ship
alarm.wav and notif.wav) from the static /public/sounds/ directory into the source-managed asset pipeline at src/assets/sounds/."/public/sounds/...") with explicit ES module imports (import alarmSoundUrl from '../assets/sounds/alarm.wav' and import notifSoundUrl from '../assets/sounds/notif.wav') across timer.js and pomodoro.js.
formatLapsOutput: a dedicated text formatter that converts active stopwatch data into structured tab-separated values (TSV) suitable for copying.async wrapper using navigator.clipboard.writeText() with built-in error handling (try/catch) and user alerts for unsupported environments or clipboard permission rejections.copyBtn click events to trigger text copying and dynamically update the button icon (check or error) and theme accent color.
querySelector in updateListedStopwatch from target class .listed-stopwatch-demo to parent wrapper .listed-stopwatch[data-id="..."], resolving element lookup failures during live updates.index.astro and BaseLayout.astro.
pauseDuration calculation Date.now() - pauseStartTime during resume actions status === "paused". Shifted all existing lap timestamps lap.endTime += pauseDuration forward to subtract paused time intervals.handleLap, renderListedStopwatch, updateListedStopwatch, and updateCardUI using ternary state checks:
const now = stopwatch.status === "running" ? Date.now() : stopwatch.pauseStartTime;
-Replaced laps.forEach with for (let j = 0; j <= i; j++) to ensure cumulative total times (totalMS) strictly correspond to the current lap index.
formatTime() rendering logic by applying inline styles width, transform: scaleX(0.8), text-align: center to dynamic span elements, preventing font-width shifting during rapid ticker updates.updateListedStopwatch() into the global interval loop, enabling sidebar preview labels to tick synchronously with active main cards.laps?.[0]?.startTime across rendering pipelines to prevent runtime exceptions when initializing empty stopwatches.
stopwatch schema tracking dynamic state (idle | running | paused) and an array of individual lap records (laps).Date.now() - lap.startTime), eliminating redundant accumulator fields like startTime or elapsedTime.handleStart, handlePause, handleReset, handleLap, and handleDelete.updateCardUI and updateCardBtns to reflect running, paused, and idle UI visual feedback dynamically.updateCardLapGrid using index-based duration summation for lap and total times.startGlobalTick() timer intervals and list reordering via handleMoveStopwatch().
devlog #6
in track-06 i used the A Dorian
A-B-C-D-E-F#-G
it is not as dark as the previous track
mi opinias, ke gxi ne estas bona, sed gxi estas pli bona ol trako-03
i added some sleep to the main melody, so a part of the music would sound like something different
index.astro)..stopwatch-adding-action-btn and .stopwatch-list-container for dynamic item injection.#listed-stopwatch-template and #stopwatch-card-template)..stopwatch-text and .stopwatch-text-sub..stopwatch-card-action-btn) supporting Start, Pause, Replay, and Lap actions..stopwatch-lap-container) to organize lap metrics (i, lap, total).
tool-card layout with hourglass Material symbol).BaseLayout.astro.feature/timer-main into main, bringing in the new /timer page route, timer.js logic, sound assets (alarm.wav), and updated layout components.YEAYYY
devlog #5
track-05 is a copy of track-04
04 is brighter; 05 is darker
i used
Am-Bdim-C-Dm-Em-F-G-Am (A minor)just after turning F# C# G# to F C G, it created a obviously dark, gloomy and somber feeling
now i understand why Barkla chose the letter k to start with
thanking my past self for doing that a few days ago…
.sort-action control group with .sort-up and .sort-down arrow buttons to the template layout.handleMoveTimer(id, direction) to handle array element swapping with upper and lower boundary bounds checks.renderListedTimer() to execute reordering operations, trigger LocalStorage updates, and instantly re-render the UI layout via renderAll().
.timer-text-sub element inside the ring container to preserve and display the initial totalSeconds value.var(--text-muted)..is-running state toggle based on timer.status === "running".@keyframes timer-text-flash pulsing animation to provide continuous visual feedback while countdown is active.
