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,
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent