Project About

Actually, when starting the project, I didn't want it to progress by keeping the data in localStorage. But but when I designed it in Figma my muses came and asked me to do this. I hope you like it. Oh, by the way, I added the steps I followed below and of course my Step By Step Coding. Thanks 🤸‍♀️

Use Technologies

I used HTML in my index page and applied the JavaScript language to give it dynamism. And of course CSS is indispensable to make it look beautiful on the eye.

Design

• Figma Design

Demo

• Netlify
  

Step by Step Javascript Coding

• Get document elements with JS
  
• Add AddButon and a listen event to it.
  
• Check if task item input value is entered with console log but you shouldn't take a space as a task.
  
• Check if task description input value is entered with console log but you shouldn't take a space as a task.
  
• Else create a new dataset.
  
• Call the function that creates the new li element for task input item data.
  
• Call the function that creates the new li element for description input data.
  
• And empty the of both input.
  
• Empty the input if no task item input value and task descripton input value.
  Finish this function for now. Because I will add localStorage after finishing Dom activities.
  
• Create a function that takes a dynamic data parameter that the li element element for task input item will be in.
  
• Create a new li element and assign it the object's id and the completed class.
  
• Create control icon and connect to li
  
• Create edit icon and connect to li
  
• Create a p element for the description and task, connect it to the li element by creating a text node.
  
• Create delete icon and connect to li
  
• The same steps are done in the annotation function.
  
• Assign the resulting li elements to the ul element as a child.
  
• If an event comes from any of the children of the ul, detect it and take action with addEventListener (Capturing)
  
• If the event came from a delete button, delete the parent of the delete button from the DOM.
  
• Let the input be active at the start
  
• Inject the same things on the keyboard with the enter key to insert and the spacebar to delete.
  Clicking the event will create your to-do list.
  
• Store the final version of the set array in localStorage
  
• Update todos array with data from localStorage
  
• Set localStorage for delete button.
  
• Checked function created and edited style
  
• Added modal when window load
  
• Added error box function
  
• Added edit function and event