Scribd
Upload
12 views

PRACTICASL QUESTIONS

The document contains two React components: a To-Do list and a Counter. The To-Do list allows users to add, complete, and remove tasks using React state, while the Counter component enables users to increment and decrement a number, with an initial value set via props. Both components demonstrate the use of React hooks for state management.

Uploaded by

tanupnwr17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

PRACTICASL QUESTIONS

The document contains two React components: a To-Do list and a Counter. The To-Do list allows users to add, complete, and remove tasks using React state, while the Counter component enables users to increment and decrement a number, with an initial value set via props. Both components demonstrate the use of React hooks for state management.

Uploaded by

tanupnwr17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

PRACTICASL QUESTIONS:

Q1-Implement a TO-DO list where tasks can be added, marked as complete, and removed using

React state.

CODE-

import { useState } from "react";


function TodoApp() {
const [tasks, setTasks] = useState([]);
const [task, setTask] = useState("");

const addTask = () => {


if (task.trim()) {
setTasks([...tasks, { text: task, completed: false }]);
setTask("");
}
};

const toggleComplete = (index) => {


setTasks(
tasks.map((t, i) =>
i === index ? { ...t, completed: !t.completed } : t
)
);
};

const removeTask = (index) => {


setTasks(tasks.filter((_, i) => i !== index));
};

return (
<div className="p-4 max-w-md mx-auto bg-gray-100 shadow-md rounded-lg">
<h1 className="text-2xl font-bold mb-4">To-Do List</h1>
<div className="flex gap-2 mb-4">
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="Add a new task"
className="border p-2 flex-1 rounded"
/>
<button onClick={addTask} className="bg-blue-500 text-white px-4 py-2 rounded">
Add
</button>
</div>
<ul>
{tasks.map((t, index) => (
<li key={index} className="flex justify-between items-center p-2 bg-white mb-2 rounded
shadow">
<span
onClick={() => toggleComplete(index)}
className={`cursor-pointer ${t.completed ? "line-through text-gray-500" : ""}`}
>
{t.text}
</span>
<button onClick={() => removeTask(index)} className="text-red-500"> </button>
</li>
))}
</ul>
</div>
);
}
export default TodoApp;

OUTPUT-
Q2-Create a Counter component with buttons to increment and decrement a number. Pass initial

values using props and manage changes using state.

CODE-

import React, { useState } from 'react';


import './App.css'; // Optional, for custom styles

function App() {
const [count, setCount] = useState(5); // You can set initial value here

const increment = () => setCount(prev => prev + 1);


const decrement = () => setCount(prev => prev - 1);

return (
<div style={{
minHeight: '100vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f3f4f6'
}}>
<div style={{
backgroundColor: 'white',
padding: '2rem',
borderRadius: '1rem',
boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
textAlign: 'center',
width: '250px'
}}>
<h2 style={{ marginBottom: '1rem' }}>Counter</h2>
<div style={{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem' }}>{count}</div>
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
<button
onClick={decrement}
style={{
padding: '0.5rem 1rem',
backgroundColor: '#ef4444',
color: 'white',
border: 'none',
borderRadius: '0.5rem',
cursor: 'pointer'
}}
>
-
</button>
<button
onClick={increment}
style={{
padding: '0.5rem 1rem',
backgroundColor: '#10b981',
color: 'white',
border: 'none',
borderRadius: '0.5rem',
cursor: 'pointer'
}}
>
+
</button>
</div>
</div>
</div>
);
}

export default App;

OUTPUT-

You might also like