• 

  Main Page of the Website

Project Description

Bus Fare Calculator is a web app that estimates bus fares based on the passenger's starting location, destination, bus type, and fare type. It helps commuters know how much they should expect to pay before or during their trip. It is made for bus commuters, especially those traveling to unfamiliar places and wanting to prepare their budget. It also gives passengers a reference point for checking whether the fare they are charged matches the expected fare.

Inspiration

As someone who has been commuting by bus for years, I've seen commuters, including myself, wonder how much the bus fare is going to be, especially when we're traveling to a new place. Knowing the fare beforehand helps us prepare our budget instead of finding out only after we get there.

I've also encountered situations where the amount a passenger is asked to pay seems higher than the fare reflected on their ticket. In some cases, the ticket shows the correct fare, while the passenger is charged a little more. This can make it difficult for passengers to know whether they're actually paying the right amount.

I’ve always been familiar with the way bus fares are calculated. Bus conductors use location number codes, where the difference between two codes represents the distance traveled, and that distance is multiplied by the rate of the bus type.

When the LTFRB announced fare changes in September 2026, I became curious about how much bus fares had actually changed. That curiosity turned into a simple question:

What if I could just enter where I’m coming from, where I’m going, and the type of bus, and immediately know the estimated fare?

That became the idea behind Bus Fare Calculator.

I wanted to make something that was not just functional, but something that felt familiar to the people who actually use buses in our region.

What it does

Bus Fare Calculator calculates an estimated bus fare based on four parameters:

• Starting location
• Destination
• Bus type
• Fare type

The basic calculation is: {Fare} = {Distance} x {Rate} x {Fare Type}

For discounted passengers, such as students and senior citizens, the applicable discount is also taken into account.

The website also includes location suggestions, so users don't have to remember every location in the database. They can simply start typing and select their destination from the suggestions.

I designed it around the bus routes and locations familiar to commuters in Northern Mindanao.

How I built it

The project started with a very simple HTML form. It was functional, but honestly, it looked pretty ugly.

Once I had the basic functionality working, I decided to focus on the design. I used Figma for the first time and created a retro-inspired interface for the calculator.

I then used a Figma-to-HTML tool to turn the design into actual HTML. The generated code gave me a starting point, but it wasn't functional in the way I wanted, so I had to modify and rebuild parts of it.

I used Claude to help me understand and fix parts of the generated code, especially for making the buttons and interactions work. I then implemented my own JavaScript logic and added features such as:

• Location autocomplete suggestions
• Bus and fare type selection
• Fare calculation
• Animated fare results
• UI animations
• Responsive layout adjustments

For the location database, I used JavaScript Map data structures where each location is associated with a number code.

The project is currently deployed online through Vercel, although it is still very much a work in progress.

Challenges I ran into

The biggest challenge was actually the data.

I needed the location codes used by bus conductors, but I couldn't find a reliable public database containing all of them. I also didn't have the opportunity to ask conductors directly for the complete list.

So I tried to figure out how the numbering system worked.

I already knew some codes from personal experience, such as Iligan City being around 085 and Bacolod, Lanao del Norte, being 116. I noticed that the numbers appeared to correspond roughly to distances along the route.

I used Google Maps to measure distances along the national highway, using the area around Bulua Bus Terminal as a rough starting point. From there, I worked my way toward Iligan and other locations, using the measured distances to create an initial database.

This isn't guaranteed to perfectly match the actual numbering system used by bus conductors. However, it gave me a workable approximation that allowed the calculator to function.

Another challenge was turning a Figma design into a real website. The generated HTML looked close to the design, but it didn't automatically behave the way I wanted. I had to understand the code, modify it, connect the JavaScript, and repeatedly adjust the layout until the interface actually worked.

Accomplishments that I'm proud of

I'm proud that this project went from a basic form that barely looked presentable into an actual working website.

More importantly, I built something based on a problem that I personally experience.

I also got to try several things that were new to me, including:

• Designing a complete interface in Figma
• Converting a design into HTML
• Working with JavaScript data structures
• Building autocomplete functionality
• Creating UI animations
• Deploying a website using Vercel
• Researching and constructing a location database

The project also pushed me beyond simply writing code. I had to think about UI, UX, data, research, and the limitations of the information available to me.

What I learned

This project taught me that building a working application is more than just writing the code.

The calculator itself is relatively simple. The harder part was figuring out what data the calculator should actually use and how that data could be obtained.

I also learned that generated code and AI tools can be useful starting points, but they don't replace actually understanding what the code is doing. I still had to test things, find problems, change the layout, and make decisions about how the application should work.

Most importantly, I learned how an everyday problem can become a software project.

I started with something I experienced as a commuter, turned it into a simple calculation, then gradually built an interface and a working web application around it.

What's next for Bus Fare Calculator

The next step for Bus Fare Calculator is to expand its database to include many more locations.

The current version only covers a limited number of places, so I want to continue researching and adding locations until the calculator can cover much more of the routes used by commuters in the region.

I also want to verify the location codes against actual bus conductor records or more reliable sources whenever possible. This would make the calculations more accurate and allow the project to become more useful to actual commuters.

For now, my main goal is simple:

More locations, more routes, and a more useful calculator for commuters.

Built With

• claude
• figma
• vercel
• visual-sutdio-code