Skip to content
OverviewSolutions
31
Comments
7
noor
@Maahnoor

All comments

  • noor•540
    @MaahnoorPosted over 2 years ago

    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
    1
  • Facundo•100
    @FacualemandiSubmitted over 2 years ago

    Hello, how do you see the page on the desktop and in the mobile version?

    • And how do you see my code in Javascript?

    -If you can leave an opinion on the page and mainly on the Javascript code, which is what I am dedicating the most to, I would appreciate it, Thank you! Hello, how do you see the page on the desktop and in the mobile version?

    • And how do you see my code in Javascript?

    -If you can leave an opinion on the page and mainly on the Javascript code, which is what I am dedicating the most to, I would appreciate it, Thank you!

    Tip Calculator App

    1
    noor•540
    @MaahnoorPosted over 2 years ago

    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

    0
  • noor•540
    @MaahnoorPosted over 2 years ago

    hey good job, the page view count is also supposed to change with the bill amount

    here is an article that might help with your problem

    Marked as helpful
    0
  • Robert Macwan•160
    @Robert170304Submitted over 2 years ago

    i try a lot to make this project exactly same as challenge but i can't please help me to make this better by giving your suggestions, opinions and feedback everything. And tell me where i'm wrong where i am good, how can i improve it?

    Interactive pricing component

    1
    noor•540
    @MaahnoorPosted over 2 years ago

    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
    0
  • HualDev•850
    @HualDevSubmitted almost 3 years ago

    I'd like to know your comments to improve my skills.

    I'd like to know how to change the color of a radio button when it is checked, I've tried but I didn't get it.

    Crowdfunding with JS Vanilla

    1
    noor•540
    @MaahnoorPosted almost 3 years ago

    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
    0
  • noor•540
    @MaahnoorPosted almost 3 years ago

    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
    0
  • noor•540
    @MaahnoorPosted almost 3 years ago

    hi, great solution, perfectly matches the design. Looking at your code it seems you designed the website for mobile and then added media queries for larger screen sizes. is there an advantage to this? I am new to web development and have been doing it the other way around. will appreciate an explanation :)

    Marked as helpful
    1