Design comparison
SolutionDesign
Solution retrospective
What specific areas of your project would you like help with?
here the code that I have use for javascript but I'm not sure if that clean and perfect code **maybe some feedback or tips to follow **
const inputFiled=document.getElementsByTagName("input");
const warningElements=document.getElementsByClassName("warning");
const submitInput=document.querySelector("input[type='submit']");
// this will listen for all warning that has clicked
// and returned to default
for (let i = 0; i < warningElements.length; i++) {
const element = warningElements[i];
element.addEventListener('click',() =>{
element.style.display="none";
inputFiled[i].style.display="block";
})
}
function checkEmptyFiled(e){
for (let i = 0; i < inputFiled.length-1; i++) {
const element = inputFiled[i];
if(element.value===''){
e.preventDefault();
element.style.display="none";
warningElements[i].style.display="flex";
}
}
}
submitInput.addEventListener('click',function(e) {
checkEmptyFiled(e);
});```
Community feedback
- @waquintero-iaPosted about 2 months ago
This is an interesting article that shows some good options for handling complex forms
https://www.frontendmentor.io/articles/managing-complex-forms-in-react-using-formik-and-yup-C2DlPAsgp6
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