I started journey to learn ReactJs. Where ever I go the first major project would be ToDo Application.
So , I have decided to build one with ReactJs.
you can the speed code at youtube
I am so bad at styling, so I choose minimal design.
App.css
.head{
text-align: center;
}
.todo{
margin:10px 10px 10px 10px;
text-align: center;
font-size: 140%;
cursor: pointer;
}
.TodoInput{
width: 50vw;
height:4vh;
border-radius: 4px;
font-size: 140%;
margin:auto;
}
so the final App.js would be
import React,{useState} from 'react';
import './App.css';
export default function App() {
//states
const [todos,setTodos]=useState([]);
const toggleComplete=index=>{
var newTodos=[...todos]
newTodos[index].isComplete=!(newTodos[index].isComplete)
setTodos(newTodos);
}
const addTodo=(text)=>{
const newTodos=[...todos,{todo:text,isComplete:false}];
setTodos(newTodos);
}
const handleClear=e=>{
e.preventDefault();
setTodos(todos.filter(todo=>todo.isComplete!==true))
}
return (
<div>
<h1 className="head">To-Do`s</h1>
<h4 className="head">Pending Tasks({todos.filter(x=>x.isComplete!==true).length})</h4>
<hr/>
<TodoForm addTodo={addTodo}/>
<hr/>
<div className="todolist">
{todos.map((todo,index)=>(
<Todo
key={index}
index={index}
todo={todo}
toggleComplete={toggleComplete}
/>
))}
</div>
<center><button onClick={handleClear}>Clear Completed</button></center>
</div>
);
}
//Todo display
function Todo({todo,index,toggleComplete}){
return(
<div className="todo"
onClick={()=>toggleComplete(index)}
style={{textDecoration:todo.isComplete?'line-through':''}}
>{todo.todo}</div>
);
}
// Add Todo
function TodoForm({addTodo}){
const [text,setText]=useState("");
const handleSubmit=e=>{
e.preventDefault();
addTodo(text);
console.log(text);
setText("");
}
return(
<div>
<center>
<form onSubmit={handleSubmit}>
<input
className="TodoInput"
value={text}
onChange={(e)=>setText(e.target.value)}
placeholder="enter the Todo"
/>
</form>
</center>
</div>
);
}
Top comments (0)