@xgunzo
Latest comments
- @Maahnoor
the progress slider has to be styled for firefox separately, that's why it's not showing.
in this case, you don't need to use input tag you can make the bar with simple nested divs
<div id="myProgress"> <div id="myBar"><span class="end-circle"></span>></div> </div>and style it
#myProgress { width: 100%; background-color: var(--VeryDarkBlue); height: 20px; border-radius: 20px; margin: 16px 0 12px 0; }
#myBar { width: 81.5%; background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%)); border: 2px solid var(--VeryDarkBlue); color: transparent; border-radius: 20px; display: flex; justify-content: flex-end; align-items: center; position: relative; } .end-circle{ position: absolute; right:3px; background-color: white; width: 12px; height: 12px; border-radius: 50%; }
you can check my solution for help
Marked as helpful - @Facualemandi@Maahnoor
hi there. great attempt at the challenge. here are a few suggestions:
-to align buttons, set grid-template-columns: repeat(3,1fr); in percentage_tip and then increase the button width to fill the grid according to your preference.
- you aren't supposed to calculate the tip for the waiter, it is to be calculated for the people paying. say the bill is $150 for 3 people dining and they choose 10% tip. the output Tip/person should show total tip (150 x 10/100) divided by number of people (3) and that would be $5 per person. the second output should show how much each person will have to pay (bill/people)+tip per person (calculated earlier) in this it would be $55
-in your js code you have added zeros to the calculated output document.querySelector('.textDiv').innerHTML = a + ',00'; document.querySelector('.secondTextDiv').innerHTML = b + ',00'; this is confusing if the result is in decimals: it shows 7.5,00 if i select 15% tip on a bill of 100 for 2 person. use a.toFixed(2); and b.toFixed(2); this function will limit the decimal to 2 places
- @Iamweird2
- @Robert170304@Maahnoor
hey great job at the challenge
the readme.md file in the project resources say: If the visitor switches the toggle to yearly billing, a 25% discount should be applied to all prices.
so when a visitor toggles the switch the prices shown should be with the discount subtracted. another good practice would be to set a step on the range slide bar since we only have 5 values.
otherwise great job on the design. keep it up
Marked as helpful - @HualDev@Maahnoor
Great job at the challenge
there are ways to design your own radio buttons but a shortcut you could take is this: input[type='radio'] { accent-color: hsl(176, 50%, 47%); } this approach is not supported in some browsers and also the browser adjusts a contrasting colour for legibility read here: https://usefulangle.com/post/389/css-radio-button-color or make your custom button: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_radio
hope it helps
Marked as helpful - P@assiduousdev@Maahnoor
hi, great solution. one thing though, you are calculating total/person wrong. you have to calculate what each person has to pay i.e. their share of the bill+tip.
Marked as helpful
