DRY & KISS Principles

How does this event handling implementation violate both DRY and KISS principles?

const handleMouseEnter = (event) => {
  event.target.style.backgroundColor = '#e5e5e5';
  event.target.style.transform = 'scale(1.05)';
  event.target.style.transition = 'all 0.3s ease';
};

const handleMouseLeave = (event) => {
  event.target.style.backgroundColor = '';
  event.target.style.transform = 'scale(1)';
  event.target.style.transition = 'all 0.3s ease';
};

const handleFocus = (event) => {
  event.target.style.backgroundColor = '#e5e5e5';
  event.target.style.transform = 'scale(1.05)';
  event.target.style.transition = 'all 0.3s ease';
};

const handleBlur = (event) => {
  event.target.style.backgroundColor = '';
  event.target.style.transform = 'scale(1)';
  event.target.style.transition = 'all 0.3s ease';
};

The event handlers should be combined
The style values should be constants
The transitions should be different
The style manipulation is repeated and complex
This code violates both DRY and KISS principles by: 1. Duplicating style manipulation code across handlers 2. Using complex inline style manipulation instead of CSS classes A better approach would be: const HOVER_CLASS = 'hover-active'; const applyStyles = (element, isActive) => { element.classList.toggle(HOVER_CLASS, isActive); }; const handleMouseEnter = (event) => applyStyles(event.target, true); const handleMouseLeave = (event) => applyStyles(event.target, false); const handleFocus = (event) => applyStyles(event.target, true); const handleBlur = (event) => applyStyles(event.target, false); // CSS .hover-active { background-color: #e5e5e5; transform: scale(1.05); transition: all 0.3s ease; } This solution: 1. Eliminates code duplication 2. Simplifies style management 3. Improves performance by using CSS classes 4. Makes the code easier to maintain and modify

Next Question (10/20)