Javascript Project - Shopping Cart
ฝัง
- เผยแพร่เมื่อ 15 ก.ย. 2018
- Javascript Project - Shopping Cart
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!
Source Files
github.com/john-smilga/js-car...
COUPONS BELOW!!!!!!
BOOTSTRAP COURSE
www.udemy.com/bootstrap-4-bet...
www.udemy.com/bootstrap-4-bet...
JAVASCRIPT COURSE
www.udemy.com/javascript-tuto...
IN DEPTH HTML AND CSS
www.udemy.com/in-depth-html-c...
RESPONSIVE WEBISTES
www.udemy.com/responsive-webs...
JQUERY COURSE
www.udemy.com/jquery-tutorial...
FLEXBOX COURSE
www.udemy.com/css-flexbox-tut...
GRID COURSE
www.udemy.com/css-grid-tutori...
RESPONSIVE COFFEE SHOW WEBSITE
www.udemy.com/responsive-coff...
RESPONSIVE CAR DEALERSHIP
www.udemy.com/responsive-car-...
![รวมเพลงลูกทุ่ง 6 หนุ่มไทบ้าน ฮิตติดกระแส ชุดที่ 1 l มนต์แคน ไมค์ ไผ่ เสถียร ไหมไทย พี [Longplay]](http://i.ytimg.com/vi/GD2v1OjMw5I/mqdefault.jpg)
![[TH] VCT Pacific Stage 2 - Playoffs Lower Bracket Final // PRX vs DRX](http://i.ytimg.com/vi/5HwO1bQyAx4/mqdefault.jpg)
Once again, another awesome project done. Thank you so much John!
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
I love this guy!!! you are the best for me. Thank you so much
Brother you are doing great job please continue awesome videos.
Thanks a million, great tutorial!
Thank u for this awesome video
You're the best man 🙌
Dope tutorial. You have a new subscriber!
Coding Addict "Let me make sure that im spelling this correctly, because it is not gonna work if its not written corectly" Thats why i love you :D simple straight and genius at once :D
thank you very much sir. learned a lot
Great content, keep them coming
Awesome😍😍, thank you teacherrrr💖💖
This dude is a blessing!!!!!
Thank you so much. Is there a tutorial for checkout page to insert database using php for shopping cart ?
perfect explanations. doing simple projects like this is the best way to learn any programming language. Theory is good by itself, but once you heard there you forgot it. but these projects are just perfect. so just keep creating new JS projects like this and the number of your folowers will always increase
i guess it is kinda off topic but do anyone know of a good site to stream newly released series online?
@Emory Saint I use Flixzone. Just search on google for it :)
@Amir Michael yup, I have been using Flixzone for months myself :)
@Amir Michael Thank you, I signed up and it seems to work :) I really appreciate it !!
@Emory Saint you are welcome :D
very nice work. great design !
Please answer how to make the filter button and search function?
Good job
what's gonna happen when you have more than 6 items in your cart? I mean doesnt it get overflowed the height size of the page?
thank you alot for this well explained and helpful video
how do i make the delet buttons work and update both the total price and item count?
Very good Tutorial, however I have a question, why did you use self invoking anonymous function?
It's awesome.
What is the slice method because it says full path is not defined
Is there a second part of this?
Can I know the next step to implement Clear cart and Checkout section
Awesome video, thanks so much for sharing!!
Hi erika can we talk?
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
where is the part two of the video ?
How can I make my navbar and my shopcart menu stick while i'm scrolling??
if you're planing to make a follow-up of this tutorial please consider adding functionality showing cart is empty message in the toggle bar when it is empty.
But i am making a project in php and now i need a cart can i implement this?
great video thank you very much
why is the js not working through the gifthub
Thanks!!!!👍
The addEventListener is not working in IE edge. It will work in other browsers. What worked for me in IE edge is, you need to properly close the meta tags:
Thank you!
thank you very much and it is really helpful for learning Javascript for beginner like me. Can I get the Javascript what you coded?
thanks bro so much
Uncaught SyntaxError: Unexpected token
where is the opening of line img src="img-cart/cake-2.jpeg" class="img-fluid rounded-circle" id="item-img" alt="">
Your video content is mesmerizing and awesome. Thank you coding addict.
Glad you enjoy it!
ty for this project
Thanks!! It's great tutorial video! I want to learn other function. ex) clear. delete ^^
please provide the html, css, bootstrap video part of this video.
Bro iam new for a programing i want to do a project in Java script.
I do what you are do in this video i put in a netbeans it is ok
thanks you for the video but what if your store is in another page
app.js is empty in repo
Are you saul from Better Call Saul,Breaking Bad ???Your voice is so similar to his.....LOL
thank you so much....
i need this code pls send me link downld this code
thank you
Uncaught Syntax Error: Unexpected Token
what's this???
Hi, where is the COUPON PLS
I deleted this alert and did it a bit better way imo.
let itemImg = event.target.parentElement.previousElementSibling;
itemImg.classList.add('opacity');
and then i created a class in css .opacity {
opacity: 0.3;
}
Now after buying some product, they lose their opacity to show us that it is already bought :)
@Pi no chlop ogolnie zna sie na programowaniu i pisaniu dobrych linijek kodu ale co do wizualnej kwestii to jego stronki wygladaja przecietnie :D
hey sorry sir i need help with how to delete products from the cart using this project can you pliz help me out am in need of it i have tried looking for that code but have failed am new in programming so pliz help me out
Keep deleting card what happened?
Excellent tutorial
21/02/2020
hi sir my pictures are not working
Bro where the image putting
with imgSrc you could use getAttribute();
What about delete item from cart?
How can i remove a particular item from cart by clicking on delete icon?
I cover it in this video:
th-cam.com/video/90PgFUPIybY/w-d-xo.html
great video thanks I learned alot.... please i'm trying to delete and clear the item in the cart but i'm having some difficulties please guide me
hello im stuck with the alert, can you help me sort this out please ?
(function deleteItem() {
console.log('deleting item')
const deletebtns = document.querySelectorAll('.fa-trash')
console.log(deletebtns)
deletebtns.forEach((btn) => {
console.log(btn)
btn.addEventListener('click', (e) => {
console.log(e.target.parentElement.parentElement)
const target = e.target.parentElement.parentElement
target.remove()
// update total on delete call
showTotal()
})
})
})();
can anybody help me? it's so urgenttttt... who know how to pass the cart item to be displayed on the other page? PLEASE HELP MEEEE :'(
app.js:21 Uncaught ReferenceError: fulPath is not defined
at HTMLSpanElement.
how to solve the problem?
look where fulpath is defined, i think you have misspelled it it should be double ll in fullPath
Uncaught SyntaxError: Unexpected token <
what is wrong?
post complete code
@@muhammadfaateh6463 did it work for you ? i need some help! something is wrong with my alert! help me please!
its working sir but its undefined
Did u use bootstrap in this project?
Yes, he did
hi sir can i get the codes
Thankyou sir!
did it work for you ? i need some help!
my pictures in the shopping cart
dude could you give me a hint how to continue practicing javascript? I did the course in udemy and I learned well, but javascript seems like I can not develop
My advice is by creating simple project. Something like todo list, calculator, text editor, or quizzes. In my experience, it helps me a lot to understand the dom structure and else. Go to js.bin and play javascript in there
@@ryanadi6016 thanks for reply friend, I'm trying to learn javascript and it seems impossible
I think my main problem is that I do not know how it is used, they only say that it is used on the web to make the website more dynamic, and I can not go deeper than that
and people only teaches such of the exercise of the calculator, I wanted to go further
I'm looking for projects to understand their functionality.
@@cedrio1027 well everyone has its own way i guess. I'm just like you 3month ago, only learning from codecademy, not building any real application. 1 month passed and i think i dont make any progress. So, i embrace myself to build to do list app using javascript.
Its really hard for me to start you know. Because im never learn anything about getElementById or anything else in codecademy. But once you did it and succeed. You will be addicted to it. Thats happened to me and i cant sleep without doing 1 line of code.
I cant tell myself if im professional, but i build 10 project in 2 month. And right now im learning framework.
I really hope that you can get out from your impossible mind. Stay cheers dude
thx man
Hi, thanks for the tutorial, it is really detailed and nice to follow. I am having one problem tho, how would I subtract from the total when using the delete from cart button? I've got the delete button working using this function but I cant figure out how to update the total:
function deleteFromCart(deleteItem){
const cartDeleteBtn = document.querySelectorAll('.cart-item-remove');
cartDeleteBtn.forEach(function(btn){
btn.addEventListener('click',function(event){
if(event.target.parentElement.classList.contains('cart-item-remove')){
let fullPath = event.target.parentElement.parentElement;
fullPath.remove();
}
});
});
}
We did 3 to-do projects with removing items. You can use functions from those projects
@@CodingAddict I found out how to remove items, do you have any videos on managing when the same item is added multiple times to the cart to add something like (2) at the end and setting the price up?
Not yet
@@Tobbergur how did u do it, im very noob to this and i have watches other tutorials and cant seem to get it work
one opening div two closing div.
my partPath not working, why is that?
there an error stating partPath cant find the img
th-cam.com/video/0I1TorcXFP0/w-d-xo.html
All working code: github.com/Pawel-Chmiel/sweets-store, live: pawel-chmiel.github.io/sweets-store/
Hi is this shopping cart with local storage?
No. I did other projects with local storage first and did not use local storage in this project
and if I click on the About button...will all the products be saved in the shopping cart?
:s
Oh I see... i find it very difficult to add the local storage...where do I need to put the code for the local storage? I need to do a school project and I don't have that much knowledge of Js :/
you sound a lot like Vito Corleone from The Godfather
anybody notice that?
heard that before, old joke
@@CodingAddict you do though
😂😂
app.js is empty in your project folder.
correct. setup folder is only for html and css
This project is incomplete, you did not explain about clear cart and checkout
quit being unappreciative you prick
please how to remove
look at the playlist. it's the same logic as for todo list.there are 3 projects with todolist in the playlist
thanks a lot men
${}; not working why ???
use backtick
*Visit **_freecodecamp.org_** channel for original video. Or click here: **th-cam.com/video/q_TZhCWbS3I/w-d-xo.html*
Ha ha.
So now I don't own my own videos.
Thank you for letting me know.
@@CodingAddict *Sorry! Sir, I thought someone pirated this video.*
Always wanted real project using JavaScript. May God bless you, sir. Read Qur'an
Why not getting price like this?
item.price = event.target.parentElement.parentElement.nextElementSibling.firstElementChild.lastElementChild.lastElementChild.innerText
It returns price without space and $.