📄Assignments Of Class 6
Handling Events in React
✅ Assignment 1: Create a Button that
Changes Text
🔸 Task:Create a button. When clicked, change the text from "Welcome!" to "Thank you for clicking!".
💡 Solution:
import React, { useState } from 'react';
const [text, setText] = useState("Welcome!");
const handleClick = () => {
setText("Thank you for clicking!");
};
return (
<div>
<p>{text}</p>
<button onClick={handleClick}>Click Me</button>
</div>
);
}
✅ Assignment 2: Display User Input
in Real-Time
🔸 Task:Take input from the user and display it live on the screen.
💡 Solution:
import React, { useState } from 'react';
function Assignment2() {
const [name, setName] = useState("");
return (
<div>
<input
type="text"
placeholder="Enter your name"
onChange={(e) =>
setName(e.target.value)}
/>
<p>Hello, {name}</p>
</div>
);
}
✅ Assignment 3: Toggle Between Two
Messages
🔸 Task:Clicking the button toggles the message between "Day Mode" and "Night Mode".
💡 Solution:
import React, { useState } from 'react';
function Assignment3() {
const [mode, setMode] = useState("Day Mode");
const toggleMode = () => {
setMode(prev => prev === "Day Mode" ? "Night
Mode" : "Day Mode");
};
return (
<div>
<p>{mode}</p>
<button onClick={toggleMode}>Toggle Mode</button>
</div>
);
}
✅ Assignment 4: Create a Simple
Login Form with onSubmit
🔸 Task:Create a login form with email and password. Show an alert with email and password when submitted.
💡 Solution:
import React, { useState } from 'react';
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
alert(`Email: ${email}\nPassword: ${password}`);
};
return (
<form onSubmit={handleSubmit}>
<input type="email" placeholder="Email" onChange={(e)
=> setEmail(e.target.value)} />
<input type="password" placeholder="Password" onChange={(e)
=> setPassword(e.target.value)} />
<button type="submit">Login</button>
</form>
);
}
✅ Assignment 5: Count Button Clicks
🔸 Task:Count how many times the button has been clicked and show the count.
💡 Solution:
import React, { useState } from 'react';
function Assignment5() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Click Me</button>
<p>You clicked {count} times</p>
</div>
);
}
✅ Assignment 6: Character Counter in
Input Field
🔸 Task:Count the number of characters typed in an input field.
💡 Solution:
import React, { useState } from 'react';
function Assignment6() {
const [text, setText] = useState("");
return (
<div>
<input
type="text"
placeholder="Type here..."
onChange={(e) =>
setText(e.target.value)}
/>
<p>Character count: {text.length}</p>
</div>
);
}
✅ Assignment 7: Form with Validation
🔸 Task:Create a form that checks if the name field is empty on submit. If empty, show an alert.
💡 Solution:
import React, { useState } from 'react';
function Assignment7() {
const [name, setName] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
if (name === "") {
alert("Name cannot be empty!");
} else {
alert(`Hello, ${name}`);
}
};
return (
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Enter name" onChange={(e)
=> setName(e.target.value)} />
<button type="submit">Submit</button>
</form>
);
}
✅ Assignment 8: Toggle Paragraph
Visibility
🔸 Task:Add a button to show or hide a paragraph.
💡 Solution:
import React, { useState } from 'react';
function Assignment8() {
const [visible, setVisible] = useState(true);
return (
<div>
<button onClick={() => setVisible(!visible)}>
{visible ? "Hide" :
"Show"} Text
</button>
{visible && <p>This is a toggle-able paragraph.</p>}
</div>
);
}
✅ Assignment 9: Checkbox Toggle
Theme Message
🔸 Task:Create a checkbox that when checked says “Dark Mode On”, and when unchecked says “Dark Mode Off”.
💡 Solution:
import React, { useState } from 'react';
const [isDark, setIsDark] = useState(false);
return (
<div>
<label>
<input
type="checkbox"
onChange={(e) =>
setIsDark(e.target.checked)}
/>
Toggle Dark Mode
</label>
<p>{isDark ? "Dark Mode On" : "Dark Mode Off"}</p>
</div>
);
}
✅ Assignment 10: Disable Submit
Button Until Text Entered
🔸 Task:Create a form with a submit button that is disabled until the user types something in the input field.
💡 Solution:
import React, { useState } from 'react';
function Assignment10() {
const [input, setInput] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
alert(`You entered: ${input}`);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Type
something..."
onChange={(e) =>
setInput(e.target.value)}
/>
<button type="submit" disabled={input.trim() === ""}>Submit</button>
</form>
);
}
