Amonā¢ 2,560
@A-amon
Posted
Hello! Great job~ š
Here are few suggestions:
- Use
button
orradiobutton
elements for the tip selection (Screen reader users won't know it's to be clicked if you use adiv
. - Change the
RESET
text toReset
. Find out more here š - Instead of using
innerHTML
for the texts, an alternative would betextContent
. 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