Case study

Creating a crochet tracker

This project helped me move beyond static pages and practice JavaScript by building something useful for one of my hobbies.

Open the tracker Back to projects

The idea

I wanted a simple place to track crochet project details: hook size, yarn colors, time spent, stitch counts, row counts, and goals. The project gave me a practical reason to learn how JavaScript can respond to user actions.

Process

  1. Drafted the layout and functionality in Figma.
  2. Defined core interactions: counters, user inputs, saved values, and goal celebrations.
  3. Created GIF animations in Piskel for progress moments.
  4. Built the HTML, CSS, and JavaScript files in VS Code.
  5. Tested the tracker on desktop and mobile layouts.

What it does

Tracks project setup

Users can save hook size and yarn colors, making it easier to return to a project later.

Counts progress

The app tracks stitch and row counts and prevents negative values.

Captures goals

Users can set row, stitch, and time goals that update dynamically.

Celebrates milestones

Goal animations appear when progress targets are reached.