ToDo-List 📑

Hi User! 👋 The goal was to create a To Do List, where the user can Add➕, Edit🖋️, Move✈️ and Remove✖️ the task that they created.

Infos

Reasons:

I decide to create this type of App 'cause I like to undertake ambitious challenge to try get every time a better version of me. 💻

Build Status:

The App is COMPLETE, but always in search of something new! ✔️

Code Style:

Code Style: Standard by Prettier 🎊

Screen Shot and Video:

Main Site View:

Video Function:

2023-02-06.22-00-30.mov

Tech / FrameWork:

For this App I am using:

• React
  • React Router Dom@6
  • React Beautiful DnD - Drag and Drop
  • React-contenteditable
• Tailwind CSS
  • TailwindCss - scrollbar
• AOS

Code Examples

For make this App work you need to get some input, process them and return an output. For doing this I devide the App into several parts:

We take the Task from the input:

  const [input, setInput] = useState("");
  const [todoList, setTodoList] = useState([]);
  
  // * Input from btn
  const handleInputData = () => {
    if (input !== "") {
      const id = todoList.length + 1;
      setTodoList((prev) => [
        ...prev,
        {
          id: id,
          task: input,
          complete: false,
          trashNear: false,
          deleted: false,
          hoverUndo: false,
          read: false,
        },
      ]);
      setInput("");
      localStorage.setItem('list', JSON.stringify(todoList));
    }
  };
  
  // * Input from KB
  const handleInputDataKB = (e) => {
    if (e.key === "Enter")
      if (input !== "") {
        const id = todoList.length + 1;
        setTodoList((prev) => [
          ...prev,
          {
            id: id,
            task: input,
            complete: false,
            trashNear: false,
            deleted: false,
            hoverUndo: false,
            read: false,
          },
        ]);
        setInput("");
        localStorage.setItem('list', JSON.stringify(todoList));
      }
    };

And I give you the opportunity to select if a task is Completed or Not:

  // * Complete Task
    const handleCompleteTask = (id) => {
      let list = todoList.map((task) => {
        let item = {};
        if (task.id === id) {
          item = { ...task, complete: !task.complete };
        } else item = { ...task };
        return item;
      });
      setTodoList(list);
      localStorage.setItem('list', JSON.stringify(todoList));
    };

Delete Task:

    // * Delete Task
    const handleDelete = (id) => {
      let list = todoList.map((task) => {
        let item = {};
        if (task.id === id) item = { ...task, deleted: true, hoverUndo: false };
        else item = { ...task };
        return item;
      });
      setTodoList(list);
      setTotDeleted(totDeleted + 1);
      localStorage.setItem('totDeleted', totDeleted)
      localStorage.setItem('list', JSON.stringify(todoList));
    };

Deleted Menu, in case you want a deleted task back:

  const handleUndo = (id) => {
    let list = todoList.map((task) => {
      let item = {};
      if (task.id === id) item = { ...task, deleted: false };
      else item = { ...task };
      return item;
    });
    setTodoList(list);
    setTotDeleted(totDeleted - 1);
    localStorage.setItem('totDeleted', totDeleted)
    localStorage.setItem('list', JSON.stringify(todoList));
  };

Set local storage to store the task:

  const getLocalStorage = () => {
    let list = localStorage.getItem('list')
    
    if(list) return JSON.parse(localStorage.getItem('list'));
    else return [];
  }

  const getTotDeteled = () => {
    let list = localStorage.getItem('totDeleted')

    if(list) return JSON.parse(localStorage.getItem('totDeleted'));
    else return [];
  }
  ...
  ...
  ...
    // * Tasks
  useEffect(() => {
    localStorage.setItem('list', JSON.stringify(todoList))
  }, [todoList])

  // * totDeleted
  useEffect(() => {
    localStorage.setItem('totDeleted', JSON.stringify(Number(totDeleted)))
  }, [totDeleted])
  

How To Use It?

Click on the Input, Write the Task, Press the Button and you are done. You improve your self we store the task 👍

License

This project is licensed under the MIT License. ⚖️