<file_sep>import React from 'react'

const TodoCalender = () => {

    const date = new Date();
    const day = date.getDate();

    const weekDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thirsday", "Friday", "Saturday"][date.getDay()];

    const month = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ][date.getMonth()];

    const enOrdinalRules = new Intl.PluralRules("en", {
        type:"ordinal"
    });

    const enOrdinalRulesMap = {
        one: "st",
        two: "nd",
        few: "rd",
        other: "th"
    }

    const enOrdinalSuffix = enOrdinalRulesMap[enOrdinalRules.select(day)]

    return (
        <div className="todo_calender">
            <h1>{`${weekDay}, ${day}${enOrdinalSuffix}`}</h1>
            <p className="month">{month}</p>
        </div>
    )
}

export default TodoCalender
<file_sep>import React, { useEffect, useState } from "react";
import TodoCalender from "./TodoCalender";
import headerImage from "../components/header_img.png";
import { Zoom, Fade} from "react-awesome-reveal";

// local storage for getItem()
const getLocalStorageItems = () => {
  const myLists = localStorage.getItem("lists");
  if (myLists) {
    return JSON.parse(localStorage.getItem("lists"));
  } else {
    return [];
  }
};

const TodoItems = () => {
  const [input, setInput] = useState("");
  const [items, setItems] = useState(getLocalStorageItems());
  const [toggleSubmit, setToggleSubmit] = useState(true);
  const [isEdit, setIsEdit] = useState(null);

  let createRef = React.createRef();

  const handleClick = () => {
    if (!input) {
      createRef.current.innerHTML = "Plese enter input field!";
    } else if (input && !toggleSubmit) {
      createRef.current.innerHTML = "";
      setItems(
        items.map((element) => {
          if (element.id === isEdit) {
            return {
              ...element,
              text: input,
            };
          }
          return element;
        })
      );
      setToggleSubmit(true);
      setInput("");
      setIsEdit(null);
    } else {
      createRef.current.innerHTML = "";
      const allInput = {
        id: Math.floor(Math.random() * 10000),
        text: input,
      };
      setItems([...items, allInput]);
      setInput("");
    }
  };

  const editItem = (id) => {
    const updateItem = items.find((element) => {
      return element.id === id;
    });
    setToggleSubmit(false);
    setInput(updateItem.text);
    setIsEdit(id);
  };

  const deleteItem = (id) => {
    const filterItems = items.filter((element) => {
      return element.id !== id;
    });
    setItems(filterItems);
  };

  const removeItems = () => {
    setItems([]);
  };

  //   local storage setItem() to save my items
  useEffect(() => {
    localStorage.setItem("lists", JSON.stringify(items));
  }, [items]);
  return (
    <div className="container">
      <div className="todoImage">
        <Zoom direction="right" delay="100" triggerOnce>
          <TodoCalender />
        </Zoom>
        <img src={headerImage} alt="header-pic" width="100%" height="150px" />
      </div>
      <Fade delay="200">
        <div className="todo_main">
          <span className="msg" ref={createRef}></span>
          <input
            type="text"
            name="input"
            placeholder="Add Items"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            className="todo-input"
          />

          {toggleSubmit ? (
            <i
              class="fas fa-plus-circle todo-icons todo-icons-add"
              onClick={handleClick}
              title="Add Item"
            ></i>
          ) : (
            <i
              class="fas fa-edit todo-icons todo-icons-edit"
              onClick={handleClick}
              title="Edit Item"
            ></i>
          )}

          <div className="showItem">
            {items.map((item) => {
              return (
                 
                <div className="todo-row">
                  <h3>{item.text}</h3>
                  <div className="icons_right">
                    <i
                      class="far fa-edit icons"
                      title="Edit Item"
                      onClick={() => editItem(item.id)}
                    ></i>
                    <i
                      class="far fa-trash-alt icons"
                      title="Delete Item"
                      onClick={() => deleteItem(item.id)}
                    ></i>
                  </div>
                </div>
              );
            })}
          </div>

          <div className="showItem">
            <button className="todo-button" onClick={removeItems}>
              clear all
            </button>
          </div>
        </div>
      </Fade>
    </div>
  );
};

export default TodoItems;
<file_sep>import "./App.css";
import TodoItems from "./components/TodoItems";
import { Zoom } from "react-awesome-reveal";

function App() {
  return (
    <Zoom triggerOnce>
      <div className="todo_title">
        <h3>Todo List</h3>
      </div>
      <TodoItems />
    </Zoom>
  );
}

export default App;
