Skip to content
OverviewSolutions
8
Comments
2
Larry
@ljcutts

All comments

  • Aayush Juyal•290
    @aj12-houdiniSubmitted over 2 years ago

    This was an extremely difficult challenge for me. It took me a really long time to design the slider and make the page responsive. I was wondering how do you guys approach the problem of making a page responsive. What are the major areas do I need to consider when making a page responsive. Also, do I have to focus on every little detail while making the page responsive, for example, do I keep the same font-size on both a large screen and a small screen or do I reduce the font-size on the small screen to create more space.

    Reponsive interactive pricing component

    2
    Larry•190
    @ljcuttsPosted over 2 years ago

    Hey Aayush, well done! This is a nice solution. In terms of responsive, you must mean making the frontend compatible for different devices like the desktop or the phone. Not sure if you did this, but most people work on the mobile-version first and then work on the desktop version. Usually what helps with making different versions of the app is constraining the size of the divs and containers with css properties like "max-width" and "min-width". In terms of the font-size, I think it depends on how the design looks, but usually I'm pretty sure the font-size is going to change depending on the version of the app. This is also the case with changing the css properties with html elements in general to fit the app design.

    0
  • Diego Imperiano•60
    @DiegoImperianoSubmitted almost 3 years ago

    I used pure CSS and pure JavaScript in this application to practice the basics of programming. Any constructive criticism will be very welcome to improve this application in the future.

    css(puro) e JavaScript(puro)

    1
    Larry•190
    @ljcuttsPosted almost 3 years ago

    Nice work! First for the tip calculator title, I would have used the logo.svg that was given to you in the image folder. I would also work on trying to center the whole tip-calculator container as it is on the original design. Maybe add some heavier weight to your font? I'm not sure what the R is there for in terms of the currency. As far as the 'No Tip" button, it should say "Custom" meaning the user can put in any tip% they want, say for example 11. On the desktop version on the left side with the bill inputs, I would probably add padding at the bottom to give some spacing like you have on the right side. For the mobile version, I would constraint the width(max-width, min-width) of the app more so that it doesn't keep adjusting as you make your computer window bigger. As far as the total amount for the calculations, it should be the bill + the tip amount. For example, if the bill is $100 and the tip amount is $25, the total should be $125. Hope this helps!

    Marked as helpful
    0