@FrantiskaAli
Posted
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 helpful
