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

Reports

Accessibility report (8)
warning

Document should have one main landmark

<html lang="en">
Learn more
warning

Page should contain a level-one heading

<html lang="en">
Learn more
warning

All page content should be contained by landmarks

<label for="bill" class="label is-flex"><p class="is-flex-grow-1">Bill</p><!----></label>
Learn more
warning

All page content should be contained by landmarks

<input type="number" step="any" min="1" placeholder="0" name="bill" class="input is-medium has-text-right has-text-weight-bold">
Learn more
warning

All page content should be contained by landmarks

<div class="field">
Learn more
warning

All page content should be contained by landmarks

<label for="numberOfPeople" class="label is-flex"><p class="is-flex-grow-1">Number of People</p><!----></label>
Learn more
warning

All page content should be contained by landmarks

<input type="number" step="1" min="1" max="100" maxlength="3" placeholder="0" name="numberOfPeople" class="input is-medium has-text-right has-text-weight-bold">
Learn more
warning

All page content should be contained by landmarks

<div _ngcontent-ugg-c14="" class="column">
Learn more

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 log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

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