JavaScript Shopping Cart Tutorial for Beginners

In this video we will learn how to utilize JavaScript to add functionality to a shopping cart. We will cover how to check if the document is loaded, and how to query the document for elements by class, how to add events to elements. We will then combine all of these techniques to make the shopping cart in our web page work in an intuitive way.

Also, let me know if there are any other JavaScript topics you want me to cover in further depth.

Starting Code:

Finished Code For:

Make The Shopping Cart Accept Payments:

Band Website HTML Series:

Band Website CSS Series:

Twitter:

GitHub:

CodePen:

#Javascript #WebDevelopment #ShoppingCart

[kienboy]

You not only teach me how to write code, but also teach me how to think. That is highly effective.

[matthewvilaysack]

Hey I really like your style of teaching. You don't make everything sound so intimidating, but at the same time, you don't sound like you're teaching a baby how to walk.

[crezsbl]

I have been struggling with JavaScript for months, and I felt like I would never be able to code. But I have tears in my eyes because I feel I can do it, after watching your video. You are just amazing. God bless you!

[LeeroyGgJenkins]

This series has by far been the best web dev tutorials I have seen by FAR. Your way of teaching is perfect for visual learners like me I need to see something to understand how it works and you nailed it.
Thank you for taking the time to make these tutorials.

[ReversePolarety]

Hello!
I know this video has been up for a good while now, but I came across it recently (and the HTML and CSS too) and just wanted to say: THANK YOU! You sir helped me pass my first coding/programming exam. I couldn't have done it without your tutorials. They are amazing and really easy to follow. Keep up the good work!!! ♡ thank you again!

[OperationAndrew.]

This was one of your better videos, because you went through it slowly, and took the time to explain each concept thoroughly as you executed it

[robertmcleod]

Thanks for your tutorials! I really enjoyed following along! I just finished this last part of the website building and plan on continuing on learning from your page! I decided to personalize my site a bit more which created some interesting debugging ... opportunities. Hehe! All in all I probably spent around 2.5 hours on this tutorial, but I enjoyed the process of learning JavaScript. I also really appreciate how you explain what is happening behind the code that you are typing. Thanks for taking the time to make this for us!

[mohammadomarchagani]

Whenever I need to refresh my JavaScript I watch this video, just so I can get a grip of the basics. This is amazing!

[cosmicazur]

I know other users have already said it but the way you explain/demonstrate line by line is exceptionally good. I have been trying to learn to build a simple website for a while but I threw myself into html, css, js, php, frameworks etc etc. This tutorial is so well presented it has given me a good idea on how to get to the goal. One of the shocking things I have learnt is using a console command for debugging. I was totally oblivious to it. Anyway thank you so much.

[mblherry]

Very well done - I know no Javascript and I was able to completely follow your logic - Thank you. I don't feel as dunted considering learning Javascript.

[ShenderRamos]

great tutorial man.. i feel like i want to watch every single video you have.. because i keep learning something new doesnt matter how much i know of the subject you are talking about... great work

[kidbrave_]

Thank you sooo much for creating this project!. I watched it easily about 10 times straight just so I could wrap my mind about the logic of being able to rebuild this project from scratch on the js side. This tutorial is going to be the heart and soul of my shopping cart I'm planning on build for my Nintendo website I'm currently finished with I just wanted to add a cherry on top to wow my future employers. :D


Thank you again Web Dev Simplified your such a great teacher I seriously wouldn't have understood the DOM if it wasn't for this project and once I'm done with my shopping cart page I'm going to dive straight into learning react. :)


FYI: When I'm done with my website I'm going to post it in the comment section so you can see the masterpiece you help inspire to be built. :D

[nivekmozart]

I was intimidated at first but as the topic moves on, everything feels right. This is simple but powerful! Absolutely perfect.

[thekuzicartoon]

nice tutorial. breath of fresh air to have a functioning total package as a lesson. Now i can pull the code from here, manipulate it to my needs and really start to understand how to put my own code together.
will be looking for more like this from you!

[ceejGU]

I really appreciate how you explain everything including the basics. Thanks man!

[eddiegreen]

This video saved my life! One of the best tutorials I've seen!

[jaincoff]

One of the best, high quality, easy to understand JavaScript tutorials!!

[KingPacavision]

Thank you so much made my own website and applied this video to it for the shopping cart works perfectly.

[behar]

Finally i made it with some help from different forums lol, but i really needed a tutorial with Vanilla JS.
I am new to JS since 3-4 months but I know how to make modals, contact forms and some basic stuffs but when it comes to building larger projects like you did with a shopping cart I try to search for tutorials on YouTube and I learnt a lot for next projects, even I know it's not so good to be based on others tutorials and build from yourself, but I am doing this because I struggle with larger projects like i said and i learnt a lot in this tutorial.
Thanks again and keep going Vanilla JS :)

[Korisnik]

Incredible video, amazing tutorial, I am still in disbelief you gave us something like this for free and I am extremely thankful for your good will and effort! After spending so much time on different tutorial which explains all the different options in html, css and js, this course of yours helped me put them together in one whole picture, that I was desperately missing. Finally I have a feeling like I am making an actual progress in learning how to make functional websites and one day hopefully, become even a true web-developer :D So, once again, thank you so so much for whole this course :D
And now, I move on to your other videos, especially the ones that are dedicated to the card payments :D