Extension 03 - Vue.js 2

[braughtg]

Extension 03 - Vue.js 2

In these extensions you will add modify and add some feature to the Flashword app as it existed at the end of Tutorial 03. In addition you will begin to work with GitHub's Copilot's ask mode.

Getting Started

The tasks below will remind you how to get your Codespace up and running and how to work though the Extension. You should be starting to internalize this process making you less reliant on reading the detailed instructions each time.

Tasks

1. Follow the steps for "Starting an Extension."
2. Review the steps for "Working on Extension Tasks" and use them to complete each of the tutorials below.
3. At the end of Tutorial 03 the flashword app contained a lot of example code that was helpful in illustrating additional Vue features, but did not directly integrate into the game (e.g. Showing the hint, difficulty levels, the full name example, etc). Before getting into actually extending the app it would be helpful to clean. up. Use the following steps to get a clean version of flashword from which to start these extensions.
   1. Ensure that you are on the feature branch you created for this extension.
   2. Use the following commands in a terminal in your Codespace:

      git fetch upstream t03-vue2-clean
      git checkout upstream/t03-vue2-clean web-projects/flashword/index.html
      git checkout upstream/t03-vue2-clean web-projects/flashword/app.js
      

   3. Open index.html and app.js to ensure that they no longer contain the illustrative examples.
   4. Commit these changed files to your feature branch:

      git stage .
      git commit -m "sets clean starting point for e03"
      

Extensions Without AI

Use the familiarity with Vue.js and the flasword app that you gained from the tutorials to complete the tasks below. For these tasks you may code manually, use the MDN documentation, and use GitHub's IntelliSense and CoPilot inline completions, but do not use any other GitHub Copilot modes or AI tools.

Tasks

1. Currently the "Reset" button is always enabled. It would probably be better if the user could not click the "Reset" button when the input field is empty. Disable the "Reset" button when the input field is empty and enable it when the input field contains some text.
2. At the end of Tutorial 03, the styling of the text input to reflect an error (checking an empty answer) was left as being done by binding the style attribute to an object literal. Susan commented that it would be better to do this by binding the class attribute instead. Use the following smaller steps to make this change:
   1. Add appropriate CSS classes for styling the text input to index.html.
   2. Create a computed property that returns the name of the CSS class that should be used to style the text input.
   3. Modify index.html so that is uses the computed property to style the text input.
   4. Remove all of the unnecessary code from the old way of stying the text input.
   5. Be sure to test that your new implementation still works.

Self Check

1. How do you disable an HTML button?
2. How is the new way of styling the text input better than the old way?
3. Why is a computed property the right choice, rather than a method, to return the CSS class?

Opening Copilot's Ask Agent

In the last extension you learned about IntelliSense and Copilot completions. Copilot has several agents ("Ask", "Agent", "Plan") that we will learn about in the coming extensions. You interact with Copilot's agents using prompts rather than inline completions or comments in the code, providing a more flexibility and power. In this extension you'll experiment with Copilot's "Ask" agent, which allows you to ask questions about your code, but does not allow Copilot to make changes.

Tasks

1. Open the VS Code "Chat panel" by clicking the the "Toggle Secondary Side Panel button" () in the upper right of the window.
2. Choose "Ask" from the Copilot "Set Agent" menu () at the bottom of the Chat panel.
3. Choose the AI model recommended by your instructor from the Copilot "Models" menu ().

Self Check

1. How do you open the "Chat panel"?
2. How do you choose "Ask" as the "Copilot Agent"?
3. How do you set the AI Model that Copilot will use?

Extensions Using Copilot's Ask Agent

Complete the following tasks by prompting Copilot's Ask agent and using the responses that it provides to make manual edits to your code.

Tasks

1. Reload the flashword app in the browser and click the "Check Answer" button. Then start typing an answer in the input field. Notice that the field remains light pink even after you start typing even though there is no longer an error. Prompt Copilot's Ask agent for two different ways to fix this problem. Then manually implement and test the solution that uses a Vue feature that was introduced in Tutorial 03.
2. Have Copilot's Ask agent explain to you how the error styling get's cleared when the user types an answer. Ask clarifying follow up questions until you fully understand how the solution that you implemented works.
3. A lot of games like flashword will award badges for particular accomplishments. Use Copilot's Ask agent to create a badge feature so that the badge shown below is displayed at the proper time. Be sure to fully test your feature.
   . .
   You may find it effective to think about how the feature can be decomposed into smaller parts and then implement the parts one by one like was done when changing the error styling earlier.
4. If Copilot used any HTML, CSS, Javascript or Vue.js features that you do not know, have the Ask agent explain them to you.

AI Reflection

Add a comment to your pull request for this Extension that addresses the following points:

1. How did the method that you used for a task (manual, completions, Ask agent) affect the confidence that you had in your implementation? Why?
2. Which of the prompts that you used were most effective for you and what do you think made them effective?
3. When faced with a new task how might you choose whether to use documentation vs. completions vs. the Ask agent?

Turning in Your Work

Once you have finished all of the work in this extension you will need to officially submit it.

Tasks

1. Use the steps for "Completing an Extension" in the Extensions Workflow to submit your work.

---

This Extension is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License