Bill Split

Javascript calculations

The Purpose

The goal of this project was to get myself and others away from a calculator app when the bill arrives at the table. This app would be a one way stop to gather the total amount, take the tip and then check if you’d like to split it amongst the group.

Javascript provides the buttons with capabilities of loading new template pages to the output box on the landing page, to create a seamless experience for the user. In addition to loading these templates, create functions that will calculate all the necessary math and display it to the user.

Present all the information to the user and keep it simple, understandable, and frictionless.

Goals

  • Look into bill sharing projects.
  • Create a layout of “pages” that would be the ideal path for the user.
  • Turn the layout into template variables in Javascript.
  • Use “data-route” buttons to guide the user down the path to calculate information.
  • Figure out what calculations are needed to present all information to the user.
  • Create functions for said calculations and how to output them.
  • Organize variables for output fields, numerical amounts, and items to click.
  • Stylize app to make use of some new little tricks to display cool techniques to the user.

The Approach

I started with the idea of making different templates that would represent the pages that would appear on the app. When I thought of the idea, I led with a homepage that would allow an input of an amount - ideally an amount that you receive on a bill at the table.

Next, I wanted to lead the user to a tip page. On this page the user would scroll to select the percentage of tip they would like to add to their meal. I chose to make a slider range value input because I thought it would be interesting and give me the opportunity to use Javascript to grab the value and live update the amounts on display.

A challenge was setting up buttons so that they would route towards a specific page but also make them take the input and show calculations. I had originally set up an event listener on the window that was looking specifically for clicks and if those clicked items matched a “data-route” that I had set up.

I soon learned that I needed an additional set up to listen for an input so that I could grab the value. When the input value is entered it then displays it for the user to see live changes to their amounts.

I revisited my initial set up so that it could listen for clicks on buttons ID classes to then do the appropriate function.

I worked through some blockers and was able to build the base version of my app that accomplished the goal I had set out at the very beginning. Take an amount, calculate a tip percentage, split it by an amount of people and share the amount to the user.

Now that some style is in place, the information is displayed to the user, and the base path was set up, it was time to get some feedback to see some paths I may not have considered.

Feedback

Although there were a lot of positive interactions with the app, there were some hiccups that caused friction in the user's experience or at least made them second guess themselves.

A big note was that the input fields were not legible, they didn't seem clickable. To compensate for this I added a border and focus changes when typing a value and made the question in the label element more direct and simple. I took some time to add some attributes to the element so that when opened on mobile, it would prompt a number pad similar to a phone contact.

More Feedback

The input range field was originally displayed vertically because I thought it would be more intuitive for the user to adjust their tip amount but it actually hurt their impression more than anything.

Not only was it assumed to be a write in field similar to the other menu but the slider did not read as a slider on the first viewing.

To account for this I added a default value to be presented in the box and returned the slider back to its original horizontal position.

The goal of the site was to be able to calculate the tip for a total but that doesn’t mean a user always wants to tip or give a custom amount. What about a set amount? What about no tip? At this point I reviewed my buttons and tried to analyze more situations the user might go through to give them more options but still in my control.

I also added an edit button so if the group were to split the amount among more or less people, they could go back to the total and adjust the amount of people.

Learning

This project gave me the opportunity to take a look at a simple problem or circumstance and provide a solution for it. This took time to solve all the interworking pieces and functions that would come together to showcase all the proper information.

As a designer I also realize how important it is to give the user an enjoyable experience and make it readable to all on the first go through.

It is my responsibility as the Frontend Developer to shape an enjoyable, functional, and frictionless experience.

Other projects

Just a click away

CRUD

Fighters: CRUD

html

css

php

json

This project uses fighters from the video game Street Fighter and the concept of CRUD to create a database system.

Details
THEME

Theme Challenge

html

css

php

A project taking a templated out structure and crafting it to match an industry standard website. My focus was based on sports news outlets.

Details
PHP

Legends

html

css

php

json

The key points of this project is looping through data, specifc data styling, and a responsive layout for file path.

Details
GARDEN

Layout

html

css

php

This project takes some time to analyze some more complicated layout designs. Combining these together to form a layout garden for viewing.

Details