CSS, Flex, Grid Areas, Javascript

Community feedback

• 

  P

  Ilya Yudin•890

  @yudin7324Posted about 2 months ago

  What’s Good:

  • Clear structure and well-defined event handling.
  • Uses classList.contains to check active states.
  • Applies styles dynamically based on state changes.

  Areas for Improvement:

  1.Avoid Code Duplication:

  • Instead of if-else, you can use classList.toggle(className, condition) to simplify state management, though it’s not always necessary.
  • This reduces redundancy when modifying the same elements in both conditions.

  2.Optimize Style Updates:

  • Instead of manually changing backgroundColor and filter, you could use CSS classes to handle styling.
  • This keeps JavaScript logic cleaner and separates concerns.

  3.Avoid setTimeout for Class Removal:

  • Consider using CSS animations instead of setTimeout, as it improves maintainability and ensures smooth transitions.

  4.Avoid Using var:

  • It’s recommended to avoid using var as it has function scope and can lead to unexpected behavior due to its hoisting nature.
  • Use let or const instead, which have block scope and are generally safer and more predictable.
  • const is preferred when the variable won’t be reassigned.
  • let is suitable when you need to reassign the variable.

  Your code is well-structured, but reducing duplication and relying more on CSS for styling and animations will improve maintainability and performance

  Good luck in the next challenge!

  Marked as helpful

  0