Scribd
Upload
33 views9 pages

ToDo List

Program

Uploaded by

hacker001don
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
33 views9 pages

ToDo List

Program

Uploaded by

hacker001don
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/ 9

To-Do List

Project Structure

1. index.html: Contains the root element

2. App.js: Main React component for the To-Do List.

3. style.css: Styling for the app.

Code
index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>React To-Do List</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div id="root"></div>

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@17/umd/react-
dom.development.js"></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel" src="App.js"></script>


</body>

</html>

App.js

const App = () => {

const [tasks, setTasks] = React.useState([]);

const [task, setTask] = React.useState("");

const addTask = () => {

if (task.trim()) {

setTasks([...tasks, task]);

setTask("");

};

const deleteTask = (index) => {

const updatedTasks = tasks.filter((_, i) => i !== index);

setTasks(updatedTasks);

};

return (

<div className="todo-container">

<h1>React To-Do List</h1>

<div className="input-container">

<input
type="text"

value={task}

onChange={(e) => setTask(e.target.value)}

placeholder="Add a new task"

/>

<button onClick={addTask}>Add</button>

</div>

<ul className="task-list">

{tasks.map((t, index) => (

<li key={index}>

{t}

<button onClick={() => deleteTask(index)}>Delete</button>

</li>

))}

</ul>

</div>

);

};

ReactDOM.render(<App />, document.getElementById("root"));

style.css

body {

font-family: Arial, sans-serif;


background: #f4f4f9;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

.todo-container {

background: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

width: 100%;

max-width: 400px;

text-align: center;

.todo-container h1 {

margin-bottom: 20px;

color: #333;

.input-container {

display: flex;
gap: 10px;

.input-container input {

flex: 1;

padding: 10px;

border: 1px solid #ccc;

border-radius: 4px;

.input-container button {

padding: 10px;

background: #007bff;

color: #fff;

border: none;

border-radius: 4px;

cursor: pointer;

.input-container button:hover {

background: #0056b3;

.task-list {

list-style: none;

padding: 0;
margin-top: 20px;

.task-list li {

display: flex;

justify-content: space-between;

align-items: center;

padding: 10px;

background: #f9f9f9;

border: 1px solid #ddd;

border-radius: 4px;

margin-bottom: 10px;

.task-list button {

padding: 5px 10px;

background: #ff4d4d;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

.task-list button:hover {

background: #d93636;

}
Result:

You might also like