Refactor JavaScript Code for Improved Readability, Modularity, and Efficiency

[Marabii]

Issue Description

The current JavaScript code for the website includes opportunities for improvements in modularity, readability, and performance. Refactoring the code to use best practices would enhance maintainability and simplify future updates or debugging. Below are detailed suggestions for improvement.

Suggested Improvements

1. Modularize the Code with Functions

• Problem: Multiple blocks of code (e.g., tab activation, cart handling) are implemented inline within loops or event listeners, which can make the code challenging to manage.
• Solution: Break down code into reusable functions. For example, creating separate functions for common tasks like toggling visibility or handling cart updates would make the code more modular and easier to understand.

2. Use const and let for Variable Declarations

• Problem: Some variables like products are declared without const or let, which can lead to unexpected behavior in larger codebases.
• Solution: Always use const for variables that won’t change and let for those that might. For example:

  const products = [...];

3. Refactor Inline Event Listeners

• Problem: Inline event listeners within forEach loops increase complexity and reduce readability.
• Solution: Use named functions instead of inline listeners. For instance:

  tabs.forEach(tab => tab.addEventListener("click", handleTabClick));
  
  function handleTabClick(event) {
      // tab switching logic here
  }

4. Avoid Direct Style Manipulation

• Problem: Inline style manipulations (e.g., element.style.display = "none") reduce maintainability and mix behavior with styling.
• Solution: Use CSS classes and classList.add() or classList.remove() to control styles. This separates logic from styling, making it easier to manage and debug.

5. Simplify Cart Item Addition

• Problem: Adding items to the cart directly in the event listener creates redundancy.
• Solution: Create a dedicated addItemToCart() function that handles the cart update logic, keeping the event listener cleaner.

6. Avoid Direct DOM Manipulation in Loops

• Problem: Frequent direct DOM manipulations can slow down performance.
• Solution: Create elements in-memory first, and then append them to the DOM. For example, in addItemToCart, create the entire cart item div before appending it to lastNode.

7. Implement a More Dynamic Tab System

• Problem: The tab-switching logic could benefit from a more generalized approach.
• Solution: Use data attributes and toggle classes based on attribute values, which would allow for easier addition or removal of tabs in the future.

8. Add Input Validation for Email

• Problem: Currently, the mailTo() function lacks validation for the email input.
• Solution: Add a basic email format check before setting the mailto link. For example:

  function mailTo() {
      const emailInput = document.getElementById("emailInput");
      const emailAddress = emailInput.value;
      const mailButton = document.getElementById("mailTo");
      if (validateEmail(emailAddress)) {
          mailButton.setAttribute("href", "mailto:" + emailAddress);
      } else {
          alert("Please enter a valid email address.");
      }
  }
  
  function validateEmail(email) {
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }