Untitled

/*import React from 'react';

const App = () => {
  const reverseInteger = (num) => {
    const reversedNum = parseInt(num.toString().split('').reverse().join(''), 10);
    return reversedNum;
  };

  const handleClick = () => {
    const userInput = document.getElementById('inputNumber').value;
    const reversedNum = reverseInteger(userInput);
    alert(`The reversed integer is: ${reversedNum}`);
  };

  return (
    <div>
      <input type="number" id="inputNumber" />
      <button onClick={handleClick}>Reverse and Display</button>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));
*/


// import React from 'react';
// const r = ReactDOM.createRoot(document.getElementById('root'));
// const KeyEventDemo = () => {
//   const [message, setMessage] = React.useState('');

//   // Function to handle key up event
//   const handleKeyUp = ({ key }) => {
//     setMessage(`Key Up: ${key}`);
//   };
//   // Function to handle key down event
//   const handleKeyDown = ({ key }) => {
//     setMessage(`Key Down: ${key}`);
//   };
//   // Function to handle key press event
//   const handleKeyPress = ({ key }) => {
//     setMessage(`Key Press: ${key}`);
//   };
//   // Render the component
//   return (
//     <div>
//       <input type="text" onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} onKeyPress={handleKeyPress} />
//       <p>{message}</p>
//     </div>
//   );
// };
// r.render(<KeyEventDemo/>);

// import React from 'react';
// // import ReactDOM from 'react-dom/client';
// const r = ReactDOM.createRoot(document.getElementById('root'));
// const MouseActivity = () => {
//   const [mousePosition, setMousePosition] = React.useState({ x: 0, y: 0 });

//   // Function to handle mouse move event
//   const handleMouseMove = (event) => {
//     setMousePosition({
//       x: event.clientX,
//       y: event.clientY,
//     });
//   };

//   // Render the component
//   return (
//     <div style={{ border: '1px solid black', width: '1900px', height: '900px', position: 'relative' }}
//       onMouseMove={handleMouseMove}
//     >
//       <p style={{ position: 'absolute', top: 0, left: 100, transform: 'translate(-50%, -50%)' }}>
//         Mouse Position: ({mousePosition.x}, {mousePosition.y})
//       </p>
//     </div>
//   );
// };
// r.render(<MouseActivity />);

// import React from 'react';
// // import ReactDOM from 'react-dom/client';
// const r = ReactDOM.createRoot(document.getElementById('root'));
// const FocusAndBlurDemo = () => {
//   const [message, setMessage] = React.useState('Click on the input field to focus and then click outside to blur.');

//   const handleFocus = () => {
//     setMessage('Input field is focused.');
//   };

//   const handleBlur = () => {
//     setMessage('Input field lost focus.');
//   };

//   return (
//     <div>
//       <input type="text" onFocus={handleFocus} onBlur={handleBlur} />
//       <p>{message}</p>
//     </div>
//   );
// };

// r.render(<FocusAndBlurDemo />);