grand-calculator
create a project to build a calculator for simple arthematic operations and also single page design strictly
Comments (0)
Sign in to leave a comment
Project Tasks6
Implement CalculatorHeader for Calculator
As a frontend developer, implement the CalculatorHeader section for the Calculator page. Build the `CalculatorHeader` React component with a three-part animated entrance sequence using `framer-motion`: (1) `motion.h1` with className `ch-title` animating from `opacity:0, y:-18` to visible over 0.6s with cubic-bezier `[0.22,1,0.36,1]`; (2) `motion.p` with className `ch-tagline` animating from `opacity:0, y:-12` with a 0.15s delay; (3) `motion.div` with className `ch-underline-wrap` containing a `ch-underline-bar` div that animates `scaleX` from 0 to 1 with a 0.35s delay. Apply `CalculatorHeader.css` (1948 chars) for layout and styling. This is a root section with no page-level dependencies.
Build Calculator API Endpoint
As a Backend Developer, implement a FastAPI endpoint (POST /api/calculate) that accepts a JSON body with operands and operator, performs the arithmetic operation (addition, subtraction, multiplication, division) server-side, and returns the result. Include input validation, divide-by-zero error handling, and proper HTTP error responses. Note: Frontend section tasks (CalculatorCard: 91e993ab) should ideally depend on this task for server-side calculation support, though the frontend can also handle calculations client-side as a fallback.
Setup Design System Theme
As a Frontend Developer, configure the global design system and theme for the grand-calculator application. Define CSS custom properties (or a theme object) for all brand colors: primary (#4A90E2), primary_light (#A6C8F0), secondary (#F5A623), accent (#50E3C2), highlight (#F8E71C), bg (#FFFFFF), surface (rgba(74,144,226,0.1)), text (#333333), text_muted (#777777), and border (rgba(74,144,226,0.2)). Set up global base styles, font imports, and responsive breakpoints. Install and configure framer-motion and GSAP packages. This task is a prerequisite for all frontend section tasks.
Implement CalculatorCard for Calculator
As a frontend developer, implement the CalculatorCard section for the Calculator page. Build the `CalculatorCard` React component using `useState` (display, expression, prevValue, operator, waitingForOperand), `useRef` (valueRef, prevDisplayRef), `useCallback`, and `useEffect`. Implement a 20-button grid defined by the `BUTTONS` constant array covering digits (0-9, .), operators (÷, ×, −, +, %), clear (C, ⌫), sign toggle (±), and equals (=). Include helper functions: `evaluate(a, op, b)` mapping `OP_MAP` symbols to JS operators with divide-by-zero guard returning 'Error'; `formatDisplay(val)` handling trailing decimals, large numbers via `toExponential(4)`, and rounding to 1e10. On `display` state changes, trigger a GSAP `fromTo` animation on `valueRef.current` from `{opacity:0.4, scale:0.92}` to `{opacity:1, scale:1}` over 0.25s with `back.out(1.4)` easing. Each button renders as a `motion` element styled by its `type` (clear, op, digit, equals). Apply `CalculatorCard.css` (3721 chars). This is the core interactive section; depends on CalculatorHeader existing in the page layout.
Implement CalculatorFooter for Calculator
As a frontend developer, implement the CalculatorFooter section for the Calculator page. Build the `CalculatorFooter` React component as a `motion.footer` with className `cf-footer` animating from `{opacity:0, y:8}` to visible over 0.6s with `easeOut` and a 0.3s delay. Inside `cf-inner > cf-row`, render: a `cf-copyright` span ('© 2024 grand-calculator'), two `cf-dot` separator spans ('·'), a `cf-version` span ('v1.0'), and a `cf-link` anchor pointing to `https://github.com/grand-calculator` with `target='_blank'` and `rel='noopener noreferrer'` for the Documentation link. Apply `CalculatorFooter.css` (1249 chars). This section is independent of CalculatorCard and depends only on CalculatorHeader being present in the layout.
Integrate Calculator Frontend Backend
As a Tech Lead, verify the end-to-end integration between the Calculator frontend implementation and the Calculator backend API. Ensure data flows correctly from the CalculatorCard UI inputs to the POST /api/calculate endpoint, API responses are handled properly in the UI (including error states like divide-by-zero), and all arithmetic interactions work as expected. Verify CORS configuration allows the frontend origin, response format matches the frontend's expected schema, and the floating keypad design remains intact during API interactions.
grand-calculator
Quick Arithmetic, Anywhere
No comments yet. Be the first!