Ex No: 5 CLICK EVENT IN REACT.JS
Aim: To design a React App that demonstrate the use of click event.
Algorithm
Step1: Install Node Package Manager (npm) in the system.
Step2: Create react app using "npx create-react-app" in the terminal.
Step3: Alter the content of the “App.js” file to add the profile page.
Step4: Create App.css” file to store the css information.
Step5: Start the React App using "npm start".
Source Code

App.js


import React, { useState } from 'react';
import './App.css'

function UppercaseConverter() {
  // State to hold the entered text and the converted text
  const [inputText, setInputText] = useState('');
  const [uppercasedText, setUpperText] = useState('');

  // Event handler for text input change
  const textInputChange = (event) => {
    setInputText(event.target.value);
  };

  // Event handler for button click
  const handleButtonClick = () => {
    setUpperText(inputText.toUpperCase());
  };

  return (
    <div>
      <h1>Text to Uppercase Converter</h1>
      <input
        type="text"
        value={inputText}
        onChange={textInputChange}
        placeholder="Enter text"
      />
      <br />
      <button onClick={handleButtonClick}>
        Convert to Uppercase
      </button>
      <p>
        Uppercased Text: {uppercasedText}
      </p>
    </div>
  );
}

export default UppercaseConverter;

style.css


div{
  text-align: center;
  margin-top: 50px;
}
input{
  border-radius: 8px;
  padding: 10px;
  width: 300px;
  font-size: 16px;
}

button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 9px;
}
button:hover{
  background-color: #D0F6C0;
  color:#04AA6D;
}
p{
  font-size: 18px;
  margin-top: 20px;
}
Result: Thus a React App that demonstrates the uses of click event is implemented.