Skip to content
Submitted over 2 years ago

Tip calculator app | html/scss/js

Rémy Boiré•350
@remyboire
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 strugglled a lot with the scss part because of the diversity of inputs and special cases. I think that my structure is far from optimal and maintenance should be hard! Any advice on that point are welcome. I really liked the javascript part and I learned how to deal with inputs value as it was my first time. On the inputs, I didn't manage to get the outline correctly on safari. Does anyone know the tricks?

Community feedback

  • Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Awesome work with this challenge. Looking at your solution, I think you should know the following as well…

    • This line <div class="attribution"> can be wrap with footer tag or placed it inside the main tag
    • With the Sass, to make it more readable, break the parts into individual files. For instance, new file for variables, media queries and contents which would be easier to debug

    Other than that...

    • Proper usage of semantic tags
    • The HTML structure is well organized and readable
    • The JS functionality is working accordingly
    • Good job in using Sass for styling, the compositions are looking great!
    • The hover state of the design is properly done
    • The project is responsive and utilized the details based on the original design
    • Well done in putting description on the JS file

    Above all, the project is well implemented. Keep up the good work!

    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