🚨 Big Announcement! 🚨 Hey everyone! I've made a big decision for this channel-I've turned off ads on all my videos! That's right, you can now enjoy all my content ad-free! This means I'm earning $0 from ad revenue, but I believe this is the right move to make your viewing experience better. If you find my content valuable and want to support my work, there are several ways you can help: Like & Share: Simply liking the video and sharing it with friends helps a lot! Subscribe & Hit the Bell: Stay updated and never miss a new video. TH-cam Thanks: Use the "Thanks" button below to send a one-time donation. Join the Channel Community: Get exclusive perks and behind-the-scenes content. Buy Me a Coffee: buymeacoffee.com/CodeExplained PayPal Donation: www.paypal.com/paypalme/CodeExplained Every little bit counts and goes directly to creating more high-quality content for you all. Thank you so much for your continued support! Let’s keep growing and learning together! 🌟
Lol tbh firstly you just did a lot for me as a freelancer I appreciate that big time... and you used all easy syntaxes in such a unique way... you sir deserve an award I appreciate you... thank you
Thanks for explaining so deeply. You're doing just outstanding job, by just not typing and telling what to do just like other tutors do, even Brad traversy does that which is not good, you're explaining the line by line code and implement.
@@CodeExplained this needs to be recognized coz even the paid udemy courses does that thing of coding and telling what they are doing. It should be like "what, how, why" should be answered and thats how a beginner's mind would understand how to approach logically.
Yeah you're right, beginners need to understand everything so they can write their own code by themselves, or they will just copy others code all the time and that will take so much time for them to learn things they can learn in a very short time ... well thanks again for your comment
@@CodeExplained I have landed my first job as software engineer it's been 2 months and I struggled alot. Coz I wasn't able to write code on my known coz I followed tutorials which used to teach like"typing code and tell what they were doing even in paid " no hows, where, why. I hope you create more such content, it would really add real value to people's lives. MERN project series would be awesome if you start with that.
i had to pause the video at minute 23 to drop this comment because just few minutes in and i am understanding so many concepts i didnt understand before. great job brother
Please do More vanilla projects!! You're amazing Bro! Saludos desde Venezuela, tus vídeos son los mejores.. soy un fiel seguidor, extrañaba tus vídeos, espero ver muy buen material de proyectos de la vida real, que nos abren la mente, nuevamente gracias.. tu contenido, y la forma en la que explicas, es de lo mejor que he visto.
Thank you so much for this video. It really helped to do some homework I had and to understand very easy some concepts of JavaScript. Great teacher, congrats!
Its working if you have one array of object only, but if you create multiple array of object the quantity in add to cart will have a behaviour of twice amount of quantities on every button of quantity that you click in add to cart in every object inside the array of object
Nice tutorial! added an alert for if the user tries to add quantity that is not available instock. Now just wondering how to dynamically change the instock value after a purchase.
I haven't tried it yet but I think I'd create an update function for the instock value (based on the product id) which would be called after every purchase.
Could you possibly make another video on this project, but this time on how to make it responsive? It seems like an awesome project on the JS side, but there is a lot of overflowing when you shrink the screen.
Is there a way to use the shopping cart on another html page? so that the shopping cart is not on the right? Because when i try that my cart doesn't render
I see your video of react and know how to use useContext, useEffect in real life. Could you make a project in React that use other hooks like useReducer useCallback useMemo so I can break down and analysis how and when to use them. Thank you 👍
hi but how can i add a form with the cart like i want the user to enter his name, number etc with the cart and that to be submitted with products in the cart. i want to get the data of the cart and the form
Very helpful tutorial. Could you please tell me what to do if instead of stopping the user from reducing quantity below zero, I can simply remove that product from the cart when they get to zero?
We have created a function "changeNumberOfUnits" we use the map method to change the array cart items number of units. I think you'll need to use a forEach method, and play with the "if statement" so when the numberOfUnits === 1 and the user clicks on "minus" => call the function "removeItemFromCart" If you still need help just ask.
Nice video, but onclick event is a bit outdated, I tried to use eventlistener as an alternative somehow but didnt manage it (Im only in my first year computer science) :(
I think the cart items are saved to the local storage, so when going to another page, all you need to do, is to get items from the local storage, and render them to your new page.
How would keep the number of items to be display on other pages. Im asking that because i want the number of items in cart to be in the nav bar on all my pages. The user can then click on the cart to go to cart. let me know, thank you :D love your videos.
@@CodeExplained Thank you! I had already figured it out. I also manage to make orders and render orders to the user's profile page and much more! Your video propelled me in the right direction! Thanks again!
I do not understand why this forEach of renderCartItems adding same element second time. Loop is going to another element of an array, so why previous is here too? Could you explain it more to me? ps.thanks a lot for this video man!:)
Thank you so much for this tutorial. It's of great help. However, I do have a problem. Your tutorial works just fine. But you see, I have 4 different sections (where you have the '.product's class) of products but your tutorial only works for one section and as such, I have only one section of products and 3 empty sections when I load the page. What can I do?
🚨 Big Announcement! 🚨
Hey everyone! I've made a big decision for this channel-I've turned off ads on all my videos! That's right, you can now enjoy all my content ad-free! This means I'm earning $0 from ad revenue, but I believe this is the right move to make your viewing experience better.
If you find my content valuable and want to support my work, there are several ways you can help:
Like & Share: Simply liking the video and sharing it with friends helps a lot!
Subscribe & Hit the Bell: Stay updated and never miss a new video.
TH-cam Thanks: Use the "Thanks" button below to send a one-time donation.
Join the Channel Community: Get exclusive perks and behind-the-scenes content.
Buy Me a Coffee: buymeacoffee.com/CodeExplained
PayPal Donation: www.paypal.com/paypalme/CodeExplained
Every little bit counts and goes directly to creating more high-quality content for you all. Thank you so much for your continued support!
Let’s keep growing and learning together! 🌟
Lol tbh firstly you just did a lot for me as a freelancer I appreciate that big time... and you used all easy syntaxes in such a unique way... you sir deserve an award I appreciate you... thank you
Best vanilla JavaScript tutorial ever,
With a good and clear English, thank you sir.
💯 accurate. However I need help. When I host my project on git, the images in the array are not displaying. I need help please
Men you are so clear, simple, logical in explaining this stuff. Thank you
Thank you so much for such a detailed and helpful tutorial!! Keep up the good work
Thank you! Will do!
Thank you so much for the clear explanation. This is by far the best shopping cart tutorial I have come across.
Wow, thank you!
Thanks for explaining so deeply. You're doing just outstanding job, by just not typing and telling what to do just like other tutors do, even Brad traversy does that which is not good, you're explaining the line by line code and implement.
Yeah I always try my best to explain the logic behind ... thanks a lot for your comment.
@@CodeExplained this needs to be recognized coz even the paid udemy courses does that thing of coding and telling what they are doing. It should be like "what, how, why" should be answered and thats how a beginner's mind would understand how to approach logically.
Yeah you're right, beginners need to understand everything so they can write their own code by themselves, or they will just copy others code all the time and that will take so much time for them to learn things they can learn in a very short time ... well thanks again for your comment
@@CodeExplained I have landed my first job as software engineer it's been 2 months and I struggled alot. Coz I wasn't able to write code on my known coz I followed tutorials which used to teach like"typing code and tell what they were doing even in paid " no hows, where, why.
I hope you create more such content, it would really add real value to people's lives.
MERN project series would be awesome if you start with that.
i had to pause the video at minute 23 to drop this comment because just few minutes in and i am understanding so many concepts i didnt understand before. great job brother
Thank you so much for this!!An extraordinary teacher! Easy code and explained very well
Please do More vanilla projects!! You're amazing Bro! Saludos desde Venezuela, tus vídeos son los mejores.. soy un fiel seguidor, extrañaba tus vídeos, espero ver muy buen material de proyectos de la vida real, que nos abren la mente, nuevamente gracias.. tu contenido, y la forma en la que explicas, es de lo mejor que he visto.
Extremely useful tutorial as usual, many thanks for bringing this to us!
THIS is the best tutorial I've ever watched in my life
Thank you so much for this tutorial!
This explanation is the best on TH-cam.
This is the very best video I found that truly helped me. It was easy to follow and straight-to-the-point. Keep up the good work! Thank you!
Well done and well explained. I liked how you broke down every steps and took your time explaining everything.
Thank you so much for this video. It really helped to do some homework I had and to understand very easy some concepts of JavaScript. Great teacher, congrats!
I have only 1 word for u :
GOAT 🐐 ( Greatest Of All Time)
hahah thanks a lot ❤️
This is the best video i found that truly helped me 🌟thank you
This guy is a legend very straight forward tnx so much man
this tutorial is the best I could find on youtube :) Please contiunue doing amazing tutorials :D
Oh thanks a lot buddy, happy to hear that 😊
This is really so well explained. I learnt a lot, Thank you.
A great teacher❤
I've been eagerly waiting for your video❤️
Happy to hear that ❤️
Guyyyy you’re the best ❤
Please do more vanilla JS projects! 🙏 these are soooo helpful
I will 👍
Thanks Bro you are doing a great work
Your way of teaching is really simple
Loved that
So nice of you
Thank you so much sir for this valuable tutorial and 'easy to understand' explanation.
Thanks and welcome
I am beyond thankful for your detailed explanation, it helped me alot to understand the basic concept and implementation🙏
Glad it was helpful!
Thank you for this beautiful tutorial.
Your explanation is really easy to understand and I learned a lot
This is the best shopping cart tutorial!!! Thank you so much
You are so welcome!
You Rock! It's the best guide I've ever seen. Thank you so much.
Wow, thanks!
Love ur channel. Please do more vanilla javascript projects with fetch and more.. Subscribed!
Extremly Extremly Extremly..........................useful.
Thanks for the content.
Glad it was helpful!
very clear and crisp explanation. Thanks a millions ❤
Wow! Thanks for this
You're welcome
Awesome !!! so easy method to create Shopping Cart ...!!!
This is fantastic! Thank you for the great content! 👏
THanks a Lot for all this information!!!
very well explained
Such a wonderful video! nicely explained. Really appreciate. Waiting for new videos.
That's Great! I have been Helpful from this video, I am beginner in javascript.
Great to hear!
What a great tutorial! thank you.
thank you for your hard work. it was very informative and useful🙂
thanks for sharing your knowledge
Glad to do so.
Its working if you have one array of object only, but if you create multiple array of object the quantity in add to cart will have a behaviour of twice amount of quantities on every button of quantity that you click in add to cart in every object inside the array of object
Wow! Good job bro, keep going.
Thank you, I will
Nice tutorial! added an alert for if the user tries to add quantity that is not available instock. Now just wondering how to dynamically change the instock value after a purchase.
I haven't tried it yet but I think I'd create an update function for the instock value (based on the product id) which would be called after every purchase.
I have a project coming up to get a online degree while most of everyone knows abouts...... this is huge help. Yup I'm aboard send all info brother.
Wonderful live saver tutorial. Please do more vanilla js projects, like pagination, dictionary...
Happy to hear it was helpful, yes I will.
Amazing tutorial
Could you possibly make another video on this project, but this time on how to make it responsive? It seems like an awesome project on the JS side, but there is a lot of overflowing when you shrink the screen.
Yeah I know, I didn't want to waste time on making it responsive, sorry.
@@CodeExplained No need to be sorry, you did an amazing job.
Great explanation
Glad you think so!
lots of thanks... please share the next part for checkout cart.
Next part?
What do you want for next part?
That's awesome
I love your video so much , thank you 🙏🏻
Happy to hear that, thanks ❤️
It's a really great explanation.
Glad you think so!
Thank you a lot 💖
Very nice... i like this video
Please when are you gonna add filter cards JavaScript tutorial. I have search every where but doesn't implement it without error
you're a life saver bro
Happy to hear that, thanks ❤️
Great.
Nice
perfect....thanks man
You're welcome!
Awesome. However I need help. When I host my project on github, the images in the array are not displaying. I need help please
veryy good tutorial , 10x
this is a life saver
Waiting for your new videos...➡️➡️➡️➡️➡️ Js projects
I wish you 1m subscribers!
Thanks a lot ❤️
thanks so much
I have been waiting more videos from you for a long time . Do you alright ?
Nice Sir. Please Make More Project ... Please Please
Thanks, of course I will
Thank Sir.
Is there a way to use the shopping cart on another html page? so that the shopping cart is not on the right? Because when i try that my cart doesn't render
Exactly!!!! I need help with this too.?
Hi, best shopping cart tutorial, ty Sir.
I have a question: min 38:50, instead of showing the price, i got NaN. Any solutions?
Great Job. Is there a way to send the shopping bag to email when clicking proceed to checkout?
THANK YOU BROTHER
You are welcome
If I download it as a zip file then complete it and push it to my git hub will it show you as the contributor?
Thank Sir.
You're welcome.
thank you !!!!
You're welcome!
I see your video of react and know how to use useContext, useEffect in real life. Could you make a project in React that use other hooks like useReducer useCallback useMemo so I can break down and analysis how and when to use them. Thank you 👍
I'll check it out!
How can you add product options like size and color ?
hi but how can i add a form with the cart like i want the user to enter his name, number etc with the cart and that to be submitted with products in the cart. i want to get the data of the cart and the form
if I want to make a separate single product page what do I need to alter?
Very helpful tutorial. Could you please tell me what to do if instead of stopping the user from reducing quantity below zero, I can simply remove that product from the cart when they get to zero?
We have created a function "changeNumberOfUnits" we use the map method to change the array cart items number of units.
I think you'll need to use a forEach method, and play with the "if statement" so when the numberOfUnits === 1 and the user clicks on "minus" => call the function "removeItemFromCart"
If you still need help just ask.
@@CodeExplained thank you! I figured it out
if i use json to store my data, what is the equivalent code of the function addToCart in 16:39 for it?
Nice video, but onclick event is a bit outdated, I tried to use eventlistener as an alternative somehow but didnt manage it (Im only in my first year computer science) :(
how to render the cart items on a diffrent cart page ?
IM STUCK HERE :(
I think the cart items are saved to the local storage, so when going to another page, all you need to do, is to get items from the local storage, and render them to your new page.
weres the chocolate and banna javscript?
Coming Soon!
Vanilla JS means Plain JS no framework.
thank you alot for this ,,
Please on your next video make a checkout page😌
How would keep the number of items to be display on other pages. Im asking that because i want the number of items in cart to be in the nav bar on all my pages. The user can then click on the cart to go to cart. let me know, thank you :D love your videos.
Save the cart to the user's browser's local storage.
@@CodeExplained Thank you! I had already figured it out. I also manage to make orders and render orders to the user's profile page and much more! Your video propelled me in the right direction! Thanks again!
thanks 😊👍
You're welcome.
Where is the link for your template in github?
github.com/CodeExplainedRepo/shopping-cart-javascript
I do not understand why this forEach of renderCartItems adding same element second time. Loop is going to another element of an array, so why previous is here too? Could you explain it more to me? ps.thanks a lot for this video man!:)
"Here" it is where?
Hi , i have try to follow code and i cannot manage changeNumberOfUnits because of onclick function.
How can I help you?
What vs code theme you're using?
Thanks for the video and please add a New video with paypal button.
helping me with my APCSP class 🫶🙏
I want to add discount facility or buy one get free, how can I do that?
Add new properties to the products,
{
...
discount : 20,
free_product: 1
}
and take those in mind when calculating the subtotal.
dude is using innerHTML to create elements.. I just cant.. terrible
hahah sorry
Thank you so much for this tutorial. It's of great help.
However, I do have a problem. Your tutorial works just fine. But you see, I have 4 different sections (where you have the '.product's class) of products but your tutorial only works for one section and as such, I have only one section of products and 3 empty sections when I load the page. What can I do?