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)