Table of contents

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

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


Links

• Live Site URL: Visit the App

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• JavaScript DOM

What I learned

While doing this project I came across a lot of problems. Majority of those problem was JS related. I solved all of those. I got some hand on practice on JS DOM.

So it can be said that, Updating the UI with JS DOM and using JS Function to do so was the key learning for me.