Tip Calculator App

Community feedback

• 

  OMAR HOSNY•270

  @7osny13Posted about 1 month ago

  Thank you for your help🤗 i appreciate it

  0
• 

  Mikhil Desai•510

  @mike15395Posted about 1 month ago

  Congratulations @7osny13 on completing the challenge!

  After reviewing your code,Here are few improvements:

  1. You are not displaying correct output as per requirements, you can refer to code below for calculating output

  function calculateOutput(selectedValue) {
    if (billInput.value && totalPeople.value && selectedValue) {
      totalTipAmount = (billInput.value * selectedValue) / 100;
  
      let totalAmount = Number(billInput.value) + totalTipAmount;
  
      tipAmount.textContent =
        "$" +
        Number(
          totalPeople.value > 0
            ? (totalTipAmount / totalPeople.value).toFixed(2)
            : ""
        );
  
      tipTotal.textContent =
        "$" +
        Number(
          totalPeople.value > 0
            ? (totalAmount / totalPeople.value).toFixed(2)
            : ""
        );
    }
  }
  

  2.There is no need of promises

  3. UI changes, refer to following code:

  .main{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      grid-template-rows: 1fr;
      grid-template-areas: "input output";
      width: 55vw;
      height: 60vh;
      background-color: var(--White);
      border-radius: 10px;
      padding: 2%;
      gap:25px;
  }
  
  @media all and (max-width:768px){
      .main{
  
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: repeat(2,1fr);
          grid-template-areas: "input"
          "output";
          height: 90vh;
          width: 50vw;
      }
      .input-section,.output-section{
          width: 100%;
          height: 100%;
      }
      body{
          gap:0px;
      }
      
  }
  

  refer my code here

  Happy Coding!

  0