Design comparison
Solution retrospective
It took waaaay too long, and was also way too difficult to get the correct date calculations, given the leap years and the 29/30/31 days in a month. Will refactor it at some point to remove a lot of unnecessary code.. if i can stomach it in the future lol
Community feedback
- @IzykGitPosted 9 months ago
You did a decent job but here are a few things that I hope can help you out.
I noticed how you tried to do all of the calculations only when your calculate button is clicked.
Now I don't know if you did this during the process of making it but something I did that made it easy is to run all of the calculations whenever the user makes an input. This allows you in real time to get all valid dates and will cut your debugging time in half on small projects like this. And when it comes time to actually do all the calculations its as simple as
currentDay - dayInput.value; currentMonth - monthInput.value; currentYear - yearInput.value;
(There's little more to it than this but it's pretty close)
Now making a new fetch for every input the user makes on a large scale application that is dealing with a large scale database is NOT a good idea but for this tiny simple project its ok since you are just fetching the date.
For leap years and months with different dates, if the user inputs a day that exceeds the amount of days in that month. Just simply do this when you go make the calculation.
if (dayInput.value > availableDays) { dayInput.value = availableDays; };
This simple check will always make sure the inserted days never exceeds the actual amount of days in that month. (You can look on my github for more context for this.)
Obviously there are many different answers to this and my answer may not be the best but I hope this helps. Good luck coding!
Marked as helpful1
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