Hi there ✋. In this project, I've created a Checkout Form by using HTML, CSS and DOM. In the project;
- First I've created a responsive web page by using pure HTML & CSS,
- As you can see in the gif image below project includes a form,
- JavaScript code is added in order to check validty of e-mail address,
- Validity check includes a simple Regex statement,
- I've defined variables by using DOM querySelectorAll etc. ,
- For adding Event listeners to plus, minus icons and remove buttons I've used forEach method. I am aware that performance of capturing or bubling is better but in this projet I wanted to test if I can use forEach,
- Navigated through DOM elements by using commands like getElementById, querySelector, querySelectorAll, parentElement etc.,
- When user clicks plus or minus buttons the amount of purchased item increases or decreases respectively,
- A fuction checks whether there is any product in the cart or not then calculates the total amount,
- If user clicks remove button code removes element from DOM and function calculates total amount again,
- Gif image of the project is below 👇.
- Hope you like my project!
- All comments and contributions are welcomed!
