Scribd
Upload
10 views

2aabf588-4033-41c6-bc2e-914bdc9deee6 (1)

The document outlines the creation of a TODO application using React, detailing the necessary components and file structure. It includes code snippets for key files such as index.html, App.js, and Todo.js, which manage the application's layout, styling, and functionality. The application allows users to add and delete tasks from a TODO list and is intended to be deployed on GitHub.

Uploaded by

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

2aabf588-4033-41c6-bc2e-914bdc9deee6 (1)

The document outlines the creation of a TODO application using React, detailing the necessary components and file structure. It includes code snippets for key files such as index.html, App.js, and Todo.js, which manage the application's layout, styling, and functionality. The application allows users to add and delete tasks from a TODO list and is intended to be deployed on GitHub.

Uploaded by

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

Week14

Create a TODO application in react with necessary component and deploy it into github.

--Todo

--public

--index.html

--src

--App.css

--App.js

--index.css

--index.js

--Todo.js

Public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1"
/>
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

</body>
</html>

Src/App.css

.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {


.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

App.js

import './App.css';
import Todo from './Todo';

function App() {
return (
<div className="App">
<Todo />
</div>
);
}

export default App;

src/index.js

import React from 'react';


import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

Src/Todo.js

import React, { useState } from 'react';

const Todo = () => {


const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');

const handleInputChange = (event) => {


setInputValue(event.target.value);
};

const handleAddTodo = () => {


if (inputValue.trim() !== '') {
setTodos([...todos, inputValue]);
setInputValue('');
}
};

const handleDeleteTodo = (index) => {


const updatedTodos = todos.filter((_, i) => i !== index);
setTodos(updatedTodos);
};

return (
<div>
<h1>TODO List</h1>
<input
type="text"
value={inputValue}
onChange={handleInputChange}
placeholder="Enter a new todo"
/>
<button onClick={handleAddTodo}>Add Todo</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>
{todo}
<button onClick={() =>
handleDeleteTodo(index)}>Delete</button>
</li>
))}
</ul>
</div>
);
};

export default Todo;

You might also like