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
- Semantic HTML5 markup
- Sass and CSS modules
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
I didn't previously know the property for changing the cursor's color within an input element.
$primary-color: #26c0ab;
input {
caret-color: $primary-color-1;
}
Something I'm planning to keep on working is creating more reusable components.
- How to start a React app - A step-by-step guide on how to start a React application.
- Sass folder structure for React - This is an amazing article which helped me structure my project.
- Setup the correct version for Node Sass
- Github - Juan Hamilton
- Frontend Mentor - @hamilton-i7