React Todo List App using Hooks

 

React Todo List App using Hooks

 

Index.js

import React, { useState } from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import SignUpForm from './SignUpForm';

import App from './App';

//import reportWebVitals from './reportWebVitals';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

const AddTask=({addTask})=>{

  const[value,updateValue]=useState("");

 

const handleSubmit=e=>{

  e.preventDefault();

  if(value!==""){

    addTask(value)

    updateValue("");

 

  }

};

return(

  <form onSubmit={handleSubmit}>

<input type="text" value={value} placeholder="Enter your task todo" onChange={e=>updateValue(e.target.value)}/>

<button type="submit"><i class="material-icons">add</i></button>

  </form>

 

 

);

}

const ToDoList=()=>{

const addTask = text=> updateTask([...tasks,{text}]);

const [tasks,updateTask]=useState([

{

  text:"wake up",

  isCompleted:false

},

{

  text:"Fresh Up",

  isCompleted:false

},

{

  text:"Boost Up",

  isCompleted:false

}

 

]);

 

const toggleTask=index=>{

  const newTask=[...tasks];

  if(newTask[index].isCompleted){

    newTask[index].isCompleted=false;

  }

  else{

    newTask[index].isCompleted=true;

  }

  updateTask(newTask);

}

const removeTask=index=>{

  const newTask=[...tasks];

  newTask.splice(index,1);

  updateTask(newTask);

}

return(

  <div className="list-of-tasks-todo">

{tasks.map((task,index)=>(

<div className="task-status">

  <span onClick={()=>toggleTask(index)} className={task.isCompleted?"task-name completed-task":"task-name"}>

    {index}

    {task.text}

    </span>

    <button onClick={()=>removeTask(index)}><i class="material-icons">delete</i></button>

    </div>

))}

<AddTask addTask={AddTask}/>

</div>

);

}

 

const element =<ToDoList/>

 root.render(element);

 

index.css

body {

  margin: 0;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

    sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

 

body{

  background-color: blue;

  display: flex;

  flex-direction: column;

  font-size: 1.5rem;

  text-align: center;

  align-items: center;

  justify-content: center;

}

h1{

  color:white;

  text-align: center;

  font-size: 5rem;

}

.list-of-tasks-todo{

  padding-top: 10px;

  width: 400px;

}

.task-name{

  cursor: pointer;

}

.completed-task{

  text-decoration: line-through;

}

button{

  border: 0;

  cursor: pointer;

  font-size: 18px;

  outline:0;

}

.task-status{

  background-color: yellow;

  border-style: solid;

  box-shadow: inset;

  border-radius: inherit;

}

.task-status button{

  color: grey;

}

input{

  background: rgb(212, 205, 205);

  padding: 7px 10px;

  font-size: 1rem;

  color:black;

  outline: 0;

  border: 0;

  flex:1;

}

form{

  display: flex;

  padding-top: 10px;

}

.form-button{

  color:black;

  background: white;

  outline: 0;

  padding: 0 15px;

}

 

 

Output