Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Tip calculator solution using Angular and Bulma

Caye 20

@cayeborreo

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View Challenge

Design Comparison

SolutionDesign

Report

8

Accessibility Issues

19

HTML 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 🤗

Community Feedback

Please focus on giving high-quality, helpful feedback and answering any questions cayeborreo might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

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