Scribd
Upload
31 views3 pages

Todolist Code

The document contains a React application that implements a simple Todo list. It includes components for inputting and displaying tasks, with functionality to add and delete items from the list. The accompanying CSS styles the layout and appearance of the Todo app, ensuring a visually appealing user interface.

Uploaded by

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

Todolist Code

The document contains a React application that implements a simple Todo list. It includes components for inputting and displaying tasks, with functionality to add and delete items from the list. The accompanying CSS styles the layout and appearance of the Todo app, ensuring a visually appealing user interface.

Uploaded by

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

App.

js

import React, { useState } from 'react'


import "./App.css"
import TodoInput from './components/TodoInput'
import Todolist from './components/TodoList';
function App() {
const [listTodo,setListTodo]=useState([]);
let addList = (inputText)=>{
if(inputText!=='')
setListTodo([...listTodo,inputText]);
}
const deleteListItem = (key)=>{
let newListTodo = [...listTodo];
newListTodo.splice(key,1)
setListTodo([...newListTodo])
}
return (
<div className="main-container">
<div className="center-container">
<TodoInput addList={addList}/>
<h1 className="app-heading">TODO</h1>
<hr/>
{listTodo.map((listItem,i)=>{
return (
<Todolist key={i} index={i} item={listItem}
deleteItem={deleteListItem}/>
)
})}
</div>
</div>
)
}

export default App

App.css
*{
margin: 0;
padding: 0;
}
body{
background-color: #333;
}
.main-container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.center-container{
height: 500px;
width: 350px;
}
.app-heading{
padding: 4px;
color: white;
/* text-align: center; */
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-transform: uppercase;
}
.input-container{
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.input-box-todo{
margin-left: 10px;
width: 70%;
height: 40px;
border-radius: 14px;
border:1px solid black;
padding-left: 10px;
box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
outline: none;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: large;
}
.add-btn{
width:40px;
height:40px;
border-radius: 50%;
border:none;
background-color:#316fc1;
color: white;
font-weight: bolder;
font-size: larger;
margin-left: 10px;
cursor: pointer;
box-shadow: 0px 5px 10px rgba(11, 10, 10, 0.3);
transition: 0.3s;
}
.add-btn:active{
box-shadow: none;
}
.list-container{
display: flex;
align-items: center;
margin-top: 5px;
}
.list-item{
list-style-type: none;
/* background-color: #596e8b; */
border:2px solid rgb(161, 158, 158);
color:white;
padding:3px;
padding-left: 5px;
border-radius: 5px;
width: 100%;
height: 30px;
display: flex;
align-items: center;
position: relative;
margin-top: 10px;
}
.icons{
position: absolute;
right: 10px;
}
.icons i{
margin: 4px;
font-size: large;
cursor: pointer;
transition: 0.1s;
}
.icons i:hover{
transform: scale(1.2);
}
.icon-delete:hover{
color: red;
}

You might also like