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 using HTML, CSS and JavaScript.

@Alice-Githui

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


Kindly share feedback on the above submission especially on making the application responsive when making use of bootstrap rows and columns

Community feedback

bunee 2,060

@buneeIsSlo

Posted

Hey! @Alice-Githui, Congrats on completing this challenge! you've done good. Here's a couple of things that I want to suggest...

  • The input fields are missing their SVGs, You can change that by using the background properties like so.
    background-image: url("link to your svg");
    background-position: 5%;
    background-repeat: no-repeat;
    background-size: 10px;
  • Your buttons are missing focus styles which is needed for accessibility.

  • You also need to implement the active style for the buttons. This video shows you one way of achieving that.

  • If you're having trouble creating responsive layouts, I strongly recommend This free course by Kevin Powell. This course should help you gain a better understanding of responsive layouts.

Hope this helps :)

0

@Alice-Githui

Posted

Hey @buneeIsSlo. Thank you for the feedback, and for taking the time to share resources that I can use to improve my skills. Very appreciated.

1

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