Hello fellow Frontend devs!
It's been a while since my last challenge. So here is my latest work. Built with vanilla CSS, JavaScript and Vite.
For this particular project, the main obstacle I did encountered is creating the input validation. I didn't really had the idea on how to validate both the input along with checking whether the date entered by user is valid to be calculated. So what did I wrote for the validations?
Well firstly the application will check whether the user has entered all the required fields. If they failed to do so, it will show a required field error message.
if (inputValue.length === 0) { errorText.innerHTML = "This field is required"; }
Next is the date validation. On the date validation, I wrote a function that return the error status of each of the date input as an object.
function dateIsValid(..params){
let isError = {
dayHasError: false,
monthHasError: false,
yearHasError: false,
};
// validating...
return { isError }
}
So on the main application file, I can just called the returned value like this:
const { isError } = dateIsValid(..params);
To access the value of each date input: isError.dayHasError | isError.monthHasError | isError.yearHasError
Check out the project repository here for the full code.
Feedbacks are welcome :D
