Frontend Mentor - Todo app solution

This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Add new todos to the list
• Mark todos as complete
• Delete todos from the list
• Filter by all/active/complete todos
• Clear all completed todos
• Toggle light and dark mode
• Bonus: Drag and drop to reorder items on the list

Screenshot

Links

• Solution URL: https://github.com/ibimina/todolist-app
• Live Site URL: https://ibimina.github.io/todolist-app/

My process

Built with

• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library

What I learned

• I learnt to fetch data from a json file using the following methods GET - to fetch out data to be mapped in the li tag using a custom hook that cause redendering when a functionis called

export const useFetch = (url) => {
 const [todos, setTodos] = useState(null);
 const [isLoading, setIsLoading] = useState(false);
 const [error, setError] = useState(null);
 const getdata = (url) => {
   const abortConst = new AbortController();

   fetch(url, { signal: abortConst.signal })
     .then((res) => {
       if (!res.ok) {
         throw Error("could not fetch data for the resource");
       }
       return res.json();
     })
     .then((d) => {
       setTodos(d);
       setIsLoading(false);
       setError(null);
     })
     .catch((err) => {
       if (err.name === "AbortError") {
         console.log("fetch abort");
       } else {
         setError(err.message);
         setIsLoading(false);
       }
     });
   return () => abortConst.abort();
 };
 useEffect(() => {
   getdata(url);
 }, [url]);  
 return [{ todos, isLoading, error }, getdata];
};

POST - to add new data

fetch("http://localhost:3000/todos", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(todo),
     })

PUT - to update a value

fetch("http://localhost:3000/todos/" + id, {
     method: "PUT",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(ne),
   })

DELETE - to delete

  fetch("http://localhost:3000/todos/" + id, {
          method: "DELETE",
        }).

• I learnt how to out data that fullfills a condition using json url

 onClick={() => getdata("http://localhost:3000/todos?checked=false")

• I also learnt how to drag and drop items using beautiful dnd For this to work properly I had to remove the React.strictMode and set the draggable id to a string Although I discovered that when I click the active and completed buttons it reformats I guess its because I am fetcching from the json file, I tried it with an array but it dtill behaves the same. I will research more to discover why, when I do I will update the code

Continued development

Continous learning of React framework, how to fetch data from a json file

Useful resources

• How to create a local json file and watch it update - This helped me for in creating json file. I really liked this pattern and will use it going forward.

• Learning the different methods to fetch data from a json file - This helped me to add(post method) new todos,update(put method) values of the todo, delete(delete method) todos and post n

• How to add a drag and drop listed items - This is an amazing article which helped me finally understand drag and drop list items. I'd recommend it to anyone still learning this concept.

Author

• Frontend Mentor - @ibimina
• Twitter - @ibiminaaH