Javascript Projects - Shopping Cart
ฝัง
- เผยแพร่เมื่อ 31 มี.ค. 2019
- Javascript Projects - Shopping Cart
Setup Files
github.com/john-smilga/setup-...
Products I Use:
Microphone - Shure SM7B - amzn.to/3fX55aD
Headphones - Shure AONIC 50 - amzn.to/3zbkxHC
Desk-Mounted Microphone Stand - amzn.to/3x3MBuS
Crossover - dbx 234s - amzn.to/3xcryGC
Audio Interface - Focusrite Scarlett 2i2 3rd Gen - amzn.to/3pt1wMx
Cheaper Microphone (My first mic) - Blue Yeti USB Mic amzn.to/3iliwTm
Blue Light Blocking Glasses - amzn.to/3fZASrv
Apple MacBook Pro 13.3" - amzn.to/3z5QDEK
iMac - amzn.to/3glWmOe
Second Monitor - LG 4K UHD 27UD88 - amzn.to/3ckdwdV
Wifi Router - TP-Link AC1900 - amzn.to/34ZSddz
Desk Chair - amzn.to/3ikNbQJ
Standing Desk - amzn.to/3zdKVAJ
Books I Recommend:
The Subtle Art of Not Giving a F*ck - amzn.to/3v9t8Yi
The Tipping Point - amzn.to/3gCslKj
Atomic Habits - amzn.to/3x52xNa
12 Rules for Life - amzn.to/3gln8pN
Deep Work - amzn.to/3cyAgqu
Digital Minimalism - amzn.to/3gao69A
A World Without Email - amzn.to/351Swoe
Rich Dad Poor Dad - amzn.to/3v8RWQ6
Rich Dad's Cashflow Quadrant - amzn.to/3ivt1Uk
Check out My Amazon Store for more products and books recommendations - www.amazon.com/shop/codingaddict
Disclosure: This video is not sponsored. Some links above are affiliate links, and l may earn a small commission from any purchases at no additional cost to you. Thank you for supporting my channel!
COUPONS BELOW!!!!!!
React
www.udemy.com/react-tutorial-...
Gatsby
www.udemy.com/gatsby-tutorial...
HTML AND CSS
www.udemy.com/in-depth-html-c...
Bootstrap 4
www.udemy.com/bootstrap-4-bet...
Javascript
www.udemy.com/javascript-tuto...
CSS GRID
www.udemy.com/css-grid-tutori...
CSS FLEXBOX
www.udemy.com/css-flexbox-tut...
For doing this project, one needs to know: ES6 module, Asynchronous Javascript, Object Oriented Javascript, Knowledge of JSON, HTML5/CSS3. Great tutorial.
Learning takes time. Be patient. Take your time. Never stop learning and don't give up.
Your video content is mesmerizing and awesome.
Thank you Coding Addict.
thanks for the this comment i needed this coz i was felling sleep .BTW great video.
@become creative did you have an issue loading the image from the json file? I ran into some CORS browser security issues on both Firefox and Chrome. This happened about 1.5 hours into the course way before he uploaded it to Netlify or anything. I thought it was pretty wild that browsers won't even let you load local files with json anymore without throwing a CORS error.
@become creative eh, not really. The CORS problem is due to changes in newer browser versions. Some things which used to just give errors now are blocked. The error message even said blocking was going to start happening at a certain date.
@become creative Hey, just a quick update. Turns out his **Preview on Web Server** extension for VS Code was the crucial key to avoiding CORS errors. It runs local code in a mock HTTPS environment, apparently, which my other live preview extensions were not doing. I didn't even realize that was the issue since it took over an hour to start loading JSON which produces the CORS errors, and by that time I forgot he suggested we use that specific extension to preview our code in the browser. Without that particular extension, the solution is to turn off CORS security for your local browser.
Dude you are AWESOME. This is the most understandable video compared to others, I could see your patience in it.
I like your coding style(styled components) and logic, thanks for your knowledge sharing on TH-cam. Continue this way
Thanks a million!!! Спасибо! Дякую!
Awesome tutorial! Appreciate you explain everything in details, it is what makes it very useful for learning!
Enjoyed this tutorial using vanilla JS after viewing a few of your similar React projects. Very helpful to practice the fundamentals of Javascript. Thanks again!
I have just fallen in love with coding just because of you sir. Thank you so much for providing tremendously Awesome videos. And I am so addicted to your channel that you tube for me is code addict.
My js was effed up before watching your videos sir!! Its amazing to see how much my js has increased after watching your project videos!! Much love from Sri Lanka
I have taken much pleasure to watch this video. Thanks for all Mr John Smilga.
You are the best tutor I have ever come across on the internet John smilga you are my favorite.good work Bro
i just played this right now and watched untill 4:02 and i can already say "This is the best tutorial about ecommerce website..."
thank u.
Greetings from Iran
Wow, this is really amazing!!! I not only enjoyed the course but I also learned a whole lot. Thanks a million for the effort you put in creating and sharing this tutorial...By the way, I like the way you always say "my plan is very simple" ...thumbs up man :)
I learned a lot from this project. Thank you very much, John.
One of the best and most awesome tutorial I ever came across. This was fun, simply loved it! ❤
At 2020.... love your project sir.... thank you so much for giving opportunity to learn important things in open source...🖤🖤🖤...may Allah give you the right way...🖤
Amazing course! I just revisited it after 3 years or so and here are my tips: (1) Make a readme file so you don't forget details like the fact that you need to use the PREVIEW ON WEB SERVER EXTENSION in VS Code to avoid CORS errors and (2) it's Control+Shift+L to launch the site with that plugin. It needs a server environment, so "preview in browser" alone won't work.
Btw, I did just right click and used Live Server (Open with Live Server) instead of the Preview On Web Server extension and it seemed to work just fine. Maybe they fixed the issues with CORS errors in the LiveServer extension since he made this video.
This tutorial helped me a lot.
Complete content, rich in tips, to the point and fun.
I want to thank you for doing long tutorials, so I can plan my studies.
Thanks for your time and a great job.
Success in your current and future projects.
Vanilla...my favorite flavor! Great job!
Thank you so much! It's a very lucid and helpful tutorial
Very nice, bonus with Contentful, was sceptical at the beginning, but now I think Contentful will be very useful in my future projects. I am really liking your projects, you are a very good instructor. You didn't do anything with the Hamburger, but I think this is a good site to add your animated navigation from the "Basic Javascripts Project" video. Thanks again, looking forward to "Grandma's Sweet Project".
Looking forward to grasp it!✌️
Helped me so much im my final project on my degree! really explained well and beautiful! super tnx
I'm only a few minutes in but this is awesome! Really appreciate you sharing all this content, you deserve so much more recognition! Big fan of your page 🔥🔥
And that's why I use react. I just don't want to deal with flexbox and vertical centering and all those things that can be done with react so we can focus on the actual logic of the program or the meat of the program rather than worrying about those annoyances. But also, I appreciate your effort to make it with vanilla is.
Your language is excellent . everyone can understand
what an amazing video! Thank you for sharing your time and knowledge with us!
Taking for 4 hours is not a simple task, Thank you so much , ,.
You should try talking for that long!
Hi
"Long live Don John Smilga"
"Long live Don John Smilga"
"Long live Don John Smilga"
We really need high quality lectures.
Thank you very much for this!
i have watched all ur projects here , and i have learnt a lot , everything is well explained , u are awesome man !!!!!!
First I saw "I hate" and came to u to give a dislike, but it saw "I have". Lol 😂
Thank you so much sir. I learnt alot from this project and it aslo built my confidence in js.
The best shopping cart based tutorial ever.... not skilled enough to complete something like this in 4 hours but learnt a lot from it..... Thank you for creating great content!
Glad it helped!
I understand js in this one
video everything what i learnt last two month
This is a trully awesome project tutorial !!!
project finished. Thanks!!!
Simply awesome !!
Really nice tutorial, thanks a lot!
thanks for the tutorial, it's very helpful. Can you also teach how to set up the checkout button and the various shipping rates if possible? Thank you
js starts at - 1:12:56
Local Storage - 1:50:05 (Products.getProducts() and ui.displayProducts() are already set and invoked, for the display the 'result way' is used, where we set a 'result' string, loop through the products array and add html markup to the 'result', then we set productsDOM.innerHTML to 'result' ** each add to cart button has a unique idea taken from products.id )
bookmark - 2:05:30 (created a function called ui.getBtns() and invoked it after the items are loaded in the page, then got the id from each btn using btn.dataset.id ??...)
bookmark - 2:34:04
bookmark - 2:56:02
bookmark - 3:09:09
bookmark - 3:12:41
Hello could you help me, A small question, was JSON a database or something demonstrative?
Amazing content for someone still learning JavaScript. Keep up the good work
Thanks, will do!
@@CodingAddict I don't how to chat you directly. Let me just ask here. How can push the products array to contentful instead of localStorage? While build mine, Instead of saving the array in database localStorage, I saved it in an array of shoppinglist. Just to do things differently.
love you man really keep it going :)
came for learning javascript
but these css concepts turned out to be a bonus
THANK YOU :)
The best tutorial on yt ;)
Thank u for this awesome video
Beautiful project
awsome tutorial thank you so much
You are the best teacher, thank you!!!!!!!!!!
Thank you so much for this!
muchas gracias, no entiendo mucho inglés pero vi las 4 horas :) me sirvió mucho
Awesome project. Now, I know how much I don't know about javascript :(( :)) I wanted to leave the project in the middle but somehow I continued. It still pays of to know how the underlying technologies work to make a single website work. My gratitude and thanks to Coding Addict. Take Care !
You can do it!
Thank you for this awesome video !
Greetings from VietNam.
I love your videos ;-; I will be eternally grateful.
Amazing video. Thank you very much!
finally i understand the contentful. thanks.
this video is one of my favs, thank you Coding Addict
is it still up to date?
Like your projects
Thank you very much sir for providing such great projects to us. Every time i watch your tutorials i feel blessed. The way you teach is awesome. I don't have words to thank you. For me youtube means coding addict. I have an request sir, would you plz start a series of react-native tutorial in your style like teaching and projects together. Infinite thanks.
hi Rohit .. looks you have gone through the complete video , could you please suggest me whether any backend is used to store data.
or it's only frontend project?
I love it, Such an awesome video. Instructor describes each and every thing that he done in the project. Thankyou for this awesome video.
Glad you enjoyed it!
You have clever teaching skills.. Thank you ❤
I just finished the whole tutorial and I learned a lot. Thank you for this wonderful tutorial, sir! Helps a lot :) Btw, I'm also a fan of W.W from Breaking bad and Better Call Saul series!
If It works perfectly, could you give me your source code.
Excellent ,excellent tutorial
wow!! it's a mega project..
You are a code eater....happy to get to know about you
Excellent tutorial
youre amazing.... thx bro!
Thank you very much sir for providing such great projects to us. Every time i watch your tutorials i feel blessed. i followed you from freecodecamp now we're here together
You deserve more than thank you .
nice project to learn so many things in javascript
Thanks!!!!!!! More JavaScript please
He has located on this channel.Please,look at playlist of JavaScript projects
Thank you so much
Thank you 🙏
Thank you!
Could you build a project using test-driven development? Or even building a project and then adding tests in the end. I love your projects and learning test-driven development would be so much fun.
U are best of the world tech js
thank you dude ,, that was helpful content
Beautiful beautiful beautiful!!!!!
Thank you coding addict for this awesome project
Terimakasih Masseh
Thanks so much, bro. It was very helpful.
Glad it helped
Excellent videotutorial
11/08/2020
we expect more videos like this.Thanks
thank you so much keep on doing great work sir
Great job. I subscribed
I just wanna say #WOOOOOOOOOOOOOOOOOOOOOOOW YOU ARE AWESOME TNX A LOT
very very good course thank you coding addict
Thank you
OMG.. Like its a magic
Good job
Thanks
Best Explanation...
Thanks
you
Thank's for great tutorial. Could you make more different video lessons with development projects on javascript, react.js
very useful tutorial !! u help us understand the logic which is the most important thing
Glad you think so!
Will try to do this with react
Great tutorial! Helped me a lot. Unfortunately the pictures that I uploaded on Contentful are not showing up. Any advice on that?
awesome..
Спасибо Большое из Беларуси!)
i started watching javascript tutorial part 1 and part 2, but there are no where to be found on your playlist, could you please upload them or advise where i can find them, that's was my first contact with javascript, i would like to continue the course, the explanation was so easy. thanks again for making these tutorials so simple.
Excellent course
25/02/2020