Desktop Design

Active States

Mobile Design

Tip calculator app

="17.0.8"><main _ngcontent-ng-c451331186=""><div _

331186=""><div _ngcontent-ng-c451331186="" class="calculator-frame"><h1 _n

or-frame"><h1 _ngcontent-ng-c451331186="" class="page-heading"><span

-heading"><span _ngcontent-ng-c451331186="" class="d-block">spli</

pli</span><span _ngcontent-ng-c451331186="" class="d-block">tter</

span></h1><div _ngcontent-ng-c451331186="" class="calculator"><app-c

835661-0"><form _ngcontent-ng-c4254835661="" novalidate="" id="tip-form" class="ng-tns-c4254835661-0 ng-untouched ng-pristine ng-invalid"><secti

-invalid"><section _ngcontent-ng-c4254835661="" class="form-section form-group ng-tns-c4254835661-0"><div _

835661-0"><div _ngcontent-ng-c4254835661="" class="d-flex align-items-center flex-wrap mb-1 ng-tns-c4254835661-0"><label

835661-0"><label _ngcontent-ng-c4254835661="" for="bill-input" class="form-section__label mr-auto pr-3 ng-tns-c4254835661-0"> bill

---></div><div _ngcontent-ng-c4254835661="" class="form-group__input-wrapper ng-tns-c4254835661-0"><input

835661-0"><input _ngcontent-ng-c4254835661="" type="number" name="bill" id="bill-input" placeholder="0" formcontrolname="bill" required="" class="form-group__input input ng-tns-c4254835661-0 ng-untouched ng-pristine ng-invalid"><div _

-invalid"><div _ngcontent-ng-c4254835661="" aria-hidden="true" class="ng-tns-c4254835661-0"><svg _

835661-0"><svg _ngcontent-ng-c4254835661="" xmlns="http://www.w3.org/2000/svg" width="11" height="17" class="ng-tns-c4254835661-0"><path

835661-0"><path _ngcontent-ng-c4254835661="" fill="hsl(var(--clr-neu-400))" d="M6.016 16.328v-1.464c1.232-.08 2.22-.444 2.964-1.092.744-.648 1.116-1.508 1.116-2.58v-.144c0-.992-.348-1.772-1.044-2.34-.696-.568-1.708-.932-3.036-1.092V4.184c.56.144 1.012.4 1.356.768.344.368.516.816.516 1.344v.288h1.824v-.432c0-.448-.088-.876-.264-1.284a3.783 3.783 0 00-.744-1.116A4.251 4.251 0 007.54 2.9a5.324 5.324 0 00-1.524-.492V.872H4.288V2.36a5.532 5.532 0 00-1.416.324c-.448.168-.84.392-1.176.672-.336.28-.604.616-.804 1.008-.2.392-.3.844-.3 1.356v.144c0 .96.316 1.708.948 2.244.632.536 1.548.884 2.748 1.044v3.912c-.704-.16-1.248-.472-1.632-.936-.384-.464-.576-1.08-.576-1.848v-.288H.256v.576c0 .464.08.924.24 1.38.16.456.404.88.732 1.272.328.392.744.728 1.248 1.008s1.108.476 1.812.588v1.512h1.728zM4.288 7.424c-.688-.128-1.164-.332-1.428-.612-.264-.28-.396-.644-.396-1.092 0-.464.176-.832.528-1.104.352-.272.784-.448 1.296-.528v3.336zm1.728 5.712V9.344c.768.128 1.328.328 1.68.6.352.272.528.688.528 1.248 0 .544-.196.984-.588 1.32-.392.336-.932.544-1.62.624z" class="ng-tns-c4254835661-0"></path

</section><section _ngcontent-ng-c4254835661="" class="form-section ng-tns-c4254835661-0"><div _

835661-0"><div _ngcontent-ng-c4254835661="" class="d-flex align-items-center flex-wrap mb-1 ng-tns-c4254835661-0"><span

835661-0"><span _ngcontent-ng-c4254835661="" id="tip-listbox" class="form-section__label mr-auto pr-3 ng-tns-c4254835661-0"> selec

---></div><ul _ngcontent-ng-c4254835661="" role="listbox" tabindex="0" aria-labelledby="tip-listbox" class="listbox ng-tns-c4254835661-0"><li _n

835661-0"><li _ngcontent-ng-c4254835661="" role="option" class="listbox__option ng-tns-c4254835661-0 ng-star-inserted" aria-selected="false"> 5% </

> 5% </li><li _ngcontent-ng-c4254835661="" role="option" class="listbox__option ng-tns-c4254835661-0 ng-star-inserted" aria-selected="false"> 10% <

10% </li><li _ngcontent-ng-c4254835661="" role="option" class="listbox__option ng-tns-c4254835661-0 ng-star-inserted" aria-selected="false"> 15% <

15% </li><li _ngcontent-ng-c4254835661="" role="option" class="listbox__option ng-tns-c4254835661-0 ng-star-inserted" aria-selected="false"> 25% <

25% </li><li _ngcontent-ng-c4254835661="" role="option" class="listbox__option ng-tns-c4254835661-0 ng-star-inserted" aria-selected="false"> 50% <

li><li _ngcontent-ng-c4254835661="" role="option" class="listbox__option listbox__option--custom ng-tns-c4254835661-0"><input

835661-0"><input _ngcontent-ng-c4254835661="" type="number" name="tipPercent" id="custom-tip-input" placeholder="Custom" formcontrolname="tipPercent" class="input ng-tns-c4254835661-0 ng-untouched ng-pristine ng-valid"></li><

</section><section _ngcontent-ng-c4254835661="" class="form-section form-group ng-tns-c4254835661-0"><div _

835661-0"><label _ngcontent-ng-c4254835661="" for="nop-input" class="form-section__label mr-auto pr-3 ng-tns-c4254835661-0"> numbe

"> number <span _ngcontent-ng-c4254835661="" class="text-lowercase ng-tns-c4254835661-0">of</sp

835661-0"><input _ngcontent-ng-c4254835661="" type="number" name="nop" id="nop-input" placeholder="0" formcontrolname="nop" required="" class="form-group__input input ng-tns-c4254835661-0 ng-untouched ng-pristine ng-invalid"><div _

835661-0"><svg _ngcontent-ng-c4254835661="" xmlns="http://www.w3.org/2000/svg" width="13" height="16" class="ng-tns-c4254835661-0"><path

835661-0"><path _ngcontent-ng-c4254835661="" fill="hsl(var(--clr-neu-400))" d="M9.573 7.729c.406 0 .784.07 1.126.209.342.14.639.33.881.569.232.227.438.503.614.82a5.1 5.1 0 01.407.949c.097.312.178.654.242 1.016.062.359.105.699.126 1.011.02.307.031.624.031.945 0 .836-.259 1.512-.768 2.01-.504.492-1.17.742-1.98.742H2.748c-.81 0-1.477-.25-1.98-.742C.259 14.76 0 14.084 0 13.248c0-.322.01-.64.032-.945.02-.312.063-.652.126-1.01.063-.363.144-.705.242-1.017.1-.323.238-.643.407-.948.176-.318.382-.594.613-.821.243-.238.54-.43.882-.57.342-.138.72-.208 1.125-.208.16 0 .313.067.61.265.183.123.397.264.636.421.204.134.48.259.822.372.333.11.671.167 1.005.167a3.19 3.19 0 001.006-.167c.341-.113.618-.238.822-.372l.636-.42c.296-.2.45-.266.61-.266zM6.598 0C7.63 0 8.522.38 9.252 1.129s1.1 1.666 1.1 2.724c0 1.06-.37 1.976-1.1 2.725-.73.75-1.623 1.13-2.654 1.13-1.03 0-1.924-.38-2.653-1.13-.73-.749-1.1-1.666-1.1-2.725 0-1.058.37-1.975 1.1-2.724C4.675.379 5.567 0 6.598 0z" class="ng-tns-c4254835661-0"></path

540527=""><section _ngcontent-ng-c2917540527="" class="ng-star-inserted"><dl _n

inserted"><dl _ngcontent-ng-c2917540527=""><div _

540527=""><div _ngcontent-ng-c2917540527="" class="d-flex justify-content-between align-items-center mb-4"><dt _n

ter mb-4"><dt _ngcontent-ng-c2917540527=""><span

540527=""><span _ngcontent-ng-c2917540527="" class="output">tip am

unt</span><span _ngcontent-ng-c2917540527="" class="per">/perso

span></dt><dd _ngcontent-ng-c2917540527=""><outpu

540527=""><output _ngcontent-ng-c2917540527="" for="bill-input nop-input" form="tip-form">$0.00<

/dd></div><div _ngcontent-ng-c2917540527="" class="d-flex justify-content-between align-items-center mb-4"><dt _n

540527=""><span _ngcontent-ng-c2917540527="" class="output">total<

tal</span><span _ngcontent-ng-c2917540527="" class="per">/perso

/div></dl><button _ngcontent-ng-c2917540527="" type="reset" form="tip-form" class="reset-btn text-uppercase d-block text-center">reset<

Design comparison

Please log in to post a comment

Tip Calculator App With Angular

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community