E-commerce Product Page

Community feedback

• 

  Aakash Verma•9,520

  @skyv26Posted 2 months ago

  Hi @erntTt94, 👋

  Here’s my feedback and suggestions for your project. Each point aims to improve the code’s semantic accuracy, usability, and maintainability while also being mindful of real-world use cases. 🚀

  ---

  1. Remove Commented Code ✂️

  I noticed commented-out code in the following line:
  index.html#L103-L106

  • Unused commented code can clutter your files and make it harder for others to read or maintain them. It’s like having an old grocery list in your wallet—you don’t need it anymore, so it’s better to toss it out! 🧹

  ---

  2. Use Semantic Tags for Lists 🏷️

  Example 1: Product Images

  Instead of:

  <div class="product-images">
    <img src="images/image-product-1-thumbnail.jpg" alt="sneakers review small image">
    <!-- Other images -->
  </div>
  

  Use:

  <ul class="product-images">
    <li><img src="images/image-product-1-thumbnail.jpg" alt="sneakers review small image"></li>
    <!-- Other images in <li> -->
  </ul>
  

  Why?

  Semantic tags like <ul> and <li> communicate the structure of your content better to browsers, screen readers, and search engines. Think of it like organizing items in a menu—using a proper list helps everyone, including users with accessibility needs, understand what’s grouped together. 🤝

  Example 2: Lightbox Content

  Similarly, refactor:

  <div class="lightbox-content">
    <img src="images/icon-previous.svg" alt="previous icon" class="prev-image">
    <!-- Other images -->
  </div>
  

  To:

  <ul class="lightbox-content">
    <li><img src="images/icon-previous.svg" alt="previous icon" class="prev-image"></li>
    <!-- Other images in <li> -->
  </ul>
  

  This ensures consistent and meaningful grouping of elements. 🎨

  ---

  3. Fix Image Navigation (Left/Right Arrows) ⬅️➡️

  Currently, users can’t navigate back and forth using the arrows. This breaks the functionality and can frustrate users, much like trying to turn a page in a book and finding it glued shut! 📖🚫

  Suggested Fix:

  • Ensure the prev-image and next-image elements have proper event listeners to update the displayed image.
  • For better code organization, consider storing image data in an array and navigating using the index.

  ---

  4. Refactor the JS Code for Reusability 💡

  Current Implementation:

  addProduct.addEventListener('click', function () {
    counter++;
    document.querySelector('.buy-product span').textContent = counter;
  });
  deleteProduct.addEventListener('click', function () {
    if (counter > 0) counter--;
    document.querySelector('.buy-product span').textContent = counter;
  });
  

  Refactored Example:

  Attach a single click event listener to the parent element:

  const buyProduct = document.querySelector('.buy-product');
  
  buyProduct.addEventListener('click', function (event) {
    if (event.target.classList.contains('add')) {
      counter++;
    } else if (event.target.classList.contains('delete') && counter > 0) {
      counter--;
    }
    buyProduct.querySelector('span').textContent = counter;
  });
  

  Why?

  • This approach is more efficient, as it reduces the number of event listeners.
  • It’s like assigning a group leader to handle questions instead of having each student ask the teacher individually—more organized and scalable. 👩‍🏫

  ---

  5. General JS Improvements ⚙️

  • Review your JavaScript logic for redundancy and readability. For example, breaking larger blocks into smaller, reusable functions can make your code easier to understand and maintain.

  ---

  Conclusion 🌟

  Your project has a solid foundation, and with a few semantic adjustments and JavaScript refinements, it will shine even brighter. ✨ Keep up the great work, and don’t hesitate to reach out if you have any questions!

  Let me know if you’d like detailed guidance on any specific point. Cheers! 🎉

  Marked as helpful

  1

  ---

  

  Erkant•730

  @erntTt94Posted 2 months ago

  @skyv26 Wow... really thanks for the long and great explained feedback and suggestions :]

  1