https://github.com/timbar09/fem-interactive-card-details-form
This is a an Interactive card details form that accepts data, throws error messages when input data is not entered at all or it is entered incorrectly.
https://github.com/timbar09/fem-interactive-card-details-form
flexbox form-validation frontend grid-layout javascript responsive-design
Last synced: over 1 year ago
JSON representation
This is a an Interactive card details form that accepts data, throws error messages when input data is not entered at all or it is entered incorrectly.
- Host: GitHub
- URL: https://github.com/timbar09/fem-interactive-card-details-form
- Owner: Timbar09
- License: mit
- Created: 2022-10-03T11:29:20.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-11-03T09:56:38.000Z (over 3 years ago)
- Last Synced: 2025-02-04T10:49:00.374Z (over 1 year ago)
- Topics: flexbox, form-validation, frontend, grid-layout, javascript, responsive-design
- Language: SCSS
- Homepage: https://timbar09-interactive-form.netlify.app/
- Size: 1.38 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend Mentor - Interactive card details form solution
This is a solution to the [Interactive card details form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/interactive-card-details-form-XpS8cKZDWw). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
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
### Screenshot
### Links
- Solution URL: [@Timbar09](https://github.com/Timbar09/FEM-Interactive-card-details-form.git)
- Live Site URL: [Interactive-card-details-form](https://fluffy-manatee-724450.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vanilla JavaScipt
- [SASS](https://sass-lang.com/) - For styles
### What I learned
On this project I learned JavaScript DOM Traversal. This skill allowed me to manipulate the DOM in a way that was previously oblivious to me. It allowed me to write cleaner code.
I learned more about form validation with javaScript. Previously I validated forms directly on the HTML markup but this time I was able to write my own validation code through javaScript.
I also managed to learn about the EventListener "input" which I had never used before.
The code down below shows how I used JavaScript DOM Traversal:
```js
form.addEventListener('submit', (e) => {
formInputs.forEach((input) => {
let messages = [];
const inputGrandParent = input.closest('.form__group');
const inputParent = input.parentElement;
let errorMsg = inputGrandParent.querySelector('.form__error-messsage');
}
});
```
### Continued development
This was the first challege that required me to use javaScript. I learned a lot and I also have lot to learn. I want to do more Javascript challenges and continue to push myself and learn even more.
### Useful resources
- [Web Dev Simplified](https://www.youtube.com/watch?v=v7rSSy8CaYE&t=720s) - This helped me learn about JavaScript DOM Traversal and how to use it properly.
- [MDN](https://developer.mozilla.org/en-US/) - This is an amazing website which helped me with form validation. I'd recommend it to anyone still learning this concept.
## Author
- Frontend Mentor - [@Timbar09](https://www.frontendmentor.io/profile/Timbar09)
- Twitter - [@Milez09](https://www.twitter.com/@Milez09)
## Acknowledgments
A huge shout out to all software development youtubers, educational sites such as MDN, Stackoverflow, FreeCodeCamp and so on, for sharing your knowledge and helping people across the globe who genuenly want to learn software development.