Extension - 03 - Vue 2

[braughtg]

Type of Work

ⓘ Check the box beside the Type of Work to indicate whether this pull request is for a tutorial or an extension. If editing, place an X in the [ ] (e.g. [X] to check it.

• - Tutorial
• - Extension

Topic

ⓘ Check the box beside the topic to which course topic this pull request applies. If editing, place an X in the [ ] (e.g. [X] to check it.

• - 01 - HTML/CSS/JS
• - 02 - Vue 1
• - 03 - Vue 2
• - 04 - Vue 3
• - 05 - Vue 4
• - 06 - Cypress Testing
• - 07 - Vue Lifecycle Hooks and API Calls

Time Estimate

ⓘ Provide an estimate of the number of hours you spent working on the contents of this pull request.

Additional Information

ⓘ Provide any feedback you have that might help improve this assignment for future students.

Attributions

Assisted-by: gpt-5.6 luna

[Copilot]

@copilot review this pull request

Workflow

Requirement	Status	Details
At least three commits	✅	The pull request contains 61 commits.
Commit messages briefly describe changes	✅	The commit messages briefly describe the associated changes.

Non-AI Extensions

Requirement	Status	Details
Reset is disabled when text is empty	✅	index.html binds disabled to answer == ''.
Two CSS rules set different background-color values	✅	.error uses lightpink and .no-error uses white.
Computed property returns the input CSS class based on hasError	✅	inputCSSClass returns error or no-error.
Input class is bound to the computed property	✅	The input uses v-bind:class="inputCSSClass".

Extensions with AI

Requirement	Status	Details
A watch clears error styling when typing starts	✅	The answer watcher sets hasError to false for a non-empty answer.
Badge image displays at 80% or higher	✅	earnedBadge checks correctPercentage >= 80, and the template displays images/badge.png.
A commit contains an Assisted-by: trailer	✅	Commit 55d662b contains Assisted-by: GPT-5.6 Luna.
Pull request contains a Copilot interaction log with the required heading and hidden hash	❌	The current pull request comments do not contain a comment with the required Copilot Chat Log heading and hidden hash.

AI Reflection

Requirement	Status	Details
Comment responds to every AI Reflection question without merely restating the questions	❌	The comments answer the method-confidence and effective-prompts questions, but do not answer how to choose documentation vs. completions vs. the Ask agent.

[braughtg]

Copilot Chat Log

Created: 2026-09-04 23:24:00

---

Describe two different ways to clear the error styling from the text input when the user has typed something into input.

---

Which of these solutions is preferable and why?

---

I disagree all of the logic for the hasError property is in app.js. Shouldn't this logic be there too?

---

How could I implement a feature where a badge is displayed if the user gets more than 80% of their answers correct?

---

make the bage an image

---

How does the error styling for the input field get cleared when the user types

---

what about the watch? doesn't it clear hasError?

---

How does the error styling for the input field get cleared when the user types

---

[braughtg]

@copilot review this pull request

[Copilot]

@copilot review this pull request

Workflow

Requirement	Status	Details
At least three commits	✅	The pull request contains 61 commits.
Commit messages briefly describe changes	✅	The commit messages briefly describe the associated changes.

Non-AI Extensions

Requirement	Status	Details
Reset is disabled when text is empty	✅	index.html binds disabled to answer == ''.
Two CSS rules set different background-color values	✅	.error uses lightpink and .no-error uses white.
Computed property returns the input CSS class based on hasError	✅	inputCSSClass returns error or no-error.
Input class is bound to the computed property	✅	The input uses v-bind:class="inputCSSClass".

Extensions with AI

Requirement	Status	Details
A watch clears error styling when typing starts	✅	The answer watcher sets hasError to false for a non-empty answer.
Badge image displays at 80% or higher	✅	earnedBadge checks correctPercentage >= 80, and the template displays images/badge.png.
A commit contains an Assisted-by: trailer	✅	Commit 55d662b contains Assisted-by: GPT-5.6 Luna.
Pull request contains a Copilot interaction log with the required heading and hidden hash	✅	Comment 5547588356 has the Copilot Chat Log heading and an HTML comment containing the request hash.

AI Reflection

Requirement	Status	Details
Comment responds to every AI Reflection question without merely restating the questions	❌	The comments answer the method-confidence and effective-prompts questions, but do not answer how to choose documentation vs. completions vs. the Ask agent.

[braughtg]

@copilot review this pull request

[Copilot]

@copilot review this pull request

Workflow

Requirement	Status	Details
At least three commits	✅	The pull request contains 61 commits.
Commit messages briefly describe changes	✅	The commit messages briefly describe the associated changes.

Non-AI Extensions

Requirement	Status	Details
Reset is disabled when text is empty	✅	index.html binds disabled to answer == ''.
Two CSS rules set different background-color values	✅	.error uses lightpink and .no-error uses white.
Computed property returns the input CSS class based on hasError	✅	inputCSSClass returns error or no-error.
Input class is bound to the computed property	✅	The input uses v-bind:class="inputCSSClass".

Extensions with AI

Requirement	Status	Details
A watch clears error styling when typing starts	✅	The answer watcher sets hasError to false for a non-empty answer.
Badge image displays at 80% or higher	✅	earnedBadge checks correctPercentage >= 80, and the template displays images/badge.png.
A commit contains an Assisted-by: trailer	✅	Commit 55d662b contains Assisted-by: GPT-5.6 Luna.
Pull request contains a Copilot interaction log with the required heading and hidden hash	✅	Comment 5547588356 has the Copilot Chat Log heading and an HTML comment containing the request hash.

AI Reflection

Requirement	Status	Details
Comment responds to every AI Reflection question without merely restating the questions	❌	The comments answer the method-confidence and effective-prompts questions, but do not answer how to choose documentation vs. completions vs. the Ask agent.

[braughtg]

@copilot review this pull request

[Copilot]

@copilot review this pull request

Workflow

Requirement	Status	Details
At least three commits	✅	The pull request contains 63 commits.
Commit messages briefly describe changes	✅	The commit messages briefly describe the associated changes.

Non-AI Extensions

Requirement	Status	Details
Reset is disabled when text is empty	✅	index.html binds disabled to answer == ''.
Two CSS rules set different background-color values	✅	.error uses lightpink and .no-error uses white.
Computed property returns the input CSS class based on hasError	✅	inputCSSClass returns error or no-error.
Input class is bound to the computed property	✅	The input uses v-bind:class="inputCSSClass".

Extensions with AI

Requirement	Status	Details
A watch clears error styling when typing starts	✅	The answer watcher sets hasError to false for a non-empty answer.
Badge image displays at 80% or higher	✅	earnedBadge checks correctPercentage >= 80, and the template displays images/badge.png.
A commit contains an Assisted-by: trailer	✅	Commit 55d662b contains Assisted-by: GPT-5.6 Luna.
Pull request contains a Copilot interaction log with the required heading and hidden hash	✅	Comment 5547588356 has the Copilot Chat Log heading and an HTML comment containing the request hash.

AI Reflection

Requirement	Status	Details
Comment responds to every AI Reflection question without merely restating the questions	❌	The pull request does not contain substantive responses to the three reflection questions. The chat-log comment records prompts only; the separate reflection comment contains only two questions and no answers, including no answer explaining when to choose documentation, completions, or the Ask agent.

[braughtg]

I was most confident in my implementations when I wrote the code manually, followed by using completions, followed by using the Ask agent. The less control over the code I had the less I was sure about how it worked.

[braughtg]

@copilot review this pull request

[Copilot]

@copilot review this pull request

Workflow

Requirement	Status	Details
At least three commits	✅	The pull request contains 63 commits.
Commit messages briefly describe the changes made	✅	The commit messages briefly describe the associated changes.

Non-AI Extensions

Requirement	Status	Details
The Reset button is disabled whenever the text input is empty	✅	index.html binds disabled to answer == ''.
Two CSS rules set different background-color values	✅	.error uses lightpink and .no-error uses white.
A computed property returns the input CSS class based on hasError	✅	inputCSSClass returns error or no-error.
The text input binds its class to the computed property	✅	The input uses v-bind:class="inputCSSClass".

Extensions with AI

Requirement	Status	Details
A watch clears error styling when typing starts	✅	The answer watcher sets hasError to false for a non-empty answer.
A badge image displays at 80% or higher	✅	earnedBadge checks correctPercentage >= 80, and the template displays images/badge.png.
A commit contains an Assisted-by: trailer	✅	Commit 55d662b contains Assisted-by: GPT-5.6 Luna.
The pull request contains a Copilot interaction log with the required heading and hidden hash	✅	Comment 5547588356 has the Copilot Chat Log heading and an HTML comment containing the request hash.

AI Reflection

Requirement	Status	Details
A comment responds to every AI Reflection question without merely restating the questions	❌	The new comment explains confidence when working manually, with completions, and with the Ask agent, but it does not answer which prompts were most effective or how to choose documentation versus completions versus the Ask agent for a new task.

[braughtg]

When I broke things down into smaller more precise tasks the prompts were most effective.

I would choose whether to use documentation, completion or the Ask agent based on the size of the task. Smaller tasks were well handled by completion, while larger pieces of work or questions about how the code works were better handled by the Ask agent.

[braughtg]

@copilot review this pull request

[Copilot]

@copilot review this pull request

Workflow

Requirement	Status	Details
At least three commits	✅	The pull request contains 63 commits.
Commit messages briefly describe the changes	✅	The commit messages briefly describe the associated changes.

Non-AI Extensions

Requirement	Status	Details
Reset is disabled when the text input is empty	✅	index.html binds disabled to answer == ''.
Two CSS rules use different background colors	✅	.error uses lightpink and .no-error uses white.
Computed property returns the input CSS class	✅	inputCSSClass returns error or no-error based on hasError.
Input class binds to the computed property	✅	The input uses v-bind:class="inputCSSClass".

Extensions with AI

Requirement	Status	Details
Watch clears error styling when typing starts	✅	The answer watcher sets hasError to false for a non-empty answer.
Badge image displays at 80% or higher	✅	earnedBadge checks correctPercentage >= 80, and the template displays images/badge.png.
A commit contains an Assisted-by: trailer	✅	Commit 55d662b contains Assisted-by: GPT-5.6 Luna.
Copilot interaction log is present	✅	Comment 5547588356 has the Copilot Chat Log heading and hidden request hash.

AI Reflection

Requirement	Status	Details
All AI Reflection questions are answered	✅	Comments 5547695938 and 5547724085 substantively address confidence by method, effective prompts, and choosing documentation, completions, or the Ask agent.

[braughtg]

Used for testing