Responsive error handling Tip Calculator

Community feedback

• 

  P

  Nishanth Venkatesan•640

  @nishanth1596Posted about 1 month ago

  Hi @LincolnBollschweiler,

  Great work on the project! I have a few suggestions to make the code even better:

  <h1>
    <div>S P L I</div>
    <div>T T E R</div>
  </h1>
  

  This is a logo provided in the assets, so you can check that. If the logo is not given, you might consider using something like this instead:

  <h1>SPLIT<span>TTER</span></h1>
  

  You can then style the <span> as a block element. This approach will help keep the code semantic, which is always a good practice.

  <div className="bill-group flex">
    <label htmlFor="bill">Bill</label>
    <div className="input-icon"></div>
    <input
     type="number"
     id="bill"
     value={input.bill}
     placeholder="0"
     onChange={(e) =>
     setInput({ ...input, bill: Number(e.target.value) })
    }
    />
    </div>
  

  Consider creating a reusable component for this form element and passing props like id, name, etc. It’s a good habit to avoid repeating code. For small projects, it might seem like a little extra work, but in larger projects, this approach will save you time. If you need to make any changes, you’ll only have to update the component in one place, instead of updating it everywhere. Again, great work overall—keep it up! 🔥

  0