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: Github-solution
- Live Site URL: Live-site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- SASS - SCSS
- Mobile-first workflow
- Vanilla Js
I learned a lot about styling images and form validation. I encountered a lot of challenges in the completion of this project but i am happy with the progress i have made so far.
<div class="thank-you hidden">
<div class="content">
<img src="images/icon-complete.svg" alt="" />
<h1>THANK YOU!</h1>
<p>We've added your card details</p>
<button class="continue">Continue</button>
</div>
</div>
This is the thankyou page html
function confirm(inputs) {
let allFilled = true;
inputs.forEach((input) => {
const formControl = input.parentElement;
if (input.value === '') {
formControl.classList.add('error');
allFilled = false;
} else if (formControl.className.includes('error')) {
allFilled = false;
} else {
formControl.classList.remove('error');
}
});
if (allFilled) {
form.classList.add('hidden');
thankYou.classList.remove('hidden');
}
}
I want to continue improving my skills on using local storage.
- Frontend Mentor - @mallow12