Scribd
Upload
10 views

react 4 (1)

This document outlines the steps to create a To-Do List application using React functional components and the useState hook. It includes instructions for setting up the application, modifying the App.js file to manage tasks, and customizing the appearance with CSS. The application allows users to add, delete, and toggle the completion of tasks, providing a simple and interactive user interface.

Uploaded by

hidoso1133
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
10 views

react 4 (1)

This document outlines the steps to create a To-Do List application using React functional components and the useState hook. It includes instructions for setting up the application, modifying the App.js file to manage tasks, and customizing the appearance with CSS. The application allows users to add, delete, and toggle the completion of tasks, providing a simple and interactive user interface.

Uploaded by

hidoso1133
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/ 6

Report: To-Do List Application Using React Functional

Components and useState Hook


Step 1: Create a New React Application

Create a new React app named todo-app using the following command in your terminal:

npx create-react-app todo-app

Once the setup is complete, navigate to the project directory:

cd todo-app

Step 2: Modify App.js

Replace the content of src/App.js with the following code:

import React, { useState } from 'react';


import './App.css';

const ToDoFunction = () => {


const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState('');

const addTask = () => {


if (newTask.trim()) {
setTasks([
...tasks,
{ id: Date.now(), text: newTask, completed: false },
]);
setNewTask('');
}
};

const deleteTask = (taskId) => {


setTasks(tasks.filter(task => task.id !== taskId));
};

const toggleTaskCompletion = (taskId) => {


setTasks(tasks.map(task =>
task.id === taskId
? { ...task, completed: !task.completed }
: task
));
};

return (
<div className="todo-container">
<h2 className="todo-header">To-Do List</h2>

<div className="todo-input-wrapper">
<input
type="text"
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="Add a new task..."
className="todo-input"
/>
<button className="add-task-button" onClick={addTask}>Add Task</button>
</div>

<ul className="todo-list">
{tasks.map((task) => (
<li
key={task.id}
className={`todo-item ${task.completed ? 'completed' : ''}`}
>
<span
className="task-text"
onClick={() => toggleTaskCompletion(task.id)}
>
{task.text}
</span>
<button
className="delete-button"
onClick={() => deleteTask(task.id)}

❌
>

</button>
</li>
))}
</ul>
</div>
);
};

export default ToDoFunction;


Step 3: Modify App.css (Optional)

Customize your app's appearance by modifying src/App.css with the following styles:

.todo-container {
font-family: 'Arial', sans-serif;
max-width: 500px;
margin: 50px auto;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}

.todo-header {
color: #4A90E2;
font-size: 2rem;
margin-bottom: 20px;
}

.todo-input-wrapper {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.todo-input {
width: 70%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 1rem;
outline: none;
}

.add-task-button {
padding: 10px 15px;
margin-left: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
}

.add-task-button:hover {
background-color: #45a049;
}

.todo-list {
list-style-type: none;
padding-left: 0;
margin: 0;
}

.todo-item {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
padding: 12px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease-in-out;
}

.todo-item:hover {
transform: scale(1.03);
}

.todo-item.completed {
background-color: #f1f1f1;
text-decoration: line-through;
color: #aaa;
}

.task-text {
cursor: pointer;
font-size: 1.1rem;
color: #333;
transition: color 0.3s;
}

.task-text:hover {
color: #4CAF50;
}

.delete-button {
background: none;
border: none;
font-size: 1.1rem;
color: #ff6347;
cursor: pointer;
transition: color 0.3s;
}

.delete-button:hover {
color: #ff4500;
}

Step 4: Start the Development Server

Run the following command in the terminal:

npm start

This will launch the application at http://localhost:3000/.

Expected Output:

●​ Header: Displays "To-Do List".


●​ Input Field: Users can add new tasks.
●​ Task List:
○​ Displays tasks with a delete button and clickable task text to toggle
completion.
○​ Completed tasks are visually distinguished with a different style.

Conclusion:

You have successfully developed a To-Do List application using React functional
components and the useState hook for state management. This app provides essential
features like adding, deleting, and marking tasks as completed while keeping the UI simple
and interactive.

You might also like