ensure im ready to ship

i was trying to make a color picker
but soon i found out that i had no time

i completed readme.md & homepage

ready for ship (?

rewrite homepage

i found out that

MATHEMATICAL DOUBLE-STRUCK
U+1D543: 𝕃
U+1D544: 𝕄
U+1D545: Unassigned
U+1D546: 𝕆
U+1D547: Unassigned

Letterlike Symbols
U+2115: ℕ
U+2116: №
U+2117: ℗
U+2118: ℘
U+2119: ℙ
U+211A: ℚ

so even if i use the same font-family, ℕ might looks a bit different from others

therefore i gotta use

{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

i dont even know whether it works or not

!!! snapshot

you can resize it and press the shot btn to screenshot
then the img will be put in the place where you take the screenshot

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

1. i used to be using a

<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

1. the CSS i add by using appendChild(“”) is ruining the original webpage
   im gonna solve this by using shadow DOM

2. bad bg and font color under darkmode

done [2]

roadmap [1], [3]

11 days left

1. add delete btn: delete all notes
2. remove drag btn
3. add a title where user can hold to drag
4. add x y width height to local storage
5. put css into the bookmarklet

i decided to add more bookmarklets, making this project a collection of bookmarklet

roadmap

• notepad (mostly done)
• screenshot taker
• svg sketch
  …

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

1. a demo website
2. a note container:

• nav:
  • drag btn
  • opacity btn
  • close btn
• note box
  • box
  • satisfying scroller bar

1. automatically save to local storage

Devlog 52: GitHub Pages Audio Path Resolution Fixes

Absolute Repository Subpath Hardcoding

• Replaced environment variable dynamic paths (import.meta.env.BASE_URL) with direct base-path URLs ('/TickTock/sounds/alarm.wav') in playAlarm().

i have no idea why that happened

Devlog 51: Asset Migration

Asset Directory Migration

• Moved audio assets (alarm.wav and notif.wav) from the static /public/sounds/ directory into the source-managed asset pipeline at src/assets/sounds/.

Module Import & Bundler Integration

• Replaced hardcoded absolute URL paths ("/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.

Devlog 50 Layout Refactoring

Scroll Restructuring

• Shifted .stopwatch-container layout from vertical wrapping (flex-wrap: wrap) to a single-row horizontal scroll track (flex-wrap: nowrap with overflow-x: auto).

Devlog 49: Lap Data Export

Plaintext Lap Data Serialization

• formatLapsOutput: a dedicated text formatter that converts active stopwatch data into structured tab-separated values (TSV) suitable for copying.

Async Clipboard Copy Logic

• Implemented an async wrapper using navigator.clipboard.writeText() with built-in error handling (try/catch) and user alerts for unsupported environments or clipboard permission rejections.

Interactive Copy Feedback UI

• Wired copyBtn click events to trigger text copying and dynamically update the button icon (check or error) and theme accent color.

Devlog 48: DOM Selector Bugfixes & Homepage Quick Access

DOM Query Selector & Reference Repairs

• Updated querySelector in updateListedStopwatch from target class .listed-stopwatch-demo to parent wrapper .listed-stopwatch[data-id="..."], resolving element lookup failures during live updates.

Homepage

• Integrated direct links and dedicated preview cards for the Stopwatch application into index.astro and BaseLayout.astro.

Devlog 47: Pause Compensation

Pause Duration Offset

• Implemented pauseDuration calculation Date.now() - pauseStartTime during resume actions status === "paused". Shifted all existing lap timestamps lap.endTime += pauseDuration forward to subtract paused time intervals.

State-Aware Timestamp Resolution

• Standardized timestamp evaluation across renderers handleLap, renderListedStopwatch, updateListedStopwatch, and updateCardUI using ternary state checks:

  const now = stopwatch.status === "running" ? Date.now() : stopwatch.pauseStartTime;
  
  

Devlog 46: UI Fine-tuning & Timing Logic Optimization

Lap Calculations

-Replaced laps.forEach with for (let j = 0; j <= i; j++) to ensure cumulative total times (totalMS) strictly correspond to the current lap index.

Layout

• Enhanced 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.

Dynamic Rendering

• Integrated updateListedStopwatch() into the global interval loop, enabling sidebar preview labels to tick synchronously with active main cards.
• Optimized state updates to target individual time elements instead of triggering full list re-renders on every ticker frame.
• Added optional chaining laps?.[0]?.startTime across rendering pipelines to prevent runtime exceptions when initializing empty stopwatches.

Devlog 45: Initial Stopwatch Logic & Dynamic State Scaffolding

Core State & Lap Data Architecture

• Designed a stopwatch schema tracking dynamic state (idle | running | paused) and an array of individual lap records (laps).
• Streamlined time calculation to compute elapsed milliseconds dynamically directly using timestamps (Date.now() - lap.startTime), eliminating redundant accumulator fields like startTime or elapsedTime.

Interactive Handlers & Lifecycle Operations

• Implemented core lifecycle handlers: handleStart, handlePause, handleReset, handleLap, and handleDelete.
• Integrated updateCardUI and updateCardBtns to reflect running, paused, and idle UI visual feedback dynamically.
• Built active DOM updates for lap histories inside updateCardLapGrid using index-based duration summation for lap and total times.
• Enabled global runtime updates via 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