Desktop Design

Active States

Mobile Design

Tip calculator app

<div id="headerDiv">
      <p id="header">SPLITTER</p>
    </div>

<div id="tipDiv">
          <p>Tip Amount</p>
          <p id="span">/ person</p>
          </div>

<div id="total">
          <p>Total</p>
          <p id="span">/ person</p>
          </div>

<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div>

>  <input id="billAmount" type="integer" placeholder="$" style="text-align: right;">

>  <button onclick="tipPercentage()" id="tipBtn" value="10">10%</b

>  <button onclick="tipPercentage()" id="tipBtn" value="5">5%</bu

>  <button onclick="tipPercentage()" id="tipBtn" value="15">15%</b

>  <button onclick="tipPercentage()" id="tipBtn" value="25">25%</b

>  <button onclick="tipPercentage()" id="tipBtn" value="50">50%</b

>  <input id="customTip" type="integer" placeholder="Custom">

/i>  <input id="numberOfPeople" type="integer" placeholder="" style="text-align: right;">

Design comparison

Please log in to post a comment

#javascript

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community