Submitted 2 months ago

Responsive product list with cart

Yousef Attia•310

@Deeperr0

Preview site View code

This is a solution for...Product list with cart

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I learned how to deal with cookies in JavaScript. I would add more comments next time

What challenges did you encounter, and how did you overcome them?

I had a problem with storing the cookies in a way that would be easily accessible and iterable. In the end decided to stick with a JSON object

What specific areas of your project would you like help with?

I would really appreciate some feedback regarding the clarity of my code and how can I write cleaner and more optimized code as in my opinion thats as clean and optimized as it can get.

Community feedback

Lucas Cerri•1,140

@llKryptonixllPosted 2 months ago

First of all great work. I saw that you wrote :

<img
    src="${
			screenWidth > 768
				? product.image.desktop
				: screenWidth > 375
				? product.image.tablet
				: product.image.mobile
	}"
    alt="${product.name}"
    class="product-image"
/>

You dont need javascript to do it so leave the ternary and write it like this:

<picture>
    <source srcset={desktop} media="(min-width: 1024px)" />
    <source srcset={tablet} media="(min-width: 768px)" />
    <img src={mobile} alt={name} />
</picture>

Marked as helpful

Yousef Attia•310

@Deeperr0Posted 2 months ago

@llKryptonixll Thank you so much for the tip I will change it right now!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord