Development » OnlineGradeCalculator

Description:¶

The goal of this task is to implement a highlight animation effect for the increment (↑) and decrement (↓) arrows of an input box. The highlight effect should trigger only on click events and should not be affected by keydown or manual text input changes.

Task Details:¶

• Scope: Applies to number-type input fields (<input type="number">).
• Behavior:
  • When the up arrow (↑) is clicked, it highlights with an animation.
  • When the down arrow (↓) is clicked, it highlights with an animation.
  • No highlight should occur when a user types manually (keydown event).
• Animation Requirements:
  • A smooth, visually appealing highlight transition (e.g., background color change, glow effect, or scaling).
  • Animation should fade out after a short duration (~300ms).
• Browser Compatibility: Must work across major browsers (Chrome, Firefox, Edge, Safari).
• Responsiveness: Should function well on both desktop and mobile touch interfaces.

Acceptance Criteria:¶

• Clicking the increment arrow triggers the highlight animation.
• Clicking the decrement arrow triggers the highlight animation.
• No animation triggers when a user types in the input box.
• The highlight fades out smoothly after a short duration.
• Works correctly across different screen sizes and browsers.