screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> const { useRef } = React; function App() { // Create refs for each input element const textInputRef = useRef(null); const emailInputRef = useRef(null); const passwordInputRef = useRef(null); const checkboxInputRef = useRef(null); const radioInputRef = useRef(null); // Function to check the type of the input element const checkInputType = (inputRef) => { if (inputRef.current) { const inputType = inputRef.current.type; alert(`Input type is: ${inputType}`); } else { alert('Input element not found'); } }; return ( <div className='container'> <div> <input ref={textInputRef} type="text" className="text-input" /> <button onClick={() => checkInputType(textInputRef)} className="check-button">Check Input Type</button> </div> <div> <input ref={emailInputRef} type="email" className="email-input" /> <button onClick={() => checkInputType(emailInputRef)} className="check-button">Check Input Type</button> </div> <div> <input ref={passwordInputRef} type="password" className="password-input" /> <button onClick={() => checkInputType(passwordInputRef)} className="check-button">Check Input Type</button> </div> <div> <input ref={checkboxInputRef} type="checkbox" className="checkbox-input" /> <button onClick={() => checkInputType(checkboxInputRef)} className="check-button">Check Input Type</button> </div> <div> <input ref={radioInputRef} type="radio" className="radio-input" /> <button onClick={() => checkInputType(radioInputRef)} className="check-button">Check Input Type</button> </div> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script> <style> * { box-sizing: border-box; } .container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; margin: 20px; } .text-input, .email-input, .password-input, .checkbox-input, .radio-input { width: 100%; padding: 10px; border: 2px solid #ccc; border-radius: 5px; font-size: 16px; margin-bottom: 10px; } .check-button { background-color: #0074D9; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } .check-button:hover { background-color: #0056A4; } /* Add more specific styling for different input types */ .email-input { border-color: #FF4136; } .password-input { border-color: #2ECC40; } .checkbox-input, .radio-input { width: auto; margin-right: 10px; } </style> </body> </html>