Javascript project: Shopping cart tutorial [ For Beginners ]

Поділитися
Вставка
  • Опубліковано 30 чер 2024
  • In this video you will learn how you can use javascript to add different functionality to a shopping cart. The video shows how you can add and delete products to the shopping cart and also how you can store data to the localstorage so when a user reloads the page or closes the web browser the data will remain in the shopping cart.
    ____________________________________________________________________
    5 Javascript projects for beginners: • 5 Small and Easy Vanil...
    ____________________________________________________________________
    ⏲ Timestamps:
    [0] 0:00 Introduction and demo
    [1] 2:23 Start coding
    [2] 4:25 Add products to Cart
    [3] 20:00 Add the functionality to plus and minus buttons
    [4] 27:03 Add products to local storage
    ____________________________________________________________________
    The Source Code:
    github.com/Index-Zero-0/JS-Sh...
    ____________________________________________________________________
    Please LIKE and SUBSCRIBE for more content and supporting!

КОМЕНТАРІ • 59

  • @greendragon0009
    @greendragon0009 2 роки тому +1

    Really set me on the right track. Thank you so much. :)

  • @emreaydogdu5413
    @emreaydogdu5413 2 роки тому +2

    I am really appreaciated that you serve ADVANCED piled Knowledge to all. You would enlighten us in case you elaborate HTML CSS relation as it contains a set of elusive attributes.
    Hope to see your continuous UPLOADS :)

  • @umanggharat4700
    @umanggharat4700 2 роки тому +2

    This is very Good Explaination and clean code then what i watch earlier... Thanks for this video

  • @andresmandique3405
    @andresmandique3405 Рік тому +1

    Excellent video, thank you very much and God bless you!

  • @hossam_san
    @hossam_san 2 роки тому +1

    Very good and robust code .. keep it up

  • @zimabezsnega
    @zimabezsnega 2 роки тому +1

    Thank you so much man)

  • @mardikagop4600
    @mardikagop4600 2 роки тому +1

    very very very nice, thank you

  • @nizamramazanov8393
    @nizamramazanov8393 Рік тому +1

    Thenk for help

  • @irfanisgandarov6838
    @irfanisgandarov6838 2 роки тому +1

    thank so much

  • @andibregovina9140
    @andibregovina9140 2 роки тому +1

    change title from toturial to tutorial and make the best css design cuz in simple css visitors excits video and to to another video
    btw wish you the best for channel!

  • @JohnBywaters
    @JohnBywaters 2 роки тому +2

    Looks amazing however I know a little bit of coding and this demo seems very advanced for beginners

    • @index-zero
      @index-zero  2 роки тому +1

      Maybe you are right, I wrote for beginners just because the most codes in this video are basic javascript. But often it is really difficult to determine if some projects are for beginner or intermediate.

  • @mohammedalhelw340
    @mohammedalhelw340 2 роки тому +1

    Thank you 😍😍😍😍😍

  • @andresmandique3405
    @andresmandique3405 Рік тому

    I have a question, how can I make to work “search for”?
    Could you help me please?

  • @vietnguyenmanh2623
    @vietnguyenmanh2623 2 роки тому +1

    thank you but can you help me how can i get data from that localstorage into my back-end with jsp servlet

    • @index-zero
      @index-zero  2 роки тому

      Sorry I never worked with servlet.

  • @eliabandinelli7858
    @eliabandinelli7858 2 роки тому

    hello index-zero, i can't understand why the console says that the const parentElement doesn't exist

  • @kingowende2416
    @kingowende2416 2 роки тому +1

    Thank you so much dude, can you create product details and payment page, Help Please. :)

  • @emmaoye2704
    @emmaoye2704 Рік тому

    How can I add this to an existing project?

  • @andresmandique3405
    @andresmandique3405 Рік тому

    How much is it? Because I want to know how make to work “search for”.

  • @geethanjaligajulapalli3189
    @geethanjaligajulapalli3189 2 роки тому +1

    Am not getting iteams in cart even added to cart

  • @rodrigoromano7608
    @rodrigoromano7608 2 роки тому

    I don't see cart button... help me!

  • @chillphyll6925
    @chillphyll6925 2 роки тому +2

    how can i remove all the items in the cart at once? like a clear cart button

    • @index-zero
      @index-zero  2 роки тому +1

      Atually I didn't add this option but you can add another button in shoppingcart then add an event listener on it and set productsInCart to an empty array.

    • @abulalalalalaabulala4521
      @abulalalalalaabulala4521 2 роки тому

      productInCart = [] ;

  • @imrulkayes5941
    @imrulkayes5941 2 роки тому

    how can you add remove from cart button? I've tried to reuser the splice method but didn't worked

  • @glevig2005
    @glevig2005 2 роки тому +1

    good work but ı clicked cart icon but did not show added products and prices on responsive design. how to fixed this issue ?

    • @glevig2005
      @glevig2005 2 роки тому +1

      worked but when ı clicked to hamburger.

    • @index-zero
      @index-zero  2 роки тому +1

      @@glevig2005 I fixed it there was some problem with html and css codes. 😁

    • @glevig2005
      @glevig2005 2 роки тому +1

      @@index-zero can you share files with me ?

    • @index-zero
      @index-zero  2 роки тому

      @@glevig2005 I updated the github repository so you can download it from there.

    • @glevig2005
      @glevig2005 2 роки тому

      @@index-zero i think issue with .overlay class. which changes property of html and css files?

  • @MicahFishel
    @MicahFishel 2 роки тому

    I don't know why but I can't get the very beginning part where I click cart and it opens cart. Everything else works i can see it in inspect but i can't get the cart to open

    • @MicahFishel
      @MicahFishel 2 роки тому

      Never mind I figured it out. Thank you so much. Great tutorial that actually works

    • @naomia.h8035
      @naomia.h8035 2 роки тому

      how did you fix the issue

    • @rodrigoromano7608
      @rodrigoromano7608 2 роки тому

      @@MicahFishel
      how did you solve the problem

  • @rajkumarm8088
    @rajkumarm8088 Рік тому

    Please does soft soft need a driver for midi controller? Coz it's not reading my midi controller, m-content oxygen49, thanks if it need please

  • @arisdwiwahyudi6143
    @arisdwiwahyudi6143 2 роки тому +1

    can you share link box icon please

    • @index-zero
      @index-zero  2 роки тому

      I used font awesome, you can get a link for it using cdnjs.com , then just include it in your html file. The name of this icon is shopping-cart so you can search it in font awesome website.

  • @naomia.h8035
    @naomia.h8035 2 роки тому

    help, i cant open the cart

    • @qalinlecilmi947
      @qalinlecilmi947 2 роки тому

      Mastarcard aan anigu leehay hadayna ku cadayn

  • @cjcalamba5294
    @cjcalamba5294 2 роки тому +1

    I don't see cart button

    • @index-zero
      @index-zero  2 роки тому

      In which browser you're opening the index.html file?

    • @cjcalamba5294
      @cjcalamba5294 2 роки тому

      @@index-zero in chrome

    • @cjcalamba5294
      @cjcalamba5294 2 роки тому +1

      Can you help me sir..

    • @index-zero
      @index-zero  2 роки тому

      I dont know why you dont see it I tested in chrome and it works just fine just make sure you have internet connection for font-awsome icons

  • @andresmandique3405
    @andresmandique3405 Рік тому

    I pay you

  • @okechukwuchibuike3878
    @okechukwuchibuike3878 2 роки тому +1

    Please @index-zero I have some problems with my cart