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.
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