
Responsive error handling Tip Calculator
Design comparison
Solution retrospective
In place error handling for inputs. No invalid input messages necessary.
Community feedback
- P@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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord