Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Ecommerce product page

caseem 330

@kass8mal8

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Community feedback

yishak abrham 2,150

@yishak621

Posted

Comgrats for completing the challenge ...but u have basic things to fix ...for Mobile version gallery when it loads image the text content below shifting its position and it shouldn't be like that ....set the min-width for the image container to make it better and also the delete cart is not working u should add the event listner for it and remove item when it clicked and display the default card text

      //DELETE ITEM-since i can acess these after it is dynamically added to the DOM 
       this.deleteBtn = document.querySelectorAll('.icon-delete'); 
       this.deleteBtn.forEach((deleteBtn) => { 
         deleteBtn.addEventListener('click', (e) => { 
           notifyValue--; 
  
           notification.textContent = notifyValue; 
           const element = e.currentTarget.parentElement; //removing the elment 
  
           cartCard.removeChild(element); 
           displayAlert('item deleted', 'delete'); 
  
           if (notifyValue === 0 || notifyValue < 0) { 
             notification.classList.remove('open'); 
             emptyText.style.display = 'block'; //adding the text 
           } 
         }); 
       });
```...the prev and next btn needs a little bit of padding adjustment ...finally the add to cart btn box shadow should be minimised for a better view

Marked as helpful

0

@luismiguelrodriguez3

Posted

helloaa! excellent design, I have a question, why add to cart without me adding to cart?

0

caseem 330

@kass8mal8

Posted

@luismiguelrodriguez3 The user is the one adding the item to cart after clicking the button

0

Please log in to post a comment

Log in with GitHub
Discord logo

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