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.
This was a very nice challenge. Took me a while due to the javascript functionality that had to be integrated into the app, but overall it's a good challenge for any aspiring web developer who would like to get their feet wet with javascript.
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
As always, I work with a mobile first workflow So:
- I first analyze the designs, both the desktop and mobile designs.
- Then I identify how the breakpoints for the mobile design and the desktop design will work, to understand how to structure the html
- Then I write the html for the project, add the styles for both mobile and desktop
- Then add the javascript funtionality
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I have learned alot from this project, first thing being, it is not easy, but with practice and consistency, I will get there. Also, javascript is what brings our websites to life, making them interactive, and I am happy to learn and work on more projects with the awesome power of javacript.
I have also learned how to validate user input using custom error messages in js, by using the concept of adding and removing specific classes in the html elements
From here on out, I want to continue learning and practicing with javascript, so I'll try to complete a javascript project every other day.
- Github - munyite001
- Frontend Mentor - @munyite001
- Twitter - @emunyite