Design comparison
Solution retrospective
Do someone know how we could capture the data of user (Month or Year) if he doesn't use the keyboard ? Because my card does'nt show the month and year if you put it with the little arrow (of input type=number")
Community feedback
- @fazzaamiarsoPosted about 2 years ago
Hi hitch! Great work!
1 To turn the input into red, you can add a class to the input when error. For example,
if (numberInput.value.length <= 0) { // implement error class in CSS numberInput.classList.add("error"); }
2 To make sure user only input numbers, you can do it with javascript. Here is an example.
nameInput.addEventListener("change", e => { const characterRegex = /[a-z\s]+/i; if ( !characterRegex.test(e.target.value) ) return; })
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
I hope it helps! Cheers!
Marked as helpful1 - @xdzasterPosted about 2 years ago
You can make an error class containing the red style and add it to the inputs whenever the input is invalid. You can add class using
element.classList.add("errorClassName")
.0
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