Simple add to cart animation with CSS & JS

#html #css #javascript #webdev

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!

Top comments (10)

Devin Spears • Apr 11 '21

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 • Apr 11 '21

Yeah I see that I will be fix that tomorrow

Patryk Deja • Apr 11 '21 • 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;
}

Nikhil Bobade • Apr 11 '21

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

Nikhil Bobade • Apr 11 '21

@patrykdeja is fix this code now its works fine

Thomas (he/his) • Apr 11 '21

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 • Apr 12 '21

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