Hi! 👋 This is a solution (I submitted it here) to the Tip calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
I'm currently looking for work opportunities, and I see that most of the roles for web dev (if not React, which I'm already familiar with) actually use Angular! So I wanted to try my hand at it.
At the same time, I'm expecting frontend challenges and tests soon, so I Googled that—"frontend challenges"—and came across Frontend Mentor. It's the perfect place to look for project starters. Sure, I finished the Angular sample cart app, but getting my hands dirty on this calculator app really made me review Angular concepts and how-to's.
It is by no means perfect! That's why this repo is up here—for a show-and-tell, and of course, getting feedback on how I can improve 🤗
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
- Live Site URL: tip-calc.caye.codes
- Solution URL on Frontend Mentor: Tip calc using Angular and Bulma
- Angular and Typescript
- Bulma
- Flexbox
- Mobile-first workflow
Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.
To see how you can add code snippets, see below:
<h1>Some HTML code I'm proud of</h1>.proud-of-this-css {
color: papayawhip;
}const proudOfThisFunc = () => {
console.log("🎉");
};Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.
- Example resource 1 - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
- Example resource 2 - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.
This project was generated with Angular CLI version 12.1.1.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
- Website - Caye Borreo
- Frontend Mentor - @cayeborreo
- Twitter - @mcborreo
This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.