Skip to content
Submitted over 3 years ago

Tip calculator - html , sass and javascript

Chamu•13,130
@ChamuMutezva
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I had not used the reset before, and tried to use it this time around. Whilst it cleared the inputs automatically, i still have to figure out its proper use as my variables are not being reset - reset.addEventListener("reset", function())

  • where reset is the reset button. Looks like i need to add the eventlistener on the form rather than the reset button Let me know of any bugs and improvement

Community feedback

  • Davide•1,725
    @Da-vi-dePosted over 3 years ago

    Hi Chamu, It looks very good, well done! I did try it and everything works just perfect, on mobile as well, either in Chrome and Firefox. Nothing failed! Happy coding :-)

    Marked as helpful
    0
  • hardy•3,660
    @hardy333Posted about 3 years ago

    Hey everything works great. Nice Job.

    One quite important suggestions:

    • Try to remove invalid outline on inputs if user clears input,
    3
  • Azka•480
    @AzkanorouziPosted over 3 years ago

    hello chamu nice work ! I would be appreciate if you take a look at my solutions and give me your honest advice😊

    1
  • Mariusz Olszewski•360
    @molszewski34Posted about 3 years ago

    Hey can you explain me why you used so many external files .map? It's first time i see something like this and i am curious about it. Why you separated code in so many files in dist folder?

    0
    Chamu•13,130
    @ChamuMutezvaPosted about 3 years ago

    @molszewski34, I used Parcel as a compiler and bundler for the html, css, js and all the other assets. You can find more about parcel here

    1
    Mariusz Olszewski•360
    @molszewski34Posted about 3 years ago

    @ChamuMutezva Thanks for answer. Why you used those tools? What is the purpose of it in this challange and for what kind of projects on this site or others would you recommend it?

    0
    Chamu•13,130
    @ChamuMutezvaPosted about 3 years ago

    @molszewski34 , among other things Parcel is compiling the sass into css as browsers do not understand sass. The dist folder which is production ready is created using Parcel, the files are minified - projects are supposed to load faster. Eg a file which is not minified can be 2mb in size and after minification can be 100kb. As mentioned see the link in the previous communication for the benefits of using Parcel - production.

    0
  • Clément Creusat•1,655
    @ccreusatPosted about 3 years ago

    Everything works fine ! I would add an opacity: 0 or display: none to the input:radio. If I navigate with my keyboard (tab key), it displays the input-radio of the first tip (5%). Quite strange :)

    0
  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago
    • the reset button is failing on my mobile. What did I miss?
    0

Please log in to post a comment

Log in with GitHub

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