1. Text & Number Inputs

2. Unit Badge with cycleUnit()

                    /* HTML pattern */ <div class="input-unit"> <input type="number" id="len" value="1"
                    step="0.1" oninput="calc()"> <span class="unit-badge" onclick="cycleUnit(this)"
                    data-unit="m,cm,mm,ft">m</span> </div> /* JS — getV() handles unit conversion
                    automatically */ const len = getV('len'); // always returns value in SI base unit
                

3. Select / Dropdown

4. Stepper (+/−)

                    function stepperInc(id, step=1) { var el = document.getElementById(id); el.value =
                    (parseFloat(el.value)||0) + step; el.dispatchEvent(new Event('input')); } function stepperDec(id,
                    step=1) { var el = document.getElementById(id); el.value = Math.max(parseFloat(el.min)||0,
                    (parseFloat(el.value)||0) - step); el.dispatchEvent(new Event('input')); }
                

5. Slider with live value

6. Toggle Switch

7. Radio Group

8. Checkbox

9. Result Boxes

                    /* HTML */ <div class="result-box [success|warning|error|empty]" id="box-NAME"> <div
                    class="result-label">Label</div> <span class="result-value"
                    id="res-NAME">—</span> <span class="result-unit">unit</span> </div> /* JS
                    — via shared.js */ setResult('NAME', value); // sets value, removes empty class setResult('NAME',
                    null); // shows —, adds empty class
                

10. Formula Box

                    /* Useful HTML entities for formulas */ · → · (multiply) ÷ → ÷ α → α β → β γ → γ δ → δ λ → λ μ → μ η
                    → η ρ → ρ σ → σ τ → τ ω → ω φ → φ Δ → Δ Σ → Σ Π → Π ∞ → ∞ ² → ² ³ → ³ ½ → ½ Ω → Ω ° → ° ± → ± ≠ → ≠
                    ≤ → ≤ ≥ → ≥ √ → √ ∑ → ∑
                

11. Progress Bars

12. Alerts / Callouts

13. Badges & Pills

14. Buttons

Primary

Secondary / outline

Sizes

Icon buttons

15. Table

16. Tabs

17. Accordion

18. Tooltip

19. Modal Dialog

20. Skeleton Loader

21. Copy Button

22. Star Rating

Ocena: 3/5

23. Tag Input

24. Big Number Display

25. Colour Palette (CSS variables)

26. Typography Scale

27. Layout Classes

                    /* Sections */ <div class="section"> — full width section, card background <div
                    class="section section--narrow"> — narrower, centered /* Column layouts */ <div
                    class="one-column"> — single column (inputs top, results below) <div class="two-columns"> —
                    inputs left | results right (responsive) /* Input group */ <div class="field"> — label + input
                    wrapper <div class="input-unit"> — input + unit badge side by side /* Shape forms (for
                    multi-shape calculators) */ <div class="shape-form" id="form-NAME"> — hidden by default
                    <div class="shape-form active"> — visible form /* switchForm('NAME', calc) from shared.js
                    toggles these */
                

28. Circular Progress (SVG)

                    /* SVG circular progress — circumference = 2πr = 2π×32 ≈ 201 */ /* stroke-dashoffset = 201 × (1 -
                    percentage/100) */ /* 0%→201, 50%→100.5, 70%→60, 100%→0 */ <circle r="32" stroke-dasharray="201"
                    stroke-dashoffset="60" .../>
                

29. Range Knob (dial-style)

30. shared.js API Reference

                    /* ── Reading inputs ── */ getV('id') // read input, auto-convert unit badge → SI base unit //
                    returns NaN if empty/invalid /* ── Writing results ── */ setResult('id', value) // set result-box
                    value; null → shows '—' + adds .empty clearResults(['a','b']) // setResult(id, null) for each id /*
                    ── Unit badge ── */ cycleUnit(badgeEl) // click handler — converts value, cycles to next unit /* ──
                    Multi-form (shape pickers) ── */ switchForm('name', calcFn) // shows #form-name, hides others, calls
                    calcFn /* ── URL state ── */ saveToUrl() // saves all input[id] values to URL hash (auto-called)
                    loadFromUrl() // restores from hash, returns true if any found /* ── Formatting ── */ formatNum(n)
                    // toPrecision(4) as float — e.g. 1.2345678 → 1.235 /* ── Auto-init ── */ // On DOMContentLoaded:
                    loadFromUrl() || calc() // calc() must be defined in script.js
                

31. Full calc() Pattern (script.js template)

                    /* script.js — standard pattern for a single-formula calculator */ function calc() { // 1. Read
                    inputs (auto-converts units via shared.js getV) const v = getV('velocity'); // m/s const D =
                    getV('diameter'); // m (even if badge shows mm) const nu = getV('viscosity'); // m²/s // 2. Validate
                    — clear and bail if invalid if ([v, D, nu].some(isNaN) || v <= 0 || D <= 0 || nu <= 0) {
                    clearResults(['re', 'regime']); return; } // 3. Compute const Re = v * D / nu; // 4. Write outputs
                    setResult('re', Re); setResult('regime', Re < 2300 ? 'Laminarny' : Re < 4000 ? 'Przejściowy' :
                    'Turbulentny'); // 5. Optional: update result box class for colour coding
                    document.getElementById('box-regime').className = 'result-box ' + (Re < 2300 ? 'success' : Re < 4000
                    ? 'warning' : 'error'); } calc(); // run on load so defaults populate immediately