For this project, you will be creating a "todo list" web apppowered by HTML, CSS, and JavaScript.

Begin by creating a folder in your 2680_F20 directory calledproject2

Inside 2680_F20/project2, create the following files:

• index.html
• style.css
• todo.js

In index.html, be sure to include:

inside your

section.

Your job is to develop the page such that it meets theserequirements. These requirements are presented in order ofincreasing difficulty. I recommend completing all of therequirements in a part before moving on to the next.

Part 1: the basics

• The page displays a "todo" list, a "done" list, a text inputfor typing in new items, and a button labeled "Add" that, whenclicked, adds the typed item to the "todo" list.
• "todo" and "done" appear side by side if the screen is wideenough; otherwise they stack vertically ("todo" is above, "done" isbelow).
• User can click each item in "todo", which moves the item to"done".
• Items in "done" can be clicked, which moves them back to"todo".
• Apply CSS to make the page look nice.

Part 2: convenience

• Both "todo" and "done" should have buttons labeled "Clear"that, when clicked, uses confirm() to check if the user wants toclear the list.
  • If they choose yes, then that particular list is cleared.
  • Clicking "Clear" in "todo" should ONLY clear "todo", not "done"(and vice versa).
• Allow the user to press enter in the text input to add theitem. Clicking the "Add" button should still work.
• After an item is added to "todo", the text input should becleared.
• When an item is added to "todo", it should display when theitem was added.

Part 3: persistence

• The page should have a beforeunload event handler assigned towindow that saves the "todo" and "done" items to localStorage
• The page should have an onload event handler assigned to bodythat checks localStorage for any saved "todo" and "done" items thatshould be loaded.

Part 4: file I/O

• The page also has "Save" and "Load" buttons at the top, whichdo the following when clicked:
  • If both "todo" and "done" are empty, clicking "Save" should donothing.
  • "Save" asks the user to save a file with the default name"todo.json". If they confirm the save file dialog, it saves thetodo list and done list to a JSON file.
  • "Load" lets the user choose a file that ends in ".json". Ifthey pick a .json file that was created using the "Save" button,then the page should:
    1. read the file contents as text,
    2. parse it to JSON,
    3. clear the current "todo" and "done" lists, and
    4. display the loaded "todo" and "done" items on the page
• Your page should be capable of loading this file and displayingit properly
  • Hint: this file also shows the pattern your script should usewhen creating a file.
  • Doublehint: use JSON.stringify() for saving, JSON.parse() forloading.

Answer rating: 100% (QA)

HTM... View the full answer