Moneybook
Mobile bookkeeping app mock built with PDRenderKit data binding: month calendar / pie view, side tab and add-record keypad calculator.
Overview
Live Preview
Open the example in a new tab
Page Sections
Interactions
- js/index.js: new PD({ id: "app", data, event }) binds {{ }} text, :for lists, :if/:else, :class, :html and @click handlers
- Mode read from ?mode= query (location.href.$query, default pie); changeMode reloads with ?mode=pie / ?mode=calendar
- Calendar data computed with PDRenderKit date helpers ($date start/end/pre, $d, $D) including previous/next month filler days (.unmonth)
- addShow / tabShow / selectorShow toggle .show on #add-item / #app-tab / #month-selector; selectorShow rotates the caret icon
- changeIncome swaps app.data.type_list between expense and income categories (reactive re-render); changeType moves .sel
- numVal: keypad builds an expression in #num-input data-value (max 16 chars, ÷/x mapped to / *), AC clears, ← deletes, OK evaluates via eval() or alerts 成功新增紀錄 and closes the panel
- Year prev/next and date prev/next buttons have no handlers
Dependencies
Styling
Single-file SCSS (no partials). :root vars --main-color, --content-max-width (480px), --num-pad-color, --num-pad-enter; fixed full-screen panels with backdrop-filter blur; @for 1..100 loop generates [percent=N] rotations for the two-half pie ring.
cd target/20230418
npx sass sass/index.scss css/index.css --no-source-map || exit 1
Techniques
- PDRenderKit template syntax: {{ }}, :for="e in list", :if / :else, :class, :html, @click
- Element builder "td".(["button.sel".(i)]).$html to produce calendar cell HTML
- CSS-only pie ring: two half spans rotated by 3.6deg × percent from an SCSS @for loop
- Values rendered by CSS content: "$" attr(data-value), attr(date), attr(percent) "％"
- Mobile-first fixed layout capped at 480px width; media queries at min-width 480px; backdrop-filter glass panels
- Script loaded as ES module (type="module")
External Assets
