Even or odd

Create a React component that allows users to input a number and checks whether the number is even or odd. The component displays the result with a 1-second loading delay and handles invalid inputs.

Requirements

• A user can enter a number in an input field.
  • The input box should have a placeholder "Enter a number"
• A button is provided to initiate the check.
• Upon clicking the button:
  • Any previous result should be cleared immediately.
  • A loading indicator should appear for 1 second to simulate processing.
  • In that one second a label "Checking..." should appear in the reasult-area.
  • After the delay, the result should display in the format:
    • "The number X is even."
    • "The number X is odd."
• If the input is empty or not a valid number:
  • Show a clear error message such as: "Please enter a valid number."

Edge Cases & Constraints

• Non-numeric input should display "Please enter a valid number."
• Empty input should be handled gracefully.
• Leading/trailing spaces should be ignored.
• Large numbers should be processed correctly
• Loading message "Checking..." should be shown before result.
• The result display must only appear after loading completes.

Example Inputs & Outputs

// Example 1: Even number
Input: "4"
Output: "The number 4 is even."

// Example 2: Odd number
Input: "5"
Output: "The number 5 is odd."

// Example 3: Invalid input
Input: "abc"
Output: "Please enter a valid number."

Data Test IDs (required for testing):

• data-testid="number-input": The input field for entering number
• data-testid="check-button": The button to trigger checking with the text "check"
• data-testid="loading": Element showing loading text
• data-testid="result": Element displaying the result or error message

Reference UI