Submitted

Tip calculator solution using Angular and Bulma

Solution by
Desktop design screenshot for the Tip calculator app coding challenge
This is a solution for...

Tip calculator app

View Challenge

Design Comparison

SolutionDesign

Report

  • 8Accessibility
    issues

  • 19HTML
    issues

View Report

Caye's questions for the community

I would like to get feedback more on the functionality as this is my first time using Angular! (I'm primarily a React developer)

  1. How to do global state management — For storing inputs and calculated results, I used a service and observables as stated in this guide, but I feel like how I implemented it myself is too complicated. How is global and local state usually managed in Angular?

  2. How to subscribe to changing values — Preferably, I would've stored just the inputs in the global state, and not the calculated results (because they are just derived values). But I haven't found a way for my display-screen component to subscribe to inputs, and recalculate results -> store in local state every time they change. In React, I would've done this by calling state from (app) Context, then use (local) useEffect to track changes and recalculate as needed. I haven't found the "Angular way" to do this yet. So my results are stored globally, and it recalculates and restores data in the service itself. Are there alternatives to what I did?

  3. Form validation — In my past React projects, I've used Formik and Yup to validate forms. What's the usual for Angular projects with lots of forms?

  4. Weird first render — My deployed site shows the vanilla index.html (no formatting) for a split second then becomes OK after. Any leads if this is a Netlify or Angular or code optimization thing? 😅

Any feedback (even the visual/CSS parts) are well-appreciated! I'm also new to Typescript too so please be kind :( Thank you so much 🤗

Slack logo

Join our Slack community

Join over 75,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!