This is a solution to the Tip calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

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

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

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow
• JavaScript ES6+

Basically I grinded my HTML & CSS & JS skills. In CSS most trouble causing for me was grid - learned it a lot. Next thing in CSS that I learned is selectors, I thought I understand it, but the truth was slightly different. In JS I had a lot of trouble about form validation I learned that if I use

someFormElement.reset();

and I have event listener, listening for 'change' it doesn't actually cause any change event so I need to do it 'manually'. I started adding a lot of comments in my JS - it improves readability a lot! I know that JavaScript side of this project is weakest, I will improve and change this project in future.

In future I will definetly focus on JavaScript side form validation - I haven't learned a lot about it --- need to make it up. I still need to learn about JavaScripts' paradigms - I like a lot the functional paradigm.

• MDN - Syntax, syntax, syntax!
• CSS tricks - CSS tricks are just awesome, if You dont understand on MDN here u will definetly understand it!
• StackOverflow - If you don't understand something about your code here You will have answers.

• Website - Szymon Dolnik
• Frontend Mentor - @Haxikowy