I recently built a free Army Fitness Test score calculator as a static website. It is a small project, but it touches several ideas that come up in real front-end work. Here is how I put it together.
The five events
The Army Fitness Test (AFT) has five events: the 3-repetition maximum deadlift, the hand-release push-up, the sprint-drag-carry, the plank, and the 2-mile run. Each event is scored from 0 to 100 points. To pass, a soldier must score at least 60 points in every event and reach a minimum total of 300 out of 500 points. Those two rules drive the whole calculator.
A canonical data layer
The heart of the project is the scoring data. The official AFT scoring tables map a performance value, like a deadlift weight or a 2-mile run time, to a point score for each event. I keep all of these tables in one canonical data structure near the top of the script. That separation matters. If the official tables ever change, I only edit one place. The rest of the code never hard-codes a number.
A pure scoring function
Above that data layer sits a single pure scoring function. It takes an event name and a raw performance value, looks up the matching row in the table, and returns a score between 0 and 100. No DOM access and no side effects. That purity makes the function easy to test. I can feed it sample performances and assert the returned scores without rendering anything.
Form inputs per event
The page has one form input per event. Each input handler reads the value, passes it to the scoring function, and renders the per-event score. The total updates live as the user types. Keeping each input independent means one invalid value never breaks the others. The pass or fail message applies the 60 per event and 300 total rule and changes color accordingly.
Score history with localStorage
After a full result is computed, the calculator saves the total and the date to localStorage. On load it reads the history back and renders a simple table of past scores. This gives returning visitors a training log with zero backend. The lesson for a static site is that browser storage is enough for personal history features.
Why a static site
The whole calculator is a static site. There is no server, no database, and no build step beyond plain files. That keeps hosting free and the page fast. All logic runs in the browser, so the page stays responsive and easy to deploy anywhere.
You can try the finished calculator here: https://www.armyfitnesstestcalculator.com/
Not affiliated with the U.S. Army.
Top comments (0)