This is a solution to the Interactive card details form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Fill in the form and see the card details update in real-time
- Receive error messages when the form is submitted if:
- Any input field is empty
- The card number, expiry date, or CVC fields are in the wrong format
- View the optimal layout depending on their device's screen size
- See hover, active, and focus states for interactive elements on the page
- Solution URL: Solution URL here
- Live Site URL: live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Desktop-first workflow
Some of the codes which I'm proud of are listed below:
function isPureString(parameter, index) {
// checks if the parameter doesn't match any string from a-z or if it matches any number from 0 - 9
function showErrorMessage(index, displayErrorMessage, input) {
errorMessages[index].textContent = `${displayErrorMessage}`;
errorMessages[index].classList.add("errormessage");
inputs[input].style.border = "1px solid red";
setTimeout(() => {
errorMessages[index].textContent = "";
errorMessages[index].classList.remove("errormessage");
inputs[input].style.border = "none";
}, 3000);
}
function isPureNumber(parameter, index, input, errormsg) {
if (parameter.match(/\d/g) && !parameter.match(/[a-zA-Z]/g)) {
console.log("This is correct");
renderCardDetails();
} else {
showErrorMessage(index, errormsg, input);
}
}
I'll need to keep working on using regex to get better using it. It's a really powerful tool
-
Resource - This helped me for making sure the input was a valid input. Regex is a very good tool anyone can implement using javascript. You don't even have to know how it works fully to get started using it.
-
Resource 2 - This is an amazing resource website that helped me understand some strings and array methods even better.
- Website - Abdullah Ayoola
- Frontend Mentor - @abdullah43577
- Twitter - @officialayo540