TopSpeed Blog

When I started shopping for a new car, I realized nobody shows you the full picture. Sites show the list price, maybe a monthly payment, and that's it. But what about insurance? Registration? Fuel? Depreciation? What about the gap between electric and gas after 5 years?

So I built a tool that does the real math

• Compare up to 4 cars side by side — electric, gas, hybrid, whatever you want
• Full financing calculator — interest, down payment, balloon, term. Not just "monthly payment" but real total cost including interest
• Balloon risk gauge — color-coded risk indicator: if the car's value at end of term < what you owe, you're in trouble
• Maintenance escalation — compound 15% after year 5. Because an 8-year-old car doesn't cost the same to maintain as new
• Cost comparison chart over time — Canvas-drawn, zero external dependencies. See exactly when electric "breaks even" with gas
• Sell after X years — slider showing how much is left in your pocket after selling, including depreciation

Tech — Zero Dependencies

car-compare/
├── index.html          # Pure HTML
├── css/style.css       # Black Liquid Glass design
├── js/
│   ├── app.js          # Main: DOM, events, settings
│   ├── calc.js         # Engine: all calculations
│   ├── data.js         # Car database (manual)
│   ├── modals.js       # Modals, tooltips
│   ├── ui-cards.js     # Card rendering
│   ├── ui-compare.js   # Comparison + Canvas chart
│   └── state.js        # URL state management
└── test.sh             # Automated tests (!)

Zero frameworks. Zero npm. Zero build step. Vanilla JS only. The chart is drawn directly on Canvas API — manual, DPI-aware, no Chart.js. All calculations in calc.js — one function calcCar() returning 30+ fields.

Why Vanilla and not React?

Because this is a personal site on a $4 VPS running nginx. I don't need SSR, hydration, and 800MB of node_modules. The entire bundle (JS+CSS+HTML) weighs under 100KB. Load time: zero.

Try it yourself | GitHub Repo