Submitted 5 months ago

Tip calculator app

alvarozama•360

@alvarozama

Preview site View code

This is a solution for...Tip calculator app

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Next time I'd like to explore different ways to implement the percentage buttons and the firing of events associated with them. This time I added an event listener to each button through a for loop in order to stor the value of each button and use for further computation of percentages, but this presented some shortcomings that I'll explain below.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was, as I said, keeping track of what percentage button was selected and using its associated value for calculating the percentages. Can't really say that I overcame them since the app, while doing what it has to, it only does so under certain circumstances.

What specific areas of your project would you like help with?

So, here are the parts of the project that I couldn't quite implement in a satisfactory fashion:

In order to retrieve the value of a given selected percentage button, I looped through them and used an event listener to look for clicks on said buttons. However, both the retrieval of this value and the calculatio of percentages were coded inside the same function, meaning that the calculation is only performed when clicking on a percentage button. As a result of this, the app only works when entering values for the bill and people inputs first and then selecting the desired tip percentage.
In line whith the previous point, I wanted to make it so that the calculations were performed in real time as the user enters, erases or changes values. To do this I tried to create different functions for retrieveng the selected bercentage button value and for performing the calculations, bus was unable to make them work in tandem.
Whenever the user selects a percentage button it becomes highlighted, but if the user selects a different one without using the reset button, the newly selected button becomes properly highlighted, put the previous one doesn't go back to the default state. I could't find a way to fix this and feel like the problem lies, again, with the implementation of my functions and event listeners.

Community feedback

RadaidehDaniel•370

@RadaidehDanielPosted 5 months ago

Well done. You already pointed out the challenges you had.

I will help you with the highlight issue.

function highlight() {
    for (let i = 0; i < percentInput.length; i++) {
        percentInput[i].addEventListener('click', () => {
            percentInput[i].style.backgroundColor = "var(--clr-strongcyan)";
            percentInput[i].style.color = "var(--clr-verydarkcyan)";
        })
    } 
}

In this function, you loop over the percentages button to add the highlight style. Similarly, we can loop over them again to remove the style if a button is clicked or the custom input is in focus.

function removeHighlight() {
    for (let i = 0; i < percentInput.length; i++) {
            percentInput[i].style.backgroundColor = "var(--clr-verydarkcyan)";
            percentInput[i].style.color = "var(--clr-white)";
    } 
}

Also, you can use utility classes in CSS, like creating a class called "active" that you can add or remove.

CSS:
.active {
background-color: var(--clr-strongcyan);
color: var(--clr-verydarkcyan);
}

JS:
percentInput[i].classList.add("active")
OR
percentInput[i].classList.remove("active")

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord