Ecommerce Sneaker Landing Page with Html, Sass, Vanilla Js,

Community feedback

• 

  Ren Ras•420

  @renrasPosted almost 3 years ago

  few things I think it can improve on:

  • your modal's height is not responsive to vh, I think position:fixed is better instead of absolute and top,left,right,bottom:0 will do the job instead of setting a height and width

   let selectedThumbnail = selectedImg.slice(0,selectedImg.indexOf('.jpg'))+'-thumbnail.jpg';
  

  I believe what you are trying to achieve here can be done using string.replace instead and is faster than slice.

  function activethumbnailImg(thumbnailImgs,mainProductImg){
  
      thumbnailImgs.forEach((img)=>{
          img.addEventListener('click',(e)=>{
              thumbnailImgs.forEach((img)=>{
                  img.parentElement.classList.remove('active');
              });
              let imgName = `images/image-${e.target.dataset.name}.jpg`;
              mainProductImg.setAttribute('src',imgName);
              e.target.parentElement.classList.add('active');
          });
      });
  }
  

  you are nesting a foreach inside a foreach which runs kinda slow. I believe this can still be optimized using event delegation instead and traversing

  Marked as helpful

  1

  ---

  

  basem osman•100

  @basemosman2Posted almost 3 years ago

  @renras thanks for your feedback appreciated it.

  0