A little mini JavaScript project that allows users to work out the cost of a bill, a tip if one was given, and to see how much each person should pay.
- 1.1 Target audience
- 1.2 Visitor goals
- 1.3 Business goals
- 1.4 User stories
- 1.5 Design choices
- 1.6 Wire frames
- 2.1 The Navbar
- 2.2 User Inputs
- 2.3 Action Buttons
- 2.4 Bill Breakdown
- 2.5 Footer
- 2.6 Features Left To Implement
- 3.1 VSCode
- 3.2 HTML5
- 3.3 CSS
- 3.4 JavaScript
- 3.5 Bootstrap
- 3.6 Google fonts
- 3.7 Icons8
- 3.8 Balsamiq
- 3.9 Animate.css
- 3.10 favicon.io
- 4.1 See testing.md document
- 5.1 Deployment
- 5.2 Cloning
- 5.3 Cloning Desktop
- 6.1 Media
- 6.2 Code
- 6.3 Acknowledgements
- 7.1 LinkedIn
- 7.2 Email
- 7.3 Skype
- 8.1 Disclaimer on project
1.User Experience (UX)
- This website is aimed at anyone who wants to workout how much their bill, tip and breakdown per person will be. Initially aimed at bar and restaurant bills but if you find another use for it thats great.
- I want to be able to workout how much a percentage tip will be in currency value and also the breakdown per person owed.
- No business or monetary goals, just a user friendly tool that lets users workout and breakdown their bills in a few clicks.
- As a visitor to the company website i expect/want/need
- I kept this project nice and simple, to give it a more pleasing aesthetic i added some animated icons and a little bit of colour ot the input and output fields. The project is a simple tip calculator so no need to over complicate it.
- I decided i would use the Google fonts Baloo Bhaijaan 2 Baloo Bhaijaan 2 is a perfect blend of pointy paws in a coat of fur, Baloo is an affable display typeface by Ek Type. Available in nine Indian scripts plus Arabic along with a Latin counterpart, the family is Unicode compliant and libre licensed.
- I decided i would use Icons8 icons for the project. Icons8 has a wide range of colorful and animated icons that are free to use.
- The main colour pallet for the project can be found below.
- I kept the colour palette simple, a white background with black text. The icons are all cartoon type and coloured. The user inputs have been coloured in a beige colour and the output fields have been coloured in grey so they user can see at a glance these are not adjustable. The action button to calculate the bill is the standard bootstrap success green. The reset calculator button is plain black.
- The wireframes for the project can be seen below. There is a wireframe for desktop, tablet and mobile.
2. Features
- The Navbar is a very basic bootstrap Navbar that just holds the tip logo and the name of the site which is Tip Calculator. On mobile devices the logo and the site name will always stay centered. As the site is just a single page there is no need for a mobile hamburger menu
- The user only has 3x inputs to work with. Total bill, Tip percentage they wish to leave, and the number of people who will split the bill. All of the input fields are number only fields to stop users inputting letters in. The number of people field also only accepts whole numbers so users cant input a decimal field and input something like 2.5 people will split the bill.
-
There are 2 buttons for the user to interact with. The first one will trigger the calculation once the user has added all of the inputs into the input field. The second button will reset the calculator incase the user wishes to start all over again.
-
Note: The user doesn't have to reset the entire calculator if they wish to change something after a breakdown has been given. If they wish to change something they can just adjust one single field and press the Do the maths button and the calculation will run again.
- The bill breakdown section lets the user know the total bill amount (Including tip), the value of the tip, and finally how much each person owes. These input fields have been disabled so users are unable to alter or adjust the information that gets displayed.
- The footer contains the basic information on the site and the copyright.
-
I may add an ability for users to look at splitting the bill as a percentage as well as having the option to split it evenly. With this feature a user could say person 1 will pay 30% of the bill, person 2 will pay 20% of the bill, and person 3 will pay 50% of the bill.
-
Also when people go for dinner it is not uncommon for people who are drinking alcohol to separate their bill from the food, so i may add a feature where people can add the food and the drink separate.
3. Technologies/Languages Used
3.1 VSCode - Is the IDE i used for this project
3.2 HTML5 - Hypertext Markup Language - This is the markup language i used for this project.
3.3 CSS - Cascading Style Sheet - I used CSS to help alter and adjust the presentation of the website to create a pleasant user experience.
3.4 JavaScript - JavaScript was used to do the mathematics to give the user the full breakdown
3.5 Bootstrap - Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Bootstrap 5 is the version i used for the development of this project.
3.6 Google fonts - Launched in 2010 Google Fonts is a library of 1,023 free licensed font families.
3.7 Icons8 - You can see a short YouTube video about Icons8 by clicking Here.
3.8 Balsamiq- Balsamiq Wireframes is a rapid low-fidelity UI wireframing tool that reproduces the experience of sketching on a notepad or whiteboard.
3.9 Animate.css - Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
3.10 favicon.io - Favicon.io is the free favicon generator i used for the project
5.Deployment
To deploy the site on Github i undertook the following steps:
- Navigated to my profile page on Github
- Selected this project from the repositories
- Clicked on settings
- Scroll down to the Github pages section
- Click where is says source and in the dropdown menu select master
- Click on the next dropdown menu to the right select /(root)
- Click save
You will then receive a confirmation saying the page has been published and also be provided with the link where people can view your site.
The link to view the live site can be found by clicking Here
You can clone the projects repository to your local computer by following the steps below:
Cloning a repository using the command line
- On github navigate to the project repository. The link can be found here: https://github.com/smcgdub/JS-Tip-Calculator
- Click on the tab that says < >code
- Above the files, click the button that says ↓code
- From the menu select HTTPS
- Click on the clipboard icon on the right hand side (Image below)
- Open the terminal in your IDE
- Change the current working directory to the location where you want the cloned directory.
- In terminal type
git cloneand then paste the URL you copied earlier - Press Enter to create your local clone.
You can also clone the project using Github Desktop. To do this you can do the following:
- Download Github Desktop if you do not already have it installed. The link can be found here Github Desktop
- Sign in to GitHub and GitHub Desktop before you start to clone.
- On github navigate to the project repository. The link can be found here: https://github.com/smcgdub/JS-Tip-Calculator-
- Click on the tab that says code
- Above the files, click the button that says ↓code
- Click open with GitHub Desktop to clone and open the repository with GitHub Desktop.
- Click Choose... and, using the Finder window, navigate to a local path where you want to clone the repository.
- Click clone
6.Credits
- All of the icons i used for the project were from Icons8. All credit for these icons goes to Icons8
- All of the code in the project i have written myself
7.Contact
Feel free to contact me on any of the following channels:
8. Contact
- 8.1 This website and all of its content is for educational purposes only. There is no monetization generated from this site.