Design comparison
Solution retrospective
the website looks a little crapy, i think a lot of things can be made a better and easier way, any advise will be great.
Community feedback
- @FrantiskaAliPosted over 1 year ago
Hello, I did this challenge using vanilla JS as well and honestly it is massive headache :D But you should add validation. I did it in for loop that went through the inputs and checked if days is smaller than 31, month smaller then 12 and year smaller then 2023 and then add text conetnt notification (mine looks like this for (let i = 0; i < allInputs.length; i++) { const inputValue = allInputs[i].value; if (inputValue > 31 && allInputs[i] === dayInput) { allInputs[i].classList.add("required"); allInputs[i].nextElementSibling.classList.remove("hide"); allInputs[i].previousElementSibling.classList.add("error"); allInputs[i].nextElementSibling.textContent = "Must be a valid day"; valid++; } else if (inputValue > 12 && allInputs[i] === monthInput) { allInputs[i].classList.add("required"); allInputs[i].nextElementSibling.classList.remove("hide"); allInputs[i].previousElementSibling.classList.add("error"); allInputs[i].nextElementSibling.textContent = "Must be valid month"; valid++; } else if (inputValue > 2023 && allInputs[i] === yearInput) { allInputs[i].classList.add("required"); allInputs[i].nextElementSibling.classList.remove("hide"); allInputs[i].previousElementSibling.classList.add("error"); allInputs[i].nextElementSibling.textContent = "Must be in the past"; valid++; } ) I think using vanilla JS was a mistake cuz I can see it being so much easier in react or something...:D
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