Tip Calculator App

Community feedback

• 

  P

  Habeeb Kareem•470

  @olaide-hokPosted about 1 month ago

  Great work!

  Here are some quick areas to improve on in the html layout

  <div class="tip">
    <div class="inputContainer">
      <label for="bill">Bill</label>
      <input type="number" id="bill" class="bill" placeholder="0">
    </div>
    <div>
      <p>Select Tip %</p>
      <div class="percent">
        <button class="Btn" data-option="0.05">5%</button>
        <button class="Btn" data-option="0.10">10%</button>
        <button class="Btn" data-option="0.15">15%</button>
        <button class="Btn" data-option="0.20">20%</button>
        <button class="Btn" data-option="0.25">25%</button>
        <input type="number" class="custom" placeholder="custom">
      </div>
    </div> 
  
    <div class="inputContainer">
      <label for="numberOfPeople">Number of People</label><br>
      <input type="number" id="numberOfPeople" class="numberOfPeople" placeholder="0">
    </div>
  </div>
  

  for css

  .bill, .custom, .numberOfPeople {
      border-radius: 5px;
      background: #F3F9FA;
      padding: 6px 17px;
  }
  @media (min-width: 768px) {
      .tip {
          row-gap: 40px;
  }
  
  @media (min-width: 768px) {
      .content {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          width: 700px;
          border-radius: 10px;
          padding: 32px 32px 32px 48px;
      }
  
  .result {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
    }
  
  }
  

  0

  ---

  

  Tonny Blair•270

  @Tonny-Blair-DanielPosted about 1 month ago

  Thanks for the improvements suggested

  0