verdant-design
start project to build simple singlepage design of calculator
Comments (0)
Sign in to leave a comment
Project Tasks3
Implement CalculatorContainer for Calculator
As a frontend developer, implement the CalculatorContainer section for the Calculator page. This section renders a `<section className="cc-root">` wrapper that hosts an animated leaf particle background layer (`cc-leaf-layer`). It defines 5 SVG leaf path shapes (`LEAF_SHAPES`) and renders 14 `LeafParticle` components. Each `LeafParticle` uses `useAnimationControls` from framer-motion and a `mountedRef` ref to run an infinite looping animation sequence via an async `animate()` function inside `useEffect`. Each leaf is positioned randomly using `randomBetween()` helpers for startX, startY, size, hue (green range hsl 90–150), driftX/Y, rotation, opacity (0.07–0.15), and duration (4–9s). The `motion.div` with class `cc-leaf` renders an inline SVG with a colored path and a center vein line. The container also accepts `children` and renders them inside `cc-root`. Implement the accompanying `CalculatorContainer.css` for `cc-root`, `cc-leaf-layer`, and `cc-leaf` layout/positioning styles.
Implement CalculatorDisplay for Calculator
As a frontend developer, implement the CalculatorDisplay section for the Calculator page. This section renders a `<div className="cd-root">` containing a `cd-display` div with a decorative `🌿` leaf span, an input row, and a result row. It accepts props `inputValue`, `resultValue`, and `isResult`. The `getResultSizeClass()` helper applies `cd-result--xlarge` (>14 chars) or `cd-result--large` (>9 chars) CSS classes for adaptive font sizing. The input row uses `AnimatePresence` with `mode="wait"` and a `motion.span` keyed on `displayInput` with `inputVariants` (opacity fade, 0.18s). The result row uses `AnimatePresence` with a `motion.span` keyed on `displayResult + String(showAccent)` using `resultVariants` (spring stiffness 320, damping 28, y-slide from 14px, exit y -8px). When `isResult` is false, a `cd-cursor` blink span is rendered. The `cd-result--accent` class is conditionally applied when `showAccent` is true. Implement `CalculatorDisplay.css` for `cd-root`, `cd-display`, `cd-input-row`, `cd-result-row`, `cd-input-text`, `cd-result-text`, size modifier classes, `cd-result--accent`, `cd-cursor` blink animation, and `cd-leaf-deco`.
Implement CalculatorKeypad for Calculator
As a frontend developer, implement the CalculatorKeypad section for the Calculator page. This section renders a `<section className="ck-root" aria-label="Calculator keypad">` containing a `ck-grid` div that maps over the `BUTTONS` array (18 entries: C with colSpan, ÷, ×, 7–9, −, 4–6, +, 1–3, =, 0 with colSpan, .). Each button is a `motion.button` using `leafSwayVariants` with `rest`, `hover` (rotate oscillation [0,-2,2,-1,1,0] over 0.5s + scale 1.06), and `tap` (scale 0.95) states. Button types map to CSS modifier classes: `ck-btn--number`, `ck-btn--operation`, `ck-btn--equals`, `ck-btn--clear`, `ck-btn--zero`. An `activeBtn` state (via `useState`) tracks the last clicked button for 160ms via `setTimeout`, applying inline background overrides (`var(--highlight, #FFEB3B)` for equals, `var(--primary_light, #81C784)` for number/zero). The `handleClick` callback (memoized via `useCallback`) calls the `onButtonClick` prop. Implement `CalculatorKeypad.css` for `ck-root`, `ck-grid` CSS grid layout, all `ck-btn` variants, colSpan handling for C and 0 buttons, and verdant-theme color tokens.
No comments yet. Be the first!