Frontend Mentor - Tip calculator app solution

This is a solution to the Tip calculator app challenge on Frontend Mentor.

Links

• Solution URL: Project Github Link
• Live Site URL: Bill Splitter App

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Calculate the correct tip and total cost of the bill per person

Screenshot

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

What I learned

I had a great learning of DOM, since it involved capturing of different input and updating the tip and total bill amount per person. Also made efforts to know about the event listeners in detail. I wasnot sure how to make a custom styled input, had a little understanding around styles for input.

Useful resources

• Reset without using form - I wasn't sure how to make a custom reset button. I became where how to rest values of inuput area and display area.
• W3 Schools DOM - Refered working of DOM
• W3 Schools Event Listener - Refered working of Event Listener.

Author

• Frontend Mentor - @mmubashshir
• Github - @mmubashshir
• Twitter - @MubashshirMir