Create a Shopping Cart With Vanilla JavaScript | ES6

[@CodeExplained]

🚨 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. KZbin 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! 🌟

[@solomonjackson7984]

Best vanilla JavaScript tutorial ever, With a good and clear English, thank you sir.

[@ifeomablessing9578]

💯 accurate. However I need help. When I host my project on git, the images in the array are not displaying. I need help please

[@rfryanfavour4369]

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

[@bensonbenson4149]

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

[@maxmaksum4673]

Men you are so clear, simple, logical in explaining this stuff. Thank you

[@rfryanfavour4369]

THIS is the best tutorial I've ever watched in my life

[@Sky-yy]

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]

Yeah I always try my best to explain the logic behind ... thanks a lot for your comment.

[@Sky-yy]

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

[@CodeExplained]

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

[@Sky-yy]

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

[@alinabianca3934]

Thank you so much for this!!An extraordinary teacher! Easy code and explained very well

[@ummasiyah3238]

Thank you so much for the clear explanation. This is by far the best shopping cart tutorial I have come across.

[@CodeExplained]

Wow, thank you!

[@biancas9110]

Thank you so much for such a detailed and helpful tutorial!! Keep up the good work

[@CodeExplained]

Thank you! Will do!

[@elieli2570]

Extremely useful tutorial as usual, many thanks for bringing this to us!

[@bogopurvi]

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!

[@stevenfranz5462]

Thank you so much for this tutorial! This explanation is the best on KZbin.

[@vt9988]

this tutorial is the best I could find on youtube :) Please contiunue doing amazing tutorials :D

[@CodeExplained]

Oh thanks a lot buddy, happy to hear that 😊

[@CAFernandezB]

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.

[@marymaundu1702]

This is really so well explained. I learnt a lot, Thank you.

[@EnumahPearl]

A great teacher❤

[@negin3408]

This is the best video i found that truly helped me 🌟thank you

[@SandeshMotoVlogs]

I have only 1 word for u : GOAT 🐐 ( Greatest Of All Time)

[@CodeExplained]

hahah thanks a lot ❤️

[@revayuap972]

This guy is a legend very straight forward tnx so much man

[@AjayKumar-id7mb]

Thanks Bro you are doing a great work Your way of teaching is really simple Loved that

[@CodeExplained]

So nice of you

[@lokeshkhati8413]

I've been eagerly waiting for your video❤️

[@CodeExplained]

Happy to hear that ❤️

[@dindindongi]

I am beyond thankful for your detailed explanation, it helped me alot to understand the basic concept and implementation🙏

[@CodeExplained]

Glad it was helpful!

[@ckolobok57]

You Rock! It's the best guide I've ever seen. Thank you so much.

[@CodeExplained]

Wow, thanks!

[@teyuu]

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!

[@dansmar_2414]

This is the best shopping cart tutorial!!! Thank you so much

[@CodeExplained]

You are so welcome!

[@shahhussain5563]

very clear and crisp explanation. Thanks a millions ❤

[@T_Midnight_Sun]

Guyyyy you’re the best ❤

[@ashrafulmomenshuvo5344]

Awesome !!! so easy method to create Shopping Cart ...!!!

[@thientinhlamhuynh3004]

Wow! Good job bro, keep going.

[@CodeExplained]

Thank you, I will

[@amanpratap5547]

Extremly Extremly Extremly..........................useful. Thanks for the content.

[@CodeExplained]

Glad it was helpful!

[@mmonir2061]

Such a wonderful video! nicely explained. Really appreciate. Waiting for new videos.

[@gopalakrishnachinta3769]

Thank you so much sir for this valuable tutorial and 'easy to understand' explanation.

[@CodeExplained]

Thanks and welcome

[@ambareen2368]

Please do more vanilla JS projects! 🙏 these are soooo helpful

[@CodeExplained]

I will 👍

[@dtawantawng5131]

This is fantastic! Thank you for the great content! 👏

[@irwankaryantotandek6058]

Love ur channel. Please do more vanilla javascript projects with fetch and more.. Subscribed!

[@howtodo9412]

That's Great! I have been Helpful from this video, I am beginner in javascript.

[@CodeExplained]

Great to hear!

[@CodeWithOgochukwu]

Wow! Thanks for this

[@CodeExplained]

You're welcome

[@march9698]

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.

[@CodeExplained]

Yeah I know, I didn't want to waste time on making it responsive, sorry.

[@march9698]

@@CodeExplained No need to be sorry, you did an amazing job.

[@frontendwithsalimi]

Thank you for this beautiful tutorial. Your explanation is really easy to understand and I learned a lot

[@andrisalazar7565]

THanks a Lot for all this information!!! very well explained

[@Kevin-uf7yt]

if i use json to store my data, what is the equivalent code of the function addToCart in 16:39 for it?

[@someChicoRy]

thank you for your hard work. it was very informative and useful🙂

[@renesalvacion2452]

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

[@jahjahtruth]

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.

[@GuitarHope]

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.

[@sarvij9870]

Hi, best shopping cart tutorial, ty Sir. I have a question: min 38:50, instead of showing the price, i got NaN. Any solutions?

[@nikolabozic9791]

Hello Code Explained, i have a question. For example, if i want to make an individual page for each of these products, can i use the same data from products array to make individual page for each product? And if i can, which of array methods should be used? Thanks in advance!

[@universalworthy2169]

Wonderful live saver tutorial. Please do more vanilla js projects, like pagination, dictionary...

[@CodeExplained]

Happy to hear it was helpful, yes I will.

[@mackinlay27]

What a great tutorial! thank you.

[@codewithharris]

Please when are you gonna add filter cards JavaScript tutorial. I have search every where but doesn't implement it without error

[@charlesohlson4316]

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.

[@ifeomablessing9578]

Awesome. However I need help. When I host my project on github, the images in the array are not displaying. I need help please

[@yogapassion]

I have been waiting more videos from you for a long time . Do you alright ?

[@plaguegames3556]

Great explanation

[@CodeExplained]

Glad you think so!

[@Ojr_trading_style]

Very nice... i like this video

[@sahedsumon8511]

It's a really great explanation.

[@CodeExplained]

Glad you think so!

[@fishmarkholmes1834]

I love your video so much , thank you 🙏🏻

[@CodeExplained]

Happy to hear that, thanks ❤️

[@GabrielSilva-yk6kk]

thanks for sharing your knowledge

[@CodeExplained]

Glad to do so.

[@vijayd5551]

lots of thanks... please share the next part for checkout cart.

[@CodeExplained]

Next part? What do you want for next part?

[@aboodibajaman9975]

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

[@mohanadgallab]

thank you alot for this ,,

[@ДмитрийТравин-ц4д]

I wish you 1m subscribers!

[@CodeExplained]

Thanks a lot ❤️

[@alexanderson1193]

if I want to make a separate single product page what do I need to alter?

[@eliasgrinwisplaatstultjes7857]

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

[@ifeomablessing9578]

Exactly!!!! I need help with this too.?

[@nataliabogach6580]

How can you add product options like size and color ?

[@krzysiekwarchal]

Great Job. Is there a way to send the shopping bag to email when clicking proceed to checkout?

[@_myenglishbro]

Amazing tutorial

[@codingislife6387]

Nice Sir. Please Make More Project ... Please Please

[@CodeExplained]

Thanks, of course I will

[@codingislife6387]

Thank Sir.

[@fatimakayy]

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?

[@CodeExplained]

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.

[@fatimakayy]

@@CodeExplained thank you! I figured it out

[@darkNovaskar]

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?

[@feliciatimmy9467]

you're a life saver bro

[@CodeExplained]

Happy to hear that, thanks ❤️

[@aza7866]

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) :(

[@lovemanga_forever]

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 👍

[@CodeExplained]

I'll check it out!

[@Mindinmatrix]

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]

Save the cart to the user's browser's local storage.

[@Mindinmatrix]

@@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!

[@charlesmwaniki1868]

perfect....thanks man

[@CodeExplained]

You're welcome!

[@callumspellium1516]

weres the chocolate and banna javscript?

[@CodeExplained]

Coming Soon! Vanilla JS means Plain JS no framework.

[@andrewsokolovsky9127]

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!:)

[@lidijajezova2025]

"Here" it is where?

[@sivas4061]

What vs code theme you're using?

[@essenc3189]

veryy good tutorial , 10x

[@rabiekhalifa1103]

Thank you a lot 💖

[@expukpuk]

Where is the link for your template in github?

[@CodeExplained]

github.com/CodeExplainedRepo/shopping-cart-javascript

[@shubhamjangid5936]

how to render the cart items on a diffrent cart page ? IM STUCK HERE :(

[@CodeExplained]

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.

[@MamamimPlodtook]

Hi , i have try to follow code and i cannot manage changeNumberOfUnits because of onclick function.

[@CodeExplained]

How can I help you?

[@tahirzaman9441]

Waiting for your new videos...➡️➡️➡️➡️➡️ Js projects

[@omiosomoy4706]

this is a life saver

[@olidhossen9785]

Nice

[@sagarraut797]

I want to add discount facility or buy one get free, how can I do that?

[@CodeExplained]

Add new properties to the products, { ... discount : 20, free_product: 1 } and take those in mind when calculating the subtotal.

[@tigerwalkcommunications7426]

Please on your next video make a checkout page😌

[@mateenmahi]

That's awesome

[@zalisco1]

THANK YOU BROTHER

[@CodeExplained]

You are welcome

[@azureliseraleighchocolatec6832]

Great.

[@mybMee]

thanks 😊👍

[@CodeExplained]

You're welcome.

[@sdfsdfsdffdsfsdfsd123]

thank you !!!!

[@CodeExplained]

You're welcome!

[@codingislife6387]

Thank Sir.

[@CodeExplained]

You're welcome.

[@ОнопрієнкоСергій-й3ю]

thanks so much

[@21398403]

Thanks for the video and please add a New video with paypal button.

[@Toast917]

helping me with my APCSP class 🫶🙏

[@jowarnis]

dude is using innerHTML to create elements.. I just cant.. terrible

[@CodeExplained]

hahah sorry

[@deeeera]

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?