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

Challeng made with HTML, SCSS and JS

@luismiguelrodriguez3

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

Solution retrospective


What did you find difficult during the construction of the project? The web design part. What parts of the code are you not sure about? It works perfectly, although it can be improved at the code level.

Community feedback

yishak abrham 2,150

@yishak621

Posted

Holla miguel good design ...but i don't know why but when i click on the prev & next btn (on mobile) the other images didn't appears its maybe because u didn't store ur local files(images) in a Array Format just like these

const images = [ 
   [ 
     { 
       src: '/images/image-product-1.jpg', 
       class: 'img', 
       id: '1', 
       alt: 'product-1', 
     }, 
     { 
       src: '/images/image-product-2.jpg', 
       class: 'img', 
       id: '2', 
       alt: 'product-2', 
     },

so the idea is when a user clicks on the prev or next btn use e.target to detect the specific class list of that btn and add functionality for that btn example

    //function for parent container 
     let count = 0; 
     this.container.addEventListener('click', function (e) { 
       const style = e.target.classList; 
  
       if (style.contains('prev-mob')) { 
         count--;

So using the count u can grab ur images from the Array index

Marked as helpful

1

@luismiguelrodriguez3

Posted

@yishak621 Ohhh! I didn't realize that. I'll check it out right away! thanks for the comment!

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