Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Tip calculator

@Satyam-Pandey677

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

none

What challenges did you encounter, and how did you overcome them?

none

What specific areas of your project would you like help with?

none

Community feedback

@Ridwan10000

Posted

@Satyam-Pandey677 Congratulations on completing the project. You have created a nice design. Just a few remarks:

  • It would be nice if you had used a <main> tag. It's important for SEO purpose.
  • You should use <label> instead in these lines: 17 and 30. Using <p> tag here would decrease the accessibility.
  • Also You should use <form> tag to take all those inputs. Also It could be coded such way that you will need less lines of code in JS to reset everything. <button type="reset"> is used to reset the form inputs. To avail its functionality You must include this inside your form. So your code could be wrapped into two <div>s and the are themselves wrapped inside the <form> tag. I mean the following code
<body>
    <main>
         <form>
            <div>
               <!-- You will use this div to take inputs -->
            </div>
            <div>
                <!-- You will use this div to show results.
                 Using two divs will help you to switch between mobile device to desktop 
                 design using grid layout. -->
                  <button type="reset">RESET</button>
            </div>
        </form>
   </main>
</body>
0

Please log in to post a comment

Log in with GitHub
Discord logo

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