Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Tip Calculator App made with HTML, CSS & JS

#jss
veronicaā€¢ 20

@vtorre90

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can I improve my JS code?

Community feedback

Amonā€¢ 2,560

@A-amon

Posted

Hello! Great job~ šŸ˜€

Here are few suggestions:

  • Use button or radiobutton elements for the tip selection (Screen reader users won't know it's to be clicked if you use a div.
  • Change the RESET text to Reset. Find out more here šŸ˜€
  • Instead of using innerHTML for the texts, an alternative would be textContent. You can read about their differences here. But for this current use case, both can be used. šŸ˜‰
  • For the tip buttons' event listeners, there seems to be lots of repeated code. In this case, you can use a single function for them all. For example:
for(const tipBtn of tipButtons){
 tipBtn.addEventListener('click', handleTipClick)
}
const handleTipClick = (event) => {
            let tipValue = 1  // Change it to whatever the default tip value is
            const selectedTip = event.target.value
            if(selectedTip === '5%'){
              tipValue = 5
            }
            let totBill = Number(inputBill.value)/100*tipValue
            let totPeople = Number(nrPersone.value)
            totTipOutput.innerHTML =(totBill/totPeople).toFixed(2) + "ā‚¬"
}

The code above is written with the assumption that radio buttons are used šŸ˜‰. Also, it might or might not work but, the general idea is there. šŸ˜€

Marked as helpful

0
veronicaā€¢ 20

@vtorre90

Posted

Thank you for the suggestion, I was looking for a way to shorten my code šŸ˜ and you give me a great solution! Regarding the RESET comment is also interesting, I learn something absolutely new šŸ™

0

Amonā€¢ 2,560

@A-amon

Posted

@vtorre90 Glad to help~ šŸ˜€

0

Please log in to post a comment

Log in with GitHub
Discord logo

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