Create Todo list using reactJs (insert and delete element) (using Map, filter methods)

Shreyesh kolhe
September 30, 2021

 Create Todo list using reactJs (insert and delete element) (using Map, filter methods).


 Source Code:-


App.js

import React, { useState } from "react";
import ListItem from "./ListItem";

const App = () => {
  const [list, setList] = useState('');
  const [btn, setBtn] = useState([]);

  const inputEvent = (event) => {
    setList(event.target.value);
  }

  const btnClick = () => {
    setBtn((preValue) => {
      return [...preValue, list];
    });
    setList('');
  }
  const delItems=(id)=>{
    // console.log("delete")
    setBtn((oldItem)=>{
      return oldItem.filter((arrEle, index)=>{
        return index !== id;
      })
    })
  }
  return (
    <>
      <div className="main_div">
        <div className="center_div">
          <br />
          <h1>ToDo List</h1>
          <br />
          <input type="text" onChange={inputEvent} value={list} name="" placeholder="Add a Items" />
          <button onClick={btnClick}>+</button>
          <ol>
            {btn.map((itemValue, index) => {
              return <ListItem
                  key ={index}
                  id= {index}
                  text = {itemValue}
                  onSelect ={delItems}
              />
            })}
          </ol>
        </div>
      </div>
    </>
  )
}

export default App;

ListItems.js

import React from 'react'

export default function ListItem(props) {
    
    return (
        <div className="todo_style">
            <but className="btn" onClick={()=>{
                props.onSelect(props.id);
            }}>❌</but>
            <li>{props.text}</li>
        </div>
    )
}

index.css


*{
  padding: 0;
  margin: 0;
  font-family: 'Merienda', cursive;
}
.main_div{
  width: 100%;
  height: 100vh;
  background: #6983aa;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.center_div {
  width: 25%;
  height: 80vh;
  background-color: #f4f4f4;
  box-shadow: 5px 5px 25px -5px rgba(0,0,0,0.5);
  border-radius: 15px;
}

h1{
  color: white;
  background: transparent;
  background-color: #8566aa;
  padding: 6px 0 2px 0;
  margin-bottom: 10px;
  box-shadow: 5px 5px 15px -5px rgba(0,0,0,0.3);
}

input{
  text-align: center;
  height: 30px;
  top: 10px;
  border: none;
  background: transparent;
  font-size: 20px;
  font-weight: 500;
  width: 60%;
  border-bottom: 2px solid #8566aa;
  outline: none;
}

button{
  min-height: 40px;
  width: 40px;
  border-radius: 50%;
  border-color: transparent;
  background-color: #8566aa;
  color: #fff;
  font-size: 40px;
  border: none;
  outline: none;
  margin-left: 10px;
  box-shadow: 5px 5px 15px -5px rgba(0,0,0,0.3);
  cursor: pointer;
}


button:hover{
  background-color: green;
}

ol{
  margin-top: 30px;
}

ol li{
  padding-left: 0px;
  text-align: left;
  font-size: 20px;
  font-weight: 500;
  min-height: 40px;
  display: flex;
  align-items: center;
  color: #8566aa;
  text-transform: capitalize;
}

.todo_style{
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}

.todo_style .fa-times{
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #8566aa;
  border-radius: 50%;
  margin: 0 15px 0 35px;
  color: aliceblue;
  box-shadow: 5px 5px 15px -5px rgba(0,0,0,0.3);
}

.todo_style .fa-times:hover{
  background-color: crimson;
}

@media (max-width: 768px){
  .center_div{
    width: 55%;
  }
}

.todo_style .fa-times {
  margin: 0 15px 0 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

button{
  margin-left: 5px;
  min-height: 40px;
  width: 40px;
  color: #fff;
  font-size: 30px;
  
}

.but{
  margin-left: 5px;
  min-height: 40px;
  width: 40px;
  color: #fff;
  font-size: 17px;
    margin-right: 20px;
}