Problem Solving & Design 54

The calculator solves the core problem but the interaction model feels incomplete without guidance or confirmation feedback.

• +The three-color status system (green, yellow, red) maps clearly to the decision space: enough yarn, cutting it close, or need more.
• +Inline editing keeps the interface compact and lets users correct entries without leaving the page.
• -No confirmation or undo after deletion, so removing a skein entry is irreversible and could happen by accident.
• -The target yardage input sits alongside skein entries with no visual hierarchy, making it unclear which field to fill first.
• -Editing mode lacks a clear visual distinction or focus management, so users may not notice when a row becomes editable.
• -No summary or review step before committing changes, so users cannot verify their entries match their actual yarn stash.

Completeness 57

All core features for yarn calculation and entry management are present and wired, though the interface lacks guidance for first-time use.

• +Skein entry, editing, and deletion all work with the full calculation pipeline from input to color-coded status display.
• +Total yardage calculation and three-tier color coding (green, yellow, red) correctly reflect the brief's requirements.
• +Multiple skeins can be tracked simultaneously with inline editing, supporting the full workflow.
• -No empty state or onboarding hints the user toward entering their first skein or target yardage, leaving a blank page on load.
• -The tests.html file exists but contains no automated test coverage, leaving the calculation logic unverified.
• -Input validation is present but errors are not surfaced to the user, so invalid entries may silently fail or behave unexpectedly.

Technical Craft 24

The codebase is a single monolithic Vue instance with minimal structure, no tests, and sparse error handling.

• -All logic lives in one app.js file with no module separation, making the code difficult to test, reuse, or maintain as it grows.
• -Computed properties like statusInfo and diffDisplay mix calculation and presentation logic, violating separation of concerns.
• -Input validation occurs but errors are never reported to the user, so invalid data silently corrupts the state.
• -No automated tests exist to verify the calculation logic, leaving the core feature (yarn math) unvalidated.
• -Risky operations like parsing user input and array mutations lack defensive checks, so malformed entries could cause unexpected behavior.