Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/mr-sunset/watertracker/llms.txt

Use this file to discover all available pages before exploring further.

WaterTrack gives you two ways to record a drink: tap one of the five quick-log chips for a common preset amount, or drag the custom amount slider to any value you need, then press Log. Either path calls the same logDrink(amount) function under the hood, immediately adds the drink to your history, updates the running total displayed on screen, and writes everything to localStorage — so your data is never lost on a page reload.

​
Quick-log chips

The five pill-shaped chips near the top of the screen let you record the most common drink sizes in a single tap — no slider adjustment required.
Chip labelFluid ounces logged
44 oz
88 oz
1212 oz
1616 oz
2424 oz
Tapping any chip fires three things at once:
1

logDrink(amount) is called

The chip’s text content is parsed as an integer and passed directly to logDrink(), which updates the in-memory total, prepends a new entry to the drink list, and saves both values to localStorage.
2

Confetti celebration fires

The celebrate() helper triggers the bundled confetti library (@hiseb/confetti) with 100 particles at velocity 400, giving you instant visual feedback.
3

Pop animation plays on the counter

The pop CSS class is added to the #intake element, scaling the number up and flashing it to #6fcdff. The class is removed automatically once the animation ends (see Intake counter animation below).
Because the chips bypass the slider entirely, the slider value stays wherever it was — there is nothing to reset after a chip tap.

​
Custom amount slider

When a preset chip size doesn’t match what you drank, use the range slider to dial in the exact amount. 
<input type="range" id="amount-slider"
       min="2" max="80" step="2" value="8">
  • Range: 2 oz to 80 oz
  • Step: 2 oz increments
  • Default: 8 oz
As you drag, an input event listener updates the #amount-slider-current label above the track in real time so you always see the selected value before you commit to logging it. 
amountSlider.addEventListener('input', () => {
    amountSliderCurrent.innerHTML = amountSlider.value;
});
When you are happy with the displayed value, press the Log button to record it.

​
The Log button

The Log button is the commit step for slider-based logging. Pressing it triggers the following sequence:
1

Confetti celebration fires

celebrate() is called, launching the confetti burst identical to a chip tap.
2

Pop animation plays on the intake counter

The pop class is added to #intake, triggering the scale-and-color animation.
3

logDrink() is called with the slider value

The current slider value is read with parseInt(amountSlider.value, 10) and passed to logDrink(), which persists the drink and updates the total.
4

Slider resets to 8 oz

Both the visible label (#amount-slider-current) and the slider thumb (amountSlider.value) are reset to 8, ready for the next log.
logButton.addEventListener('click', () => {
    celebrate();
    if (intake) intake.classList.add('pop');

    const amount = parseInt(amountSlider.value, 10);
    logDrink(amount);

    // Reset slider location
    if (amountSliderCurrent) amountSliderCurrent.innerHTML = '8';
    if (amountSlider) amountSlider.value = 8;
});
The intake counter shows the running total for the current session. It does not automatically reset at midnight — the counter keeps accumulating across page loads until you manually clear it. Use the Reset button inside the Settings panel to wipe the total and start fresh each day.

​
Intake counter animation

Every time a drink is logged — whether via a chip or the Log button — the large #intake number at the top of the page plays the pop keyframe animation: 
@keyframes pop {
    0%   { color: auto; }
    50%  { color: var(--accent); transform: scale(1.1); }
    100% { color: auto; }
}

.pop { animation: pop 0.4s forwards; }
The number scales up to 110 % of its size and changes colour to #6fcdff at the midpoint, then returns to its resting state. The animation runs for 0.4 seconds. Once it ends, an animationend listener removes the pop class so the animation can fire again on the very next drink: 
intake.addEventListener('animationend', () => {
    intake.classList.remove('pop');
});

Build docs developers (and LLMs) love

Get started for freeTalk to us