@matiboxSubmitted about 2 years ago
I feel like I improved my skills so much during this project, I noticed I did my JS logic way faster than in the previous projects!
Any feedback is highly appreciated :)
Erick
@d3bu6m3All comments
- @d3bu6m3Posted about 2 years ago
Congratulation for finishing this challenge, I have something that I think it shouldn't work that way, It is the add (+) button in the quantity which is must be an add to the quantity but not to the cart item
1 item = 1 cart item (data-totalitem=1)
2 item = 2 cart item (data-totalitem=2)
1 item/2 quantity = 1 cart item (data-totalitem=1)
which mean is that if there is 2 different 'product id' you must see in the cart a number of 2 but if there is 1 product id but with 2 quantity the cart number must be 1 but the quantity which is ($125 x 2) should be increased
Marked as helpful1 - @MicMond01Submitted about 2 years ago
👾 Hello, Frontend Mentor coding community. This is my solution for the eCommerce-product-page-main.
Feel free to leave any feedback about my design chances and help me improve my solution or make the code clean!
@d3bu6m3Posted about 2 years agoCongratulation for finishing this challenge, I have something that I think it shouldn't work that way, It is the add (+) button in the quantity which is must be an add to the quantity but not to the cart item
1 item = 1 cart item (data-totalitem=1)
2 item = 2 cart item (data-totalitem=2)
1 item/2 quantity = 1 cart item (data-totalitem=1)
which mean is that if there is 2 different 'product id' you must see in the cart a number of 2 but if there is 1 product id but with 2 quantity the cart number must be 1 but the quantity which is ($125 x "2") should be increased
0 - @SaadiSidaliSubmitted about 2 years ago
It was difficult to handle state of the cart without using any library, I am not satisfied with my approach of passing the state the way I am doing in this project. I know I should use some other unit instead of pixels but this was my quick solution.
I am open for any suggestion ❤
@d3bu6m3Posted about 2 years agoCongratulation for finishing this challenge, I have something that I think it shouldn't work that way, It is the add (+) button in the quantity which is must be an add to the quantity but not to the cart item
1 item = 1 cart item (data-totalitem=1)
2 item = 2 cart item (data-totalitem=2)
1 item/2 quantity = 1 cart item (data-totalitem=1)
which mean is that if there is 2 different 'product id' you must see in the cart a number of 2 but if there is 1 product id but with 2 quantity the cart number must be 1 but the quantity which is ($125 x 2) should be increased
1 - @MavDavisSubmitted about 2 years ago
It's been a long time since I built this project but I decided to paste it her today. There are few errors which I'm most likely to revisit soon. You feedback is welcome still
@d3bu6m3Posted about 2 years agocongratulation for finishing this challenge bro! a little help for you, to achieve the cart item number that appears in the cart when you are clicking the "add button" you can use HTML Attribute "data-totalitems=0" then at your CSS use pseudo element ::before/::after "content: attr(data-totalitem)" to style it and finally at your javascript do the data manipulation increment/decrement
Marked as helpful0 - @vedatsozenSubmitted about 2 years ago
I could not make it responsive. Because in second part of page with background image and mobile phone images must be at top of div at responsive design. But i made its div with left text as display:flex; So i can not position image to top in div. So i did not make responsive design of page. Anyway i hope you like. Comments below please.
@d3bu6m3Posted about 2 years agodo you know that you can use flex 'order' to change the order number of flex items? if you do the mobile first approach the image is in the top of the text so when it comes to desktop if you will use flex the image will be in the left and the text will be on the right, to arrange their position you can use order: 1; for text and then order: 2; for the image so they will swap position, the image will be on the left part by doing this order. You can also use CSS Grid it can help you alot when positioning elements to the corresponding place
0 - @Eman-AbdallahSubmitted about 2 years ago
i think i do most of the work but navigation arrow not work and there are white space in mobile size i dont know why
@d3bu6m3Posted about 2 years agoCongratulation for finishing this challenge, I have something that I think it shouldn't work that way, It is the add (+) button in the quantity which is must be an add to the quantity but not to the cart item
1 item = 1 cart item (data-totalitem=1)
2 item = 2 cart item (data-totalitem=2)
1 item/2 quantity = 1 cart item (data-totalitem=1)
and you can use overflow: hidden to your "<main> to fix the whitespace your overlay is overflowing this is the reason why it has a white space on your mobile
Marked as helpful0 - @lil-dev16Submitted about 2 years ago
Is there a better way I could have displayed the items in the cart? Maybe like with the use of arrays and map method, Is that better?
@d3bu6m3Posted about 2 years agoCongratulation for finishing this challenge the approach you can do to achieve it using Javascript is to use innerHTML & insertAdjacentHTML
Use innerHTML to replace/update current Item price&quantity
Use insertAjacentHTML to add (different item ID) to the cart
1 item = 1 cart item (data-totalitem=1)
2 item = 2 cart item (data-totalitem=2)
1 item/2 quantity = 1 cart item (data-totalitem=1)
Marked as helpful1 - @jennstirpeSubmitted about 2 years ago@d3bu6m3Posted about 2 years ago
Congratulation for finishing this challenge, I have something that I think it shouldn't work that way, It is the add (+) button in the quantity which is must be an add to the quantity but not to the cart item
1 item = 1 cart item (data-totalitem=1)
2 item = 2 cart item (data-totalitem=2)
1 item/2 quantity = 1 cart item (data-totalitem=1)
0 - @Amaefula-JoelSubmitted over 2 years ago
The hero image on desktop view isn't great. Please suggest what i can do to perfect it.
@d3bu6m3Posted over 2 years agochange the background-size to 'contain', move it more to right until it overflows then hide the overflows to its parent
0
