E-COMMERCE PRODUCT PAGE HTML | CSS | JS

Community feedback

• 

  Aakash Verma•9,500

  @skyv26

  Posted 6 months ago

  Hi @BeeAlmighty,

  You've done a commendable job putting together the JavaScript for this project! The code works well and showcases your learning journey. 🚀 However, there are a few areas where you can improve to make the code cleaner, more readable, and aligned with best practices. Here are my suggestions:

  ---

  🛠 Code Suggestions:

  1. Use Arrow Functions:
     Instead of traditional function declarations, you can simplify with arrow functions for consistency and brevity. For example:

     const openModal = () => {
         document.getElementById("myModal").style.display = "block";
     };
     

  2. Follow the DRY Principle:
     There are repetitive code patterns, especially in the showSlides and showSlides2 functions. Consider creating a helper function that handles both scenarios dynamically based on parameters (like the class names or indices).

  3. Shortcuts for Querying Elements:
     Instead of calling document.querySelector repeatedly, you can store frequently accessed elements in a central object or use a utility function for querying:

     const $ = (selector) => document.querySelector(selector);  
     const sidebar = $('.nav--sidebar');  
     

  4. Add Meaningful Variable Names:
     Some variable names (e.g., docBod, docBody, itemCart) could be more descriptive. Consistent naming will make the code more intuitive.

  5. Reduce Global Variables:
     To avoid potential conflicts and improve modularity, wrap the related code into a single object or IIFE (Immediately Invoked Function Expression).

  6. Spacing for Readability:
     Add blank lines between sections of your code. For example, separate sidebar-related code, cart operations, and carousel code into distinct blocks.

  ---

  💡 Best Practices:

  • Add Comments: Briefly explain what each function or block of code does. This will make it easier to understand and maintain.
  • Group Logic: Use modular design by separating different functionalities (e.g., cart, sidebar, carousel) into distinct classes or modules.
  • Event Delegation: For elements like addCartBtn or delIcon, you can use event delegation to attach a single listener to a parent element.

  ---

  🏆 Overall Feedback:

  • Your code demonstrates a solid understanding of DOM manipulation and event handling. 👏
  • Although the script is lengthy, it’s effective. Refactoring the repetitive parts will make it more concise and maintainable.
  • The output is impressive, and it’s clear you’ve put a lot of effort into learning through this project!

  ---

  ⭐ Action Plan:

  1. Refactor repetitive logic like showSlides and showSlides2 into a single function.
  2. Use arrow functions and reduce redundant selectors with utilities like querySelector.
  3. Modularize your code into logical sections for improved readability and debugging.

  Let me know if you need help implementing these improvements. You're on the right track—keep going! 🌟

  Best,
  Aakash 😊

  11

  Marked as helpful