Scribd
Upload
14 views

ToDo list

Program

Uploaded by

hacker001don
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

ToDo list

Program

Uploaded by

hacker001don
Copyright
© © All Rights Reserved
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