DEV Community

Manthan Ankolekar
Manthan Ankolekar

Posted on

1

🚗 Build a Ride Cost Calculator App with Angular 20 and Tailwind CSS 4

#webdev #programming #beginners #angular

Managing fuel expenses is essential whether you're a frequent commuter or a casual rider. In this blog, I’ll walk you through how I built a modern Ride Cost Calculator App using Angular 20, Tailwind CSS 4, and the latest signals API from Angular.

This sleek, mobile-responsive app helps you estimate ride costs, track history, and even export or print receipts.

🔗 Source Code: GitHub – manthanank/ride-cost-calculator-app
🚀 Live Demo: ride-cost-calculator-app.vercel.app

✨ Features at a Glance

  • 🚀 Real-time fuel cost calculation
  • 📊 Persistent ride history (local storage)
  • 📁 Export ride history as CSV
  • 🖨️ Print ride receipts
  • 🌍 Choose currency (₹/\$/€) and unit (km/mi)
  • 🌓 Toggle light/dark mode
  • 🔁 Responsive design for all screen sizes

🔧 Tech Stack

  • Angular 20 – Standalone components & Signals
  • Tailwind CSS 4 – Utility-first styling
  • TypeScript – Strictly typed reactive app
  • PostCSS – Tailwind configuration

🧮 How the Calculator Works

The calculator uses this formula:

Total Cost = (Distance / Mileage) × Petrol Price
Enter fullscreen mode Exit fullscreen mode

Supports:

  • Distance in km or miles
  • Fuel prices in ₹, \$, €
  • Mileage in km/l

The app auto-converts miles to kilometers before calculation and provides a cost breakdown with fuel efficiency tips.

📊 Ride History with Export & Print

Every ride you calculate is saved locally and appears in a history list. From there, you can:

  • 🧾 Print a ride receipt
  • 📥 Export all records as a CSV
  • 🧹 Clear history with one click

CSV export is handled by dynamically generating a blob and creating a download link. Printing is done in a new browser window with minimal styling.

🌓 Dark Mode & Signals

The app uses Angular Signals to track and react to state changes like theme preference, ride input, and form reset. Theme mode is persisted in localStorage:

const newTheme = isDarkMode() ? 'light' : 'dark';
localStorage.setItem('theme-preference', newTheme);
Enter fullscreen mode Exit fullscreen mode

🗂️ Project Structure 

ride-cost-calculator-app/
├── src/
│   ├── app/
│   │   ├── components/
│   │   ├── models/
│   │   └── services/
│   ├── environments/
│   └── styles.css  ← Tailwind imported here
├── public/
├── angular.json
├── package.json
└── .postcssrc.json
Enter fullscreen mode Exit fullscreen mode

▶️ Get Started

Clone & Install 

git clone https://github.com/manthanank/ride-cost-calculator-app.git
cd ride-cost-calculator-app
npm install
Enter fullscreen mode Exit fullscreen mode

Run Locally 

ng serve
# Open http://localhost:4200
Enter fullscreen mode Exit fullscreen mode

Build for Production 

ng build --configuration production
Enter fullscreen mode Exit fullscreen mode

💬 Final Thoughts

This Ride Cost Calculator App is more than just a fuel estimator. It's a demonstration of modern Angular capabilities using signals, defer blocks, and standalone architecture, all styled elegantly with Tailwind CSS.

Whether you're tracking daily commutes or planning a road trip, this tool brings clarity to your fuel expenses — with a delightful user experience.

🔗 Check it out: ride-cost-calculator-app.vercel.app
📦 View the Code: github.com/manthanank/ride-cost-calculator-app

Top comments (0)