Skip to content
Submitted over 2 years ago

Tip App Calculator using HTML SASS and JS

Shann Timothy•160
@ShannTimothy22
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

Hi guys, This is my first time using CSS preprocessor (SASS), if there's any suggestion or advice about it I'll really appreciate it, there's some question that I'm still confused, for example :

  1. I watched a tutorial about making a separate file for the responsive part, but when I tried it, the media queries is at the top of the other CSS so it doesn't work, how do I make it that it appears in the bottom part of CSS ?

  2. When there's many type of color is it better to declare it on a map or just declare it one by one ?

Once again any advice or suggestion are very appreciated, Thanks !!

Community feedback

  • Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted over 2 years ago

    Your solution looks great and closer to the design. To help you with the sass thing.

    • Whenever you use the @use or import a sass partial or a file. You must import them in other of importance or** merits**.

    • You can learn more about sass folder structures and all that on YouTube I recommend kelvin powell and a video called #7 Sass best practices on YouTube.

    1. To help you with the accessibility issue you are having. There should be main semantic tag in your solution. Wrap your card in a <main> or change the parent div of your card into main

    2. On smaller mobile your card don't have any margins around so it spans across the screen. I think you forgot about adding margins around the card. Hope this was helpful.

    Besides great job there👍 Happy coding and have a nice weekend👍💻

    Marked as helpful
    1
    Shann Timothy•160
    @ShannTimothy22Posted over 2 years ago

    @Kamasah-Dickson Hi there, thanks for the feedback and advices !! I'll make sure to fix the issues 👌

    Hope you have a great day 😁

    0
    Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted over 2 years ago

    @ShannTimothy22 am glad you successfully fixed the issue😀 Keep coding man💻 am always here if you need help with something😀👍

    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