Introduction :
I have built my first Tip Calculator App. I chose this project so, that practice my HTML , CSS and Java Script knowledge.I wanted to enhance my confidence on them but it should be something meaningful. then I decided to take help form the Fronted Mentor for getting more clarity over what to build. that's how I end up with this project. Here I have gotten one understanding that when you are stuck it's okay to ask for the help because it reduce your confusion and think clearly.
Features of the Tip Calculator :
In this app there are total three inputs. first is for the user input, second is input for the number of people and third and especial input is custom button.output section it will going to calculate the given input. as for the custom percentage input it takes the give the user to use their own percentage value.
I have not added any especial condition yet because right now I am going with the simple which is make it work first and then make it robust.
How I Built the Logic (JavaScript Explanation) :
For make this calculator work according to my desire so, the first logic I think of that was first take the user input as a main number and then there are around five different button which has a fixed percentage value which will going to use and get apply on the user input which will going to give the total amount and tip amount. the last button is a custom input which is also use for the user input as a percentage .
if ((!isNaN(billValue) && !isNaN(numberOfPeople)) || numberOfPeople < 0) {
// calculate the Total Tip amount of the calculate value
const totalTipAmount = billValue * (percentage / 100);
// calculate the tip amount per person
const tipPerPerson = totalTipAmount / numberOfPeople;
// calculate the total amount of the calculate value
const totalPerPerson = (billValue / totalTipAmount) * numberOfPeople;
my next will to make my function work more re-finely and then going to add more condition so that it will react or take only those input which is valid for the app's calculating work.
Challenges I Faced :
When first I started to make my function. I thought which occur in my mind which was how logic should be of this function. How to do it, how to start this and how to make the responsive over each every break points. There was a movement when I was doing overthinking for the conditions, and then I decided to go with the basic step which was to create semantics structure for the project. Main focus to give them the proper and meaningful name. So that I do not get confusion while creating the CSS and HTML design and after completing my semantics. After this I decided to go with JavaScript and then CSS, because when I complete the design I feel that the work is done. My function will not get the proper attention. so, when I started my CSS design I first completed JavaScript function and then, thought to go with the common design for the different devices, but in the half way of creating my project I realize that if I do that then I will make things repeat and that will make my code harder to read and maintain. I went with the mobile first approach and then I used the media query for the desktop design.
What I Learn from This Project :
While working on this project I understand how to create semantics structure and keep them in one box. so, that the placement of the content do not scattered. With CSS I got more clarity, which I've got while creating my first and the most fun part was when I was getting the more clear as I was moving forward in this project's designing.
I think there are few more modification can be done. Because the function isn't robust yet. It still lack a lot condition which are the very important factor for making this project look more reliable and efficient. which my next step towards this project to make this more re-fine and give it more clarity.
Conclusion & Next Steps :
This project was important for me because when you are learning something you always have the craving either for the feedback or sense of satisfaction. Which drives you to look forward to try something new and do not stay the same place.That was my reason for go with project to try what I have learnt till now, how much understanding I have and where I am still confusion. I want to get my answers WHY it is not working? and for this answers built project is the best way figure it out, and now my next step will to make my more robust and add more condition.
My approach with this project is to make it work first and then make it better.
“I would love feedback and suggestions from the community.
Advice over this blog and my project.
Top comments (0)