Simple add to cart animation with CSS & JS

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!

Comments

[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.

[Nikhil Bobade]

Yeah I see that I will be fix that tomorrow

[Patryk Deja]

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;
}

[Nikhil Bobade]

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

[Nikhil Bobade]

@patrykdeja is fix this code now its works fine

[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?

[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

[Nikhil Bobade]

This is amazing 👏

[geraldarzy]

Looks great!

[Dimitris Chitas]

Good Job!