George Clinkscales Jr.

The Problem

The Odin Project's calculator assignment is intentionally open-ended: build a working calculator with the four operations. The baseline is straightforward. The goal I set was to go further — make it feel like a real piece of hardware. That meant click sounds, keyboard input, and a voice interface that animates every button press as if someone is physically operating it.

Try It

Previewing at tablet width. Open the full site ↗ for the desktop experience. Also fully optimized for mobile.

You're on mobile — open the full site ↗ for the best experience. Any display issues are caused by the embed, not the site itself.

The Approach

Every click sound is synthesized on the fly using the Web Audio API — 20ms of white noise run through a gain node with an exponential ramp. No audio files, no fetch requests. The result is a sharp mechanical click that fades immediately, like a physical key. The same AudioContext fires on mouse clicks, touch events, and keyboard presses.

The voice pipeline uses the Web Speech API's SpeechRecognition to capture a spoken calculation ("five plus three"), maps each word to its symbol via a wordMap, then staggers button clicks 300ms apart so every key animates and plays its click sound in real time. After all presses complete, SpeechSynthesisUtterance reads the result back aloud. The long-press power toggle uses a setTimeout on mousedown that cancels on mouseup if released too quickly — the whole calculator goes dark and ignores all input while off.

Keys are color-coded by function — numbers, operators, and utility keys each use a distinct color so the layout is scannable at a glance without reading every label.

The Outcome

A calculator that responds to your voice, reads the result back to you, clicks on every key press, and hides a power toggle — built entirely with browser-native APIs and zero dependencies. The Odin Project spec asked for a calculator. This one feels like hardware.