Devlog 09: Synchronization Bug Fixes and URL Component Decoding

Argument Reference and Logic Rectification

• Corrected a ReferenceError inside the titleInput listener by swapping an un-sanitized token (newDate) with the valid, persistent variable targetString.
• Fixed an assignment error where a single operator (if(newTitle="")) muted intended comparison logic, replacing it with a strict equality check (newTitle === "").

URL Normalization and Component Decoding

• Integrated decodeURIComponent() into loadInitialState() and the hashchange observer to prevent percent-encoded character corruption.
• Resolved text distortion for multibyte layouts (e.g., Chinese characters), ensuring continuous string fidelity across shared links.
• Established a default text fallback (“目標”) to secure interface rendering stability during empty input states.

Devlog 08: Viewport Configuration and Responsive Layout Calibration

Viewport Meta Integration and RWD Layering

• Integrated the standard responsive configuration tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> into the document structure header.
• Resolved a layout compression behavior where mobile rendering engines applied fallback desktop scaling parameters (typically a virtual width of 980px), forcing severe global downscaling on compact displays.
• Enabled native device pixel scale translations, forcing media container thresholds to evaluate against true hardware dimensions rather than high-density viewport projections.

Fluid Grid and Token-Based Scaling

• Fixed an interface clipping issue where structural boundaries failed to dynamically contract on viewport widths below 600px.
• Activated the custom @media (max-width: 600px) breakpoint directives, downscaling internal flex container gaps from 15px to 10px and adjusting modular countdown component nodes for enhanced display symmetry.
• Re-calibrated proportional font metrics across mobile layouts, mapping secondary tracking units down to a structured 1.6rem baseline and bringing the primary title signature to an optimized 2rem boundary.

Cross-Platform Interface Layout Fixes

• Restructured flex-wrap component mechanics within the core visualization container to smoothly adapt from unified desktop rows into multi-line mobile block grids.
• Eliminated persistent scrollbar overheads on handheld viewports by normalizing absolute coordinate assets and applying elastic percentage constraints across core elements.

Devlog 07: URL Hash Routing Priority and Timer Encapsulation Debugging

Feature and Priority Cascading

• Extended the state management architecture to support deep-linking properties using URL fragments (window.location.hash).
• Established a strict target resolution cascading hierarchy where URL fragment inputs take precedence over local user configuration memory, which in turn overrides the default fallback value (URL Hash > LocalStorage > “2027-01-01”).
• Implemented a regex filter pattern (/^\d{4}-\d{2}-\d{2}$/) to sanitize incoming window location string tokens prior to committing them to the execution state.

Refactoring and State Synchronization

• Modularized individual timer logic fragments into a single initialization routine initTimer(). This routine synchronously updates text container parameters, binds default input values, clears residual interval clocks, and re-allocates tracking loops.
• Modified input element state transformation bindings to mirror newly elected target values into the URL fragment row (window.location.hash) concurrently with local system memory blocks.

Resolution of Block Scope Diagnostics

• Scope Overlap Fix: Corrected a critical runtime ReferenceError located inside the initTimer() wrapper where repeating the let primitive on the timerId reference allocated a local block-scope variable that collided with pre-initialization clear routines. Removing the redundant declarative keyword reinstated proper execution.
  -Missing Invocation Fix: Appended an initial entry point declaration initTimer(targetString) to successfully boot up active countdown cycles on fresh page load sequences.

Devlog 06: Sidebar Menu and Persistent LocalStorage Integration

Requirements and Architecture

• Adopted the HTML5 semantic element to create a dedicated, off-screen sidebar panel for user controls, separating configuration options from the main countdown content.
• Integrated Google Material Icons stylesheet to render interactive trigger (“menu”) and dismissal (“close”) action elements.
• Implemented a native calendar interface using to capture target date modifications directly from the client view.

Styling and Motion Mechanics

• Utilized fixed positioning (position: fixed) to pin the sidebar along the right viewport boundary, utilizing full height (100vh) to serve as a slide-out drawer.
• Applied transform: translateX(100%) to fully obscure the panel behind the right viewport edge by default, attaching a smooth CSS transition property (0.3s ease).
• Created a structural “.open” modifier class applied to the sidebar element (sidebar.open) that neutralizes the horizontal translation (translateX(0)) to bring the drawer into view upon click events.

State Persistence via LocalStorage

• Refactored the global variable initialization to prioritize data retrieval from browser memory using localStorage.getItem(“targetDate”), ensuring fallback capability to the hardcoded default date string (“2027-01-01”) if empty.
• Bound a “change” event listener to the date input element. When a user updates the field, the new value is mirrored into localStorage under the unified key “targetDate”.
• Configured runtime updates where changing the input dynamically forces a complete recalculation of the timestamp integer and immediately restarts the global interval timer thread to prevent rendering stale countdown frames.

Critical Bugs and Diagnostics Code Review

• Syntax Error Fix: Corrected an unescaped double-quote attribute typo inside the HTML element declaration where id=”“sidebar was breaking JavaScript’s DOM node selection lookup query.
• Selector Misalignment Fix: Resolved an animation breakdown where the “.open” conditional style rule was incorrectly targeted at the menu button instead of the sidebar wrapper element, preventing the slide-out sequence.
• Namespace Sync Fix: Addressed a string mismatch bug where initialization logic incorrectly requested the corrupted key string “targerDate” while event dispatchers stored mutations under “targetDate”, which consistently caused storage caching to break on reload.

Devlog 05: Integrating Google Fonts Icons

1. Goal

• Implement a hamburger menu button by integrating Google Material Icons into the project.

2. Step 1 Implementation

• Added the Google Material Icons stylesheet link to the .
• Created a <button> containing a <span> with the material-icons class and the text “menu” to render the hamburger icon.
• Styled the button using CSS (background: none, border: none) to remove default browser styling and positioned it at the top-left corner using position: absolute.

Devlog 04: Dynamic Time Box

VisibilityRequirement

Hide time boxes that have a value of 0 to keep the UI clean, but prevent a box from hiding if a larger time unit still holds a value (e.g., if years > 0, months must not be hidden even if months == 0).

Solution

Implemented a cascading flag logic (let hasValue = false) executed from the largest unit (years) down to the smallest (minutes). Once any larger unit turns the flag true, all subsequent boxes remain visible regardless of their own value. Box elements are hidden dynamically using parentElement.style.display = "none".

Devlog #2: Precision Countdown Algorithm Fixes

Problem

The previous countdown relied on dividing total seconds, which failed to calculate years and months accurately because real-world months have a variable number of days (28, 30, 31).

Solution

Shifted from pure division to a calendar-based object subtraction method. The system now calculates the differences for Y, M, D, H, M, S individually and applies a borrowing logic from the smallest unit up to the largest. It uses new Date(Y, M, 0).getDate() to dynamically fetch the exact number of days in the previous month when borrowing days.

Logic Debunk: mo < 0 vs mo <= 0

The correct condition is mo < 0. The variable represents the difference between months. If mo equals 0, the target month and current month are the same, meaning no year needs to be borrowed. Using <= 0 would trigger a false borrow when months are identical, causing the month value to incorrectly jump by +12 and the year to decrease by 1.

Bug Fixes

Corrected the day borrowing condition from if (mo < 0) to if (d < 0).
Fixed a typo where let m (minutes) was mistakenly subtracting now.getMonth() instead of now.getMinutes().

add some todos and changelog

the first project using html this year
making a countdown timer