Design comparison
Solution retrospective
I decided to go above and beyond and add an error 'toast' on the bill input as well to indicate that it cannot be a negative number.
I also got a better understanding of parseInt and parseFloat. I have used parseInt several times, but never really considered the differences with parseFloat.
What challenges did you encounter, and how did you overcome them?Styling the radio buttons was my biggest challenge as I have never done that before. Luckily the 'all knowing' Google was able to provide me with the correct info.
I also wanted to format the Bill and Number of People inputs to not allow negative numbers or more than two decimal points for the bill. I was not able to find a solution that worked properly.
What specific areas of your project would you like help with?If anyone knows how to structure the inputs to not allow negative numbers or to limit them to 2 decimal points that works for this app I would be interested in learning that.
Also I always appreciate any tips/suggestions to improve the quality of my code.
Thanks!
Community feedback
- @juliengDevPosted 2 months ago
Hello @nvalline,
First of all, congratulations on the project! It really matches what was expected, and you even went beyond with the bill field. Great job! The design is also faithful to the mockup, and the calculation logic works well too. I learned about the use of radio buttons from your code to handle unique values in a form selection, for example, and I will now apply this in my future projects—so thanks again for that.
Regarding your question about how to prevent a recorded number from being negative, you can control this directly in the HTML input tag with the following options:
type="number" min="0"
.For limiting the value to 2 decimal places, you can use the
toFixed
method, for example:const inputAmount = document.getElementById('inputAmount'); inputAmount.addEventListener('input', (event) => { const value = event.target.value; // Prevent negative numbers if (value < 0) { event.target.value = 0; } // Restrict to 2 decimal places event.target.value = parseFloat(value).toFixed(2); });
Now, if you want to go a bit further with the project structure in terms of Sass, you can take inspiration from my project. Add me on GitHub and you’ll easily find it—this could give you some ideas for your future development work.
All my best wishes for the future!
Marked as helpful0
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