create to-do app

[terehov-ar]

create app with html css js

[SoundAsleep192]

Step 1: Create the following elements in the HTML structure:

• A text field
• A button with the text "add"
• An empty list-container for todo items (they'll be added later using javascript)

[terehov-ar]

Step 1: Create the following elements in the HTML structure:

• A text field
• A button with the text "add"
• An empty list-container for todo items (they'll be added later using javascript)

done

[SoundAsleep192]

Step 2: Write a script to provide the following functionality:

• On button press, if the text field contains some text, create a new li element containing the provided text, and append it inside the list element.
• On button press, if the text field contains no text, do nothing

[terehov-ar]

Step 2: Write a script to provide the following functionality:

• On button press, if the text field contains some text, create a new li element containing the provided text, and append it inside the list element.
• On button press, if the text field contains no text, do nothing

done

[SoundAsleep192]

Step 3: Clear the text field on element addition:

• If the text field contains text and the element was successfully added, clear the text field
• If the text field contains no text, as previously, do nothing

[SoundAsleep192]

Step 4: Create a data structure for storing the app's state

• Create an in-memory array data structure
• Whenever a new list element is created, push to the array an object with the following structure { id: string, text: string, createdAt: number } where id is a random uuid generated on the fly (please use this method for generating the uuid), text is the text which was taken from the input text field, and createdAt is a timestamp at the moment of the element addition

[SoundAsleep192]

Step 5: Create the update function which should do the following

1. Clear the ul element off all child elements
2. Iterate over the state array doing the following:
   • Create a li element with the text of the current iteration item inside of it and the id added to it as a data-attribute (please call it data-id)
   • Append the 'li' inside the ul

Then, remove the logic for creation and addition of li elements from the button click handler callback Then, call the update function in the end of the button click handler callback

[SoundAsleep192]

Step 6: Make use of local storage for state persistence

1. Create a function named save which stringifies and stores the state array in the local storage under the key 'state'
2. Create a function named load which pulls the state out of the local storage, then parses and populates the state array with it
3. Call the save function at the end of the update function
4. Call the load function on the script startup

[SoundAsleep192]

Step 7: Implement item delete functionality

1. Inside the li element create a delete button
2. On the button click, do the following:
   • Pick the id from the data-id of the element which got it's button clicked
   • Remove the item with that id from the state array. For doing it you may want to use tools like indexOf and splice
   • Call update

If you're feeling unstoppable, you can try to implement the event delegation here. It is a useful concept to understand as it greatly improves performance when dealing with a big amount of data