LD10: OOP and Copilot Intro due Thu 06 Nov 13:20

Preparation for Lab Day

In preparation for lab day, do these actions:

1. Make sure you don't have any uncommitted work in your workspace. Then pull from the upstream remote to get the new hw10 directory.

2. Copy all of the files related to the shopping list app from hw09 into the newly created hw10 directory. Continue working in the hw10 directory.

3. 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 shoppinglist.css. Your HTML document should remain in the base hw10 directory. Verify that everything is working and styled correctly.

4. 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. You should be able to use the Github Copilot Free version without jumping through any special hoops. The free version will work great for the purposes of this course. As a student you can get access to the Github Copilot Pro version for free if you want to jump through some extra hoops. If you decide to jump through the extra hoops you will need to install the Student Developer Pack by visiting https://education.github.com/ and click on the Students menu and then the link for the Student Developer Pack.

   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.

   3. Modify the .vscode/settings.json file in your workspace by chaning this line:

      "github.copilot.enable": { "*": false},

      to read:

      "github.copilot.enable": { "*": true },

   4. Once the extension is enabled and your settings file is modified 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.

5. 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 debug 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.