JavaScript Shopping Cart Tutorial - Part 2/5

Project files: gum.co/pSpaA
★☆★ My Courses: telmoacademy.com/
★☆★ 1-on-1 Mentorship: calendly.com/telmosampaio
★☆★SkillShare 2 Months FREE : skl.sh/2Q2LsTi
★☆★ Best Website Hosting:
partners.hostgator.com/c/43399...
★☆★UDEMY COURSES:
*The Complete JavaScript Course 2018: bit.ly/2Ci2Fzk
*Modern JavaScript From The Beginning: bit.ly/2Br13BM
*JavaScript: Understanding the Weird Parts: bit.ly/2Epdgu2
*React 16.6 - The Complete Guide (incl. React Router & Redux): bit.ly/2Br2ikq
*The Complete React Web Developer Course (with Redux): bit.ly/2zXq9IH
* React Front To Back: bit.ly/2STDUPo
★☆★Best laptops for Coding:
Acer Aspire: amzn.to/2FJrOVh
Macbook Pro 2013: amzn.to/2NbYIUp
Asus VivoBook Pro: amzn.to/2YgrCUG
Macbook Pro 2019: amzn.to/2Xzi4qG
★☆★Best JavaScript Books
John Duckett JavaScript: amzn.to/2EAEvkj
JavaScript Easy Steps: amzn.to/2VRM4sN
JavaScript Good Parts: amzn.to/2EFul1V
Eloquent JavaScript: amzn.to/2Quq5qH
You dont know JavaScript: amzn.to/2K9I9VX
My Social Media:
Twitter: / devtelmo
Instagram: / sampaiotravels

Пікірлер: 116

  • @Bonksy42
    @Bonksy424 жыл бұрын

    I absolutely love this tutorial. Well structured, easy to understand, very useful. I subbed!

  • @jtc9098
    @jtc90983 ай бұрын

    I’m just 6 minutes into this video and your JavaScript makes so much sense! Other people make it seem over complicated. Thank you!

  • @alvincalma1009
    @alvincalma10094 жыл бұрын

    This just keeps getting better. Best tutorial channel I've come across so far.

  • @Telmosampaio

    @Telmosampaio

    4 жыл бұрын

    Wow, thanks!

  • @stefaniacristini3674
    @stefaniacristini36742 жыл бұрын

    the best tutorial I have found. you have an amazing way of explaining, you go straight to the point, you are very clear, you manage to keep the attention on what you say. Thank you so much, it was really helpfull. I will follow yours tutorials from now on.

  • @prashanttanwar3261
    @prashanttanwar32613 жыл бұрын

    Best explaination of web storage on the whole youtube universe. Thanx a ton!!

  • @pinkym6934
    @pinkym69343 жыл бұрын

    Too Good!!!You have explained it so well. Slowly and step by step....I enjoyed this tutorial thoroughly...Thanks alot!!!!

  • @muruganrajesh2717
    @muruganrajesh27173 жыл бұрын

    I'm watching you video for the first time today it's now 2nd video. I feel totally understandable. Your way of explanation is amazing even a kid too can learn. Keep doing your great job bro. I'm in love with javascript after your teachings. Thank you so much. Subbed 🥰

  • @josephmbote4167
    @josephmbote41673 жыл бұрын

    This must be one of the well explained tutorial in JavaScript , Javascript seems more Easy, Thank you sir

  • @alinealhachem1659
    @alinealhachem16592 жыл бұрын

    There is nothing better than this explanation! thank you

  • @persmultimediadesigntutori1293
    @persmultimediadesigntutori12932 жыл бұрын

    Very good tutorial - and explanation of the console messages.

  • @arunsaklani9890
    @arunsaklani98905 ай бұрын

    I found this tutorial after 4 days and believe me no one can explain so much easy that you explain thnkyou sir ❤❤❤

  • @ytellyy
    @ytellyy Жыл бұрын

    thx you so so so so much for this tutorial all the tutorials didnt help and they didnt explain but you DID all you explained your code was simple (for me) but worked perfect so thank you 1000000 times for this tutorial

  • @codingtime3803
    @codingtime38034 жыл бұрын

    Thank you so much. You explained everything clearly.

  • @jacobo5165
    @jacobo51653 жыл бұрын

    This can be hard for people who don't know very good english (like me), but can be even hardest for people don't know javascript very well (like me too). Despite this, very good explanation

  • @iammakafui5667
    @iammakafui56673 жыл бұрын

    Hi @telmo what if i am querying my products from the database, hw do i get them to the products variable in the main.js file?

  • @imtiazxkhan
    @imtiazxkhan3 жыл бұрын

    Thank you so much Telmo. Appreciate it.

  • @NeaDuzIt
    @NeaDuzIt Жыл бұрын

    0:01 how did you put a size to your products? they're all the same sizes, how's that?

  • @rekkusu0955
    @rekkusu0955 Жыл бұрын

    How is your "Add to Cart" button acts like a button without those inputs ?

  • @khadiii60
    @khadiii603 жыл бұрын

    as u have added let products =[{}]. what if we have 100's of products, how can we add all of them in our array?

  • @sandhrasuneesh
    @sandhrasuneesh3 жыл бұрын

    sir for me in the cart button in navbar the number is not increasing or decreasing

  • @amymarais4909
    @amymarais49093 жыл бұрын

    This is so helpful! Thank you so much

  • @domasjun
    @domasjun2 жыл бұрын

    8:22 i have quest for help, i doing step by step and then i check console like you at the same time after first click it show "null" second click show 1. there my problem?

  • @kadirramazn
    @kadirramazn3 жыл бұрын

    Thank you so much my friend, you helped me a lot

  • @qoosimabdulghaniyy8773
    @qoosimabdulghaniyy87732 жыл бұрын

    Wonderful explanation. Kudos brother.

  • @jamaicaman1323
    @jamaicaman13233 жыл бұрын

    i am stuck on step 1, when I use querySelectorAll, carts length remains 0, I have checked the spelling and everything but nothing works, please help!

  • @avinash6097
    @avinash60973 жыл бұрын

    How do you do this when your products are stored at backend say Im using Firebase. Need HELPPP!!1

  • @olivezavrankova1341
    @olivezavrankova13414 жыл бұрын

    Hey. My cart span is not updating. What could be the cause of it?

  • @fatimaahmed7970
    @fatimaahmed79704 жыл бұрын

    it does not work with my becouce the cart[i] is not function

  • @zeeqmu8048
    @zeeqmu8048 Жыл бұрын

    Man, even if I put in the same tag than my image, all the products that I select in the « application » have the same tag and proprietaries than the first product …. Can you help me please ??

  • @mickwhyte4204
    @mickwhyte42044 жыл бұрын

    Great tutorial. Bravo !

  • @beticohernandez9536
    @beticohernandez95364 жыл бұрын

    Hello, where do you get those data?

  • @nguyenhoanghieu6124
    @nguyenhoanghieu6124 Жыл бұрын

    thanks bro . have nice day !

  • @TechnoArt_by_HiraSultani
    @TechnoArt_by_HiraSultani2 жыл бұрын

    Thank you Telmo Sampaio...

  • @bhargavreddybhargav2677
    @bhargavreddybhargav26772 жыл бұрын

    Why I am getting file not found error when I try to get images in cart

  • @latvianhercules6265
    @latvianhercules62652 жыл бұрын

    nice one. but how do you limit quantity?

  • @zenkia7624
    @zenkia76243 жыл бұрын

    Thank you so much ❤️ helped me alot

  • @Boccione07
    @Boccione073 жыл бұрын

    Probably is the italian accent that let me understand most of the stuff! THX

  • @gabijasmolskiene396
    @gabijasmolskiene3964 жыл бұрын

    then I used your function onLoadCartNumbers() { let productNumbers = localStorage.getItem('cartNumbers'); if (productNumbers) { document.querySelector('.cart span').textContent = productNumbers; } } onLoadCartNumbers(); I get console error Uncaught TypeError: Cannot set property 'textContent' of null in line document.querySelector('.cart span').textContent = productNumbers; I try document.querySelector('.cart span')[0].textContent = productNumbers; but still get console error. any advise?

  • @deveshsharma823
    @deveshsharma8234 жыл бұрын

    Sir, after refresh cart value not returns to 0. Sir please help it's urgent. Waiting for reply sir.

  • @carloseduardogomes9262
    @carloseduardogomes92622 жыл бұрын

    thank you my brow for this super tutorial

  • @alvinrobert3927
    @alvinrobert39272 жыл бұрын

    clear explain thank you , good bless you😇

  • @thomescribanti3228
    @thomescribanti32282 жыл бұрын

    i love u telmo

  • @katanpanggeng8467
    @katanpanggeng84672 жыл бұрын

    Great tutor Sir you are, thank you so much !❤

  • @irlandaise5631
    @irlandaise5631 Жыл бұрын

    Hi, I am trying to add the products but it won't work. I have buttons on my site. I did copy your script exactly . I tried to wrap the button but not sure , also added the add-cart in the button class but I realise you need this hyperlink maybe. Add to cart

  • @KnotJuly
    @KnotJuly2 жыл бұрын

    The LocalStorage part doesnt work for me

  • @mohamaddadh3493
    @mohamaddadh34932 жыл бұрын

    thank you so much

  • @sarikakore8939
    @sarikakore89392 жыл бұрын

    Sir this is the best video to learn how to add items to cart but please explain how to remove them

  • @andreabcolina
    @andreabcolina3 жыл бұрын

    So helpful!! thank you so much!

  • @AntonioRodrigues-ko2js

    @AntonioRodrigues-ko2js

    3 жыл бұрын

    lml

  • @Magistrado1914
    @Magistrado19144 жыл бұрын

    Excellent course 10/08/2020

  • @asbdinaasirsuleyman-rr3cz
    @asbdinaasirsuleyman-rr3cz6 ай бұрын

    Thanks

  • @arwindthd
    @arwindthd2 жыл бұрын

    Man, you just saved my degree life

  • @tuxcabuenas7598
    @tuxcabuenas75983 жыл бұрын

    what software is he using?

  • @essenc3189
    @essenc3189 Жыл бұрын

    very well explained :) 10x mate

  • @AdiAmarr
    @AdiAmarr4 жыл бұрын

    Hey, I'm having an issue, I don't understand how you were able to pull the products just by the tag name, I mean where is that tag declared exactly cuz I got confused...

  • @Telmosampaio

    @Telmosampaio

    4 жыл бұрын

    your images, should have the same name as the tagName

  • @weissestangel4172
    @weissestangel41724 жыл бұрын

    Hey I have an error in cartNumbers(); at the line 6 I do not know why ?

  • @Telmosampaio

    @Telmosampaio

    4 жыл бұрын

    Hey check the files in the description

  • @K-kunnn
    @K-kunnn4 жыл бұрын

    Hello, i'm having a bit of an issue in the 1st line when i type "let carts = document.querySelectorAll (".btn"); " , (my ".btn", is the add-cart in your case), i keep getting an error called "Parsing error: Unexpected token carts". I'm confused since i just copied u in that part, i didn't see u define it anywhere else expect in the .js file? Is there a way to fix this error? or can you explain it in a simple way, since i'm still new this javascript

  • @chaudharyahmad2991

    @chaudharyahmad2991

    4 жыл бұрын

    dont type .

  • @dylanpilotto4368

    @dylanpilotto4368

    3 жыл бұрын

    did you get a solution man?

  • @applezhe19
    @applezhe194 жыл бұрын

    Hi, may I know why my console.log("running") can't show in Google chrome console??

  • @surreal9558

    @surreal9558

    3 жыл бұрын

    this is an oldercomment, but remember that

  • @applezhe19

    @applezhe19

    3 жыл бұрын

    @@surreal9558 alright thanks bro

  • @vladcristian5106

    @vladcristian5106

    3 жыл бұрын

    @@surreal9558 thank you dude, I searched the same thing and reached your comment

  • @angeloszacharioudakis9052
    @angeloszacharioudakis90524 жыл бұрын

    if i have .add_cart::after how can i change it in js file?

  • @dmns18

    @dmns18

    3 жыл бұрын

    Portuguese

  • @IIIIKaroIIII
    @IIIIKaroIIII2 жыл бұрын

    It's black friday, can you give us a discount code for the files? :)

  • @krystianwojtowicz9305
    @krystianwojtowicz93054 жыл бұрын

    it does not work when i have the same like you ;/, what about your images? where are they from?

  • @Telmosampaio

    @Telmosampaio

    4 жыл бұрын

    Hey Kristyan, you can use any images you would like, there is also a link on the description to download the files and images if you want of course....

  • @krystianwojtowicz9305

    @krystianwojtowicz9305

    4 жыл бұрын

    @@Telmosampaio if I dont have any photo in one of that 4 parts it is possible to click add card, I can't do it otherwise

  • @mauromatos3124
    @mauromatos31242 жыл бұрын

    Thank you , obrigado Telmo.

  • @Telmosampaio

    @Telmosampaio

    2 жыл бұрын

    De nada Mauro, espero que tenha ajudado

  • @melssf7852
    @melssf78522 жыл бұрын

    THANK YOU!!!!

  • @chinedunwobi4247
    @chinedunwobi42473 жыл бұрын

    Can this make transactions

  • @trungsonnguyen5098
    @trungsonnguyen50983 жыл бұрын

    thank you !!! 😁😁😁😁

  • @nejraploskic7
    @nejraploskic74 жыл бұрын

    Hi I have a problem with onLoadCartNumbers function. I think that is about that you forgot to put else after if.

  • @TheRegan0704

    @TheRegan0704

    4 жыл бұрын

    i also have an error here. when i go to the cart page it says "Uncaught TypeError: Cannot set property 'textContent' of null at onLoadCartNumbers"

  • @TheRegan0704

    @TheRegan0704

    4 жыл бұрын

    nevermind, forgot the add the cart class to cart.html page

  • @joe-powell
    @joe-powell4 жыл бұрын

    I am dong this tutorial twice because it is one of the best tutorials telmo. btw, is using he local storage like this used in the job also? like in a real production applications for front end or is this just for learning purposes?

  • @kshitijkumarsaini9501
    @kshitijkumarsaini95013 жыл бұрын

    Awesome tutorial. Cheers to you dude. But How Can I get the data from my database table which is in array format and use it in javascript code as an object...

  • @avinash6097

    @avinash6097

    3 жыл бұрын

    Did you get the solution bro?

  • @kshitijkumarsaini9501

    @kshitijkumarsaini9501

    3 жыл бұрын

    @@avinash6097 yes

  • @avinash6097

    @avinash6097

    3 жыл бұрын

    @@kshitijkumarsaini9501 please help me too bro. I am using firebase as my database and JavaScript as backend

  • @kshitijkumarsaini9501

    @kshitijkumarsaini9501

    3 жыл бұрын

    @@avinash6097 try this kzread.info/dash/bejne/lHqol6d6aZjYfrA.html

  • @avinash6097

    @avinash6097

    3 жыл бұрын

    @@kshitijkumarsaini9501 it will be a great help if this will work fam. Can you give your discord or something where can I hit you up if I have further doubts? mine is NEMEBRO#4751.

  • @ngkenleong555
    @ngkenleong5553 жыл бұрын

    AT 10:15 Google Chrome only shows the first product that I type in, the second product that I type in is not showing at the console. Is it because that, I create one product in one html page( not same as you, you have all product in one html page)? Can anyone help me please, I need help for my assignment. Thank you so much

  • @Javous12345

    @Javous12345

    3 жыл бұрын

    do you fix it because im having the same error like you so i need some help pls

  • @ngkenleong555

    @ngkenleong555

    3 жыл бұрын

    @@Javous12345 I am not really remember how to fix the error, but i remember that i was missing some steps (code) from the video. Just watch the video again carefully . Hope this can help you. Good Luck, dude!

  • @Javous12345

    @Javous12345

    3 жыл бұрын

    @@ngkenleong555 it ve been a month ago bro 😝 but i just relearn local storage and do my own and then i ve no errors 😉

  • @ngkenleong555

    @ngkenleong555

    3 жыл бұрын

    @@Javous12345 I see🤣. Congrats bro🎉

  • @olayodeoluwafemi7902
    @olayodeoluwafemi79024 жыл бұрын

    Hello, this has been so helpful, I will like to ask, what if in the case where you have a lot of products, how do you reference the products, do we list them in the products object like you created or is there any other way to get the object when you click on add to cart. i tried to use the getElementByClassname but it was not giving me the required result.

  • @danielway6223

    @danielway6223

    4 жыл бұрын

    yeah I'm having the same problem and I can't figure out what is going on if i do find anything I will let you know

  • @TheTallOne1996

    @TheTallOne1996

    3 жыл бұрын

    Same issue! @Telmo Sampaio do you have an answer?

  • @hussienalzeer4975

    @hussienalzeer4975

    3 жыл бұрын

    i was about to ask the same thing, in my case i have database with all the information so they will have the same classes names , i cant do the same as him ,and making like dosnt is bad idea when you have huge database ,please someone answer me ,i have looking for an answer for so long .

  • @shaimajrayed4858
    @shaimajrayed48583 жыл бұрын

    Thank youuuuuuuuuuu

  • @ramseyj3024
    @ramseyj30244 жыл бұрын

    Nice!

  • @kahpohpang4864
    @kahpohpang48643 жыл бұрын

    good!!!!!!!! I like it

  • @fivestarpupy159
    @fivestarpupy1592 жыл бұрын

    keep having error

  • @shen9043
    @shen90434 жыл бұрын

    super

  • @Grow_wid_sid
    @Grow_wid_sid4 жыл бұрын

    I am unable to download the code please can u assist or can u send me the code on my email id

  • @Telmosampaio

    @Telmosampaio

    4 жыл бұрын

    Hi Siddharth, did you buy the files?

  • @n.thelegend9671
    @n.thelegend96714 жыл бұрын

    U did not define carts From the beginning why ?

  • @n.thelegend9671

    @n.thelegend9671

    4 жыл бұрын

    I need ur help plz

  • @ftnesrine8183

    @ftnesrine8183

    2 жыл бұрын

    I'm facing the same problem, did you fix it ?

  • @lucasrossetto1294
    @lucasrossetto12944 жыл бұрын

    12

  • @ulvihmdli688
    @ulvihmdli6884 жыл бұрын

    let carts=document.querySelectorAll('.add-cart'); let products=[ { name:'Gray T-Shirt', tag:'Graytshirt', price:15, inCart:0 }, { name:'Blue T-Shirt', tag:'Bluetshirt', price:20, inCart:0 }, { name:'Yellow T-Shirt', tag:'Yellowtshirt', price:10, inCart:0 }, { name:'Lowers T-Shirt', tag:'Lowersshirt', price:25, inCart:0 } ] for(let i=0;i{ cartNumbers(products[i]); }); } function cartNumbers(product){ console.log(product); let productNumbers=localStorage.getItem('cartNumbers'); productNumbers=parseInt(productNumbers); if (productNumbers) { localStorage.setItem('cartNumbers',productNumbers+1) document.querySelector('.cart span').textContent=productNumbers+1; } else{ localStorage.setItem('cartNumbers',1); document.querySelector('.cart span').textContent=1; } } function onLoadCartNumbers(){ let productNumbers=localStorage.getItem('cartNumbers'); if (productNumbers) { document.querySelector('.cart span').textContent=productNumbers; } } onLoadCartNumbers();

  • @yakligian
    @yakligian2 жыл бұрын

    Me in 2022 using copilot to predict the code...

  • @stkmedia5293
    @stkmedia52933 жыл бұрын

    no thanks, prefer other methods like cookies and ajax products from db

  • @khalidrafiqkrkhan3600
    @khalidrafiqkrkhan36002 жыл бұрын

    Sorry but this series is an exact copy of another done by someone who knows the subject matter.

  • @priyamvishwakarma2941
    @priyamvishwakarma29412 жыл бұрын

    Ak dam bekar h