JavaScript Shopping Cart Tutorial for Beginners

977,851
0
Publicado 2018-10-04
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:
github.com/WebDevSimplified/Introduction-to-Web-De…

Finished Code For:
github.com/WebDevSimplified/Introduction-to-Web-De…

Make The Shopping Cart Accept Payments:
   • How To Setup Payments With Node.js An...  

Band Website HTML Series:
   • Introduction to HTML || Your First We...  

Band Website CSS Series:
   • How to Style a Modern Website (Part One)  

Twitter:
twitter.com/DevSimplified

GitHub:
github.com/WebDevSimplified

CodePen:
codepen.io/WebDevSimplified


#Javascript #WebDevelopment #ShoppingCart

Todos los comentarios (21)
  • @kienboy9999
    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.
  • @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.
  • @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!
  • @kidbrave_7673
    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
  • @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.
  • @a.razack3966
    Hello WDS, I really appreciate the effort you put in place just to tutor this amazing courses. I am hoping to see more, it helps a lot. Thank You
  • @ParadoxWorks
    This channel is a gold mine and I am a miner :D Seriously great practical examples! Liked & subscribed, working on my web dev knowledge! Keep it up man, cheers!
  • @robertmcleod5002
    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!
  • 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
  • @jaincoff9561
    One of the best, high quality, easy to understand JavaScript tutorials!!
  • This is an invaluable tutorial, with some effort I can tweak it to suit a project I want to do. For your detailed logical explanation and non-use of external libraries and packages I hereby christen you "The King of Vanilla Javascript". God bless you.
  • @user-cr1ez2sb6l
    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!
  • @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.
  • Whenever I need to refresh my JavaScript I watch this video, just so I can get a grip of the basics. This is amazing!
  • @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
  • @knocs12
    I just stopped by while in the midst of this series to tell that this is the best course I have been so far. I have been struggling learning web development with other online turorials(fellow self taught!), but this series is a fckin solid foundation where students can look back and play around with thier codes, and eventually modify it. Bro, you are the best! How to give you a free coffee? You deserve it!
  • @ishicoorens6163
    Very nice tutorial I also used another if statement to check if the cart isnt empty when your click the purchase button. Being able to do that myself after this tutorial means that is actually learned something!! Thank you!