For #Day 4, after learning several more JavaScript topics, I decided to step away from my course a little to try a real project from scratch.
So I picked up this project from Frontend Mentor to get my hands dirty.
However, for today, I was only able to complete the HTML and CSS. Will continue with the Javascript section tomorrow.
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.
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Media Queries for responsiveness
- JavaScript
What I learned
I learned to dynamically render the Select Tip part of the ui with JavaScript. My initial challenge was how to render the Custom input which was different from the buttons but with some google research, I was able to get that done.
I also learned to place the $ icon on the Bill input with HTML data-attribute and CSS pseudo-class.
Continued development
To complete this project:
- I'll be adding relevant states to the button and input components.
- I'll be writing the JavaScript functions to ensure the data are dynamically rendered and the Tip Calculator works as expected.