Frontend Mentor - Tip calculator app solution

This is my solution to Frontend Mentor's Tip calculator junior level challenge

Table of contents

• Overview
  • The challenge
• My process
  • Built with
  • What I learned
• 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

Links

• Solution
• Live Site

My process

Built with

• HTML5
• CSS Flexbox/Grid
• Mobile-first workflow
• Vanilla Javascript

What I learned

I learned so many ways to manipulate the DOM based on the eventlistener's outcome and even learned newer ways of targetting parent elements and close elements. I did not end up using some of them but it was a great way to learn about these specific method's existence. The app was certainly a great challenged to learn from, and I plan to redo a similar app at some time in the future.

Author

• Website - JDBucog
• Frontend Mentor - @Kijimai