I need Help!, I have been struggling on this particular project for some weeks now, Here are my problems: 1.) How do I get to track the number of quantity chosen by the user and display it on the cart-icon. 2.)How do I get the chosen quantity multiplied by the price and get total price. I have been going back and forth with DOM manipulation but have not gotten any results, please I need suggestions Thank you.
Alfie Mitchell
@alfiemitchell123All comments
- @ToniHunter274Submitted about 1 year ago@alfiemitchell123Posted about 1 year ago
Hi Oluwatoni,
Great job so far. I personally used React for this project, but this particular challenge is quite complicated if you're new to it. I found it to be one of the most difficult coding challenges I've done so far. If you're really stuck, I find it useful to post your code into ChatGPT and give it a prompt such as 'how do I add cart functionality in pure JavaScript', for example. It won't complete the challenge for you, but it'll give you code snippets and step-by-step instructions that you can learn from.
If you want to check out my code, here is a link to my completed challenge - https://www.frontendmentor.io/solutions/ecommerce-product-page-with-react-cFHbwSVxxM
Good luck!
0 - @jclomuSubmitted over 1 year ago
I can put in the same line "...front-end..." I tried changing the font size but doesn't work.
@alfiemitchell123Posted over 1 year agoGreat job with the solution! Your text layout issue might be because of the padding on the text div. Try removing the padding from .text and keeping the padding on the .card div. You can then set padding-top on the h1 and p tags to space them out.
This may work, but apologies if not!
.text { font-size: 15px; } .text h1 { padding-top: 10px; color: hsl(218, 44%, 22%); } .text p { padding-top: 10px; color: hsl(220, 15%, 55%); }
Marked as helpful0 - @alfiandwi93Submitted over 1 year ago
positive feedback please :D
@alfiemitchell123Posted over 1 year agoThis looks great and responds well when you resize the browser. I only noticed a couple of minor issues with your solution -
- On the mobile site, the menu toggle icon shows the sidebar and the close icon is displayed. When you do this for a second time, the close icon is no longer shown, and you are unable to close out of the sidebar. I had a look over your code, and I'm not sure exactly what the root of the issue is. I've attached a screen recording below (via WeTransfer) to show this.
- The second regards your coding structure. I would recommend separating your CSS and JS from your HTML by writing these languages in their own files and referencing them in the HTML document. This makes it a lot easier for anyone to read and debug your code.
Marked as helpful0 - @AjayPorwal268Submitted over 1 year ago
I would like to hear your opinions, especially about the project's organization and recommendations on best practices in page design. Any feedbacks are welcome.
@alfiemitchell123Posted over 1 year agoWell executed and looks great, but I did notice an issue with the cart feature. It's hard to explain the issue in writing, so I have attached a screen recording via WeTransfer. I think the problem is with state management, though I am fairly new to this as well, so I wouldn't know exactly how to fix it!
The cart icon in the top-right corner updates when you add an item to it, but it only mimics the number of items added when you click 'Add to cart' and doesn't add any additional items on top of what it already has (if that makes sense?)
Marked as helpful0