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 helpful
