LD10: OOP and LocalStorage Intro due Thu 09 Nov 13:20

Preparation for Lab Day

In preparation for lab day, do these actions:

1. In your workspace create a directory named hw10 and copy all the relevant shopping list files from hw09. Continue working in the hw10 directory.

2. If you haven't done so already apply some structure to your hw10 directory by creating subdirectories: css and js. Move all CSS code into the appropriate directory and modify source as necessary to refer to it. All of the CSS commands currently in shoppinglist.html should be moved to an external CSS document named styles.css. Your HTML document should remain in the base hw10 directory. Verify that everything is working and styled correctly.

3. Install and enable Co-Pilot in VSCode. Here are some steps to accomplish that. Keep in mind that sometimes websites change so these directions may not be perfect:
   1. If you have already signed up with the free “Student Developer Pack” with GitHub then you can skip this step. For mere mortals, GitHub CoPilot requires a monthly fee. As a student you can sign up to use it for free using your HSU email address. So, visit https://education.github.com/ and click on the Students menu and then Student Developer Pack and then follow the instructions. If you haven't already created a GitHub account you'll need to do that first. Once you have enable the Developer Pack you should have access to CoPilot.
   2. To use CoPilot in VSCode, start VSCode and click on the Extensions icon in the leftmost menu. In the search box, type GitHub Copilot and install that extension. As part of enabling that extension you will need to provide your GitHub credentials. Once the extension is enabled you will begin receiving prompts as you write code. You will simply press TAB if you want to keep its suggestions ... otherwise just keep typing what you wanted.

4. Commit and push your work in hw10.

On Lab Day

1. Begin by showing the instructor your pre-lab work.

2. To play around with Copilot for a bit, let's modify the shopping list application so that we remove the add button and simply trigger the add behavior by having the user press ENTER after they've entered an item. So, go to your Javascript code and type a comment explaining what you to accomplish and work together with Copilot to get the result you want. Make sure that in your final version the add button is removed.

3. In the lab day and homework assignment we will be learning to use Javascript objects as a way to organize our code. To that end, at the top of shoppinglist.js, create a class called ListItem that will store two attributes: (1) the text for the list item and (2) a value that indicates whether or not the list item has been marked through.

4. Write a constructor that will accept parameters to initialize the attributes of the class.

5. Add a method to the class called debug that will display the values of the attributes of the class to the console log when called.

6. Have your Javascript code create two instances of the new ListItem class and invoke the debug method. Test your code.

7. Now let's continue working on the object-oriented design by creating another class called List that will internally store an array of ListItem's. The List class should have the following design/behavior:

   List
   + name	a string that represents the name of this list (e.g., “My Christmas List" or “Shopping List”; the value for this name is provided by the constructor
   + list	an array of ListItems
   + constructor(name)	store the name of the list and initial the list attribute to be an empty array
   + debug()	display all items in the list to the console log
   + find(str)	searches the list to see if str is already there; returns the index of where the item was found (or -1 if not found
   + insert(str,marked)	a method that given a string and whether or not the string should be marked through will trim the string and verify the string does not already exist in the list. If the string is unique in the list it will create a ListItem object and add that object to list.
   + remove(str)	searches for the given list value in list; if found remove it from in list
   + toggleMark(str)	find the list value matching str and update toggle its marked value in list
   + markAll(mark)	set or clear the mark value for all elements in list according to the provided parameter
   + update(pos,str,mark)	given the position in the list to be updated verify that the updated value would not create a duplicate. If it will create a duplicate, return false. If not modify the appropriate ListItem in list to match the provided parameters

   NOTE: For our work today we will not attempt to integrate these objects with the existing code that runs the application. You will just be testing these classes in isolation.

8. Begin this process by writing the constructor and testing it.

9. Implement (and test) the find method described above.

10. Implement (and test) the insert method described above.

11. Implement (and test) the display method described above.

12. Implement (and test) the remove method described above.

13. Go back and put the finishing touches on the constructor.

14. Commit and push your work.

15. Show your work to the instructor. If you finish early you can start work on the homework assignment.