DEV Community

loading...
Cover image for Simple add to cart animation with CSS & JS

Simple add to cart animation with CSS & JS

nikhil27b profile image Nikhil Bobade Updated on ・1 min read

Hello, today I created a Simple add-to-cart animation with CSS & JS. Not great work but I hope you like this also comments about your thoughts. For more content follow me on Instagram @developer_nikhil27.

New post :-
https://dev.to/nikhil27b/simple-copy-coupon-using-css-js-16d4

Thank you!

Discussion (10)

pic
Editor guide
Collapse
spearsdevin profile image
Devin Spears

Love the animation! but one problem is after you can hit the add to cart you can hit the minus button and start going into the negatives with numbers.

Collapse
nikhil27b profile image
Nikhil Bobade Author

Yeah I see that I will be fix that tomorrow

Collapse
patrykdeja profile image
Patryk Deja • Edited

The problem is with card_value.nodeValue. Value of nodeValue used on an element returns null. So you should use an alternative for nodeValue like innerText or innerHTML.

Something like this:

if(Number(card_value.innerText) - 1 >= 0){
        card_value.textContent = cartvalue -=1;
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
nikhil27b profile image
Nikhil Bobade Author

Thanks bro I just copied your and edited code. Because of you I fix today

Collapse
nikhil27b profile image
Nikhil Bobade Author

@patrykdeja is fix this code now its works fine

Collapse
thsmdt profile image
Thomas (he/his)

The animation is great! I noticed that there is no user-facing feedback when clicking the plus button before one taps on „add to cart“, yet the amount already increases.

What do you think about adding the amount to the text (e.g. „Add X to cart“) in those cases?

Collapse
murkrage profile image
Mike Ekkel

Awesome! Cool idea. One thing you can do to improve this is setting a user-select: none; rule for the plus and minus buttons. That way you won't select the text when clicking multiple times :D

Collapse
nikhil27b profile image
Nikhil Bobade Author

This is amazing 👏

Collapse
geraldarzy profile image
geraldarzy

Looks great!

Collapse
feco2019 profile image
Dimitris Chitas

Good Job!