Coffee Calculator

See how small habits add up.

Comment

Inspiration

I wanted to build something simple, fun, and relatable that connects everyday habits to bigger financial outcomes

What it does

Coffee Calculator lets you:

  • Select how many cups of coffee you drink per week
  • Choose your favorite drink type (latte, espresso, drip)
  • Instantly see your weekly, monthly, and yearly spend
  • Compare that yearly spend against real stock prices (e.g., SPY, VTI, AAPL, MSFT) to see how many shares you could buy instead

How we built it

  • Frontend: HTML, CSS, JavaScript, Bootstrap for styling
  • Hosting: GitHub Pages
  • Stock data: Alpha Vantage API, but the key is hidden — we used a GitHub Actions workflow to fetch prices server-side and write them to a JSON file our app reads.
  • Design: Custom styling with Bootstrap + Google Fonts + a dark-mode toggle for accessibility.

Challenges we ran into

  • Handling API keys securely on a static site (solved with GitHub Actions).
  • Making the slider + radio buttons update totals smoothly.
  • Debugging CSS to keep images consistent in size and style.

Accomplishments that we're proud of

  • Integrated live(ish) stock data without leaking API keys.
  • Learned how to use GitHub Actions to generate data for a frontend app.
  • Created a UI that looks clean and mobile-friendly.

What we learned

  • How to connect a static frontend to live data using GitHub Actions.
  • How to use Bootstrap more effectively for responsive, fast styling.
  • How small UX touches (like live sliders and image radios) make the app feel more engaging.

What's next for Coffee Calculator

  • Add more items (“What else could you buy?” beyond stocks).
  • Let users plug in custom tickers or even crypto.
  • Show historical charts to visualize “coffee vs. investing” over time.
  • Expand to other daily habits (subscriptions, dining out, etc).
  • Package it as a small financial literacy teaching tool.
Share this project:

Updates