Age Calculator App (Responsive Design)

Solution retrospective
The final design looks a bit different because I was more focused on the JavaScript side of it rather than the CSS. I'm back at school now everything is slowed down too. My JavaScript is NOWHERE near ideal. Any pointers on how to improve on the JS would be appreciated!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @NatureSon22
To make your code more concise and readable, you can take advantage of arrays to conveniently manage error elements. For instance, consider using <span> tags with the class .error-element assigned in HTML. These elements could be organized in order within your HTML structure.
// Assuming you have error elements with class '.error-element' const errorText = document.querySelectorAll('.error-element'); // Validation function to update error messages and appearance function validateInput(input, index) { const valInput = Number(input.value); if (index === 1 && (valInput < 1 || valInput > 12)) { errorText[index].textContent = 'Invalid month'; errorText[index].classList.add('active'); input.classList.add('active'); } // Add more conditions as needed } // Loop through error elements and apply validation errorText.forEach((input, index) => validateInput(input, index));
By structuring your code this way, you're utilizing arrays to streamline your approach and enhance readability. This method can help you manage and validate error elements efficiently,
Join 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