Submitted 2 months ago

Responsive Ecommerce Landing Page TailwindCSS ReactJS Vite

lavollmer• 350

@lavollmer

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

E-commerce product page

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I am most proud of working through the different challenges and expanding my knowledge of useState, props, flexbox, and styling options. Next time, I would focus more on the functionality of the application and then addressing the styling pieces.

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

I worked through the mobile responsive challenge, useState knowledge, flexbox styling, sidebar navigation in mobile and much more. I worked through each one individually - taking time to understand my gaps of knowledge. Overall, it was a great project.

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

I would like help with creating the functionality for the delete trash icon in the cart. I would like the icon to remove all information when selected with the statement "Your cart is empty".

Community feedback

Mesroua Djamel• 330

@MesrouaDjamel

Posted 8 days ago

congratulations for your design it's close to the proposed design i have some suggestion to propose you : The carousel : you can use material tailwinds: https://www.material-tailwind.com/docs/react/carousel it's easy to set up and the component is animated. Hover: https://tailwindcss.com/docs/fill

and use this syntax in jsx => <svg width="57” height="54” viewBox="0 0 57 54” fill="none” className="absolute left-4 top-[200px] cursor-pointer stroke-veryDarkBlue hover:stroke-orange transition-all ease-in-out duration-300” onClick={handlePrev} > <ellipse cx="28.1706” cy="27.1216” rx="28.1706” ry="26.7823” fill="#FEFFFF” stroke="none” /> <path d="M33.8049 16.4087L22.5366 27.1216L33.8049 37.8345” strokeWidth="3” /> </svg> check if the svg already has a fill or stroke and delete it

Trash: const handleDelete = () => { if (quantityToBuy === 0) { setIsAddedToCart(false); } setIsAddedToCart(false); setIsCartOpen(false); setQuantityToBuy(0); };

Translated with DeepL.com (free version)

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