Experiment 15:
ReactJS Applications – To-do list and Quiz
a. Design to-do list application
Todo list:
import React, { useState } from "react";
function App() {
const [task, setTask] = useState("");
const [tasks, setTasks] = useState([]);
const [editingId, setEditingId] = useState(null);
const [editingText, setEditingText] = useState("");
// Add task
const addTask = () => {
if ([Link]() === "") return;
setTasks([...tasks, { id: [Link](), text: task }]);
setTask("");
};
// Delete task
const deleteTask = (id) => {
setTasks([Link]((t) => [Link] !== id));
};
// Clear all
const clearTasks = () => {
setTasks([]);
};
// Start editing
const startEdit = (id, text) => {
setEditingId(id);
setEditingText(text);
};
// Save edit
const saveEdit = (id) => {
setTasks(
[Link]((t) =>
[Link] === id ? { ...t, text: editingText } : t
);
setEditingId(null);
setEditingText("");
};
return (
<div style={{ padding: "20px" }}>
<h1>✅ To-Do List</h1>
<input
type="text"
value={task}
onChange={(e) => setTask([Link])}
placeholder="Enter a task"
/>
<button onClick={addTask}>Add</button>
<button onClick={clearTasks}>Clear All</button>
<ul>
{[Link]((t) => (
<li key={[Link]}>
{editingId === [Link] ? (
<>
<input
type="text"
value={editingText}
onChange={(e) => setEditingText([Link])}
/>
<button onClick={() => saveEdit([Link])}>Save</button>
</>
):(
<>
{[Link]}
<button onClick={() => startEdit([Link], [Link])}>Edit</button>
</>
)}
<button onClick={() => deleteTask([Link])}>Delete</button>
</li>
))}
</ul>
</div>
);
export default App;
output:
npm start
Quiz:
// File: [Link]
import React, { useState } from "react";
const quizData = [
{
question: "Which language is used for ReactJS?",
options: ["Python", "JavaScript", "C++", "Java"],
answer: "JavaScript",
},
question: "ReactJS is maintained by?",
options: ["Google", "Microsoft", "Facebook", "Amazon"],
answer: "Facebook",
},
question: "What is the default port for React apps?",
options: ["3000", "8080", "5000", "4000"],
answer: "3000",
},
];
export default function App() {
const [current, setCurrent] = useState(0);
const [score, setScore] = useState(0);
const [finished, setFinished] = useState(false);
const handleAnswer = (option) => {
if (option === quizData[current].answer) {
setScore(score + 1);
const next = current + 1;
if (next < [Link]) {
setCurrent(next);
} else {
setFinished(true);
}
};
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-6">
<h1 className="text-2xl font-bold mb-4">🎯 Quiz App</h1>
{!finished ? (
<div className="bg-white p-6 rounded-lg shadow-lg w-96">
<h2 className="mb-4 font-semibold">
Q{current + 1}. {quizData[current].question}
</h2>
<div className="flex flex-col gap-2">
{quizData[current].[Link]((option, i) => (
<button
key={i}
onClick={() => handleAnswer(option)}
className="bg-blue-500 text-white px-4 py-2 rounded-lg"
>
{option}
</button>
))}
</div>
</div>
):(
<div className="bg-green-200 p-6 rounded-lg shadow-lg w-96 text-center">
<h2 className="text-xl font-bold">Quiz Completed ✅</h2>
<p className="mt-2">
Your Score: {score} / {[Link]}
</p>
</div>
)}
</div>
);
Output:
