T02 vue1 by braughtg · Pull Request #54 · FarmData2/Vue3-WebDev-Kit

braughtg · 2026-08-25T18:42:49Z

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.

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.

braughtg · 2026-08-25T20:20:34Z

@copilot review this pull request.

braughtg · 2026-08-25T20:30:22Z

@copilot review this pull request.

braughtg · 2026-08-25T20:36:41Z

@copilot review this pull request.

Copilot · 2026-08-25T20:37:44Z

@copilot review this pull request.

Project Structure

Requirement	Status	Evidence
There is a directory named `flashword` within the `web-projects` directory.	✅	The directory `web-projects/flashword` exists.
The `flashword` directory contains the files `index.html` and `app.js`.	✅	Both `index.html` and `app.js` are present inside `web-projects/flashword`.
`index.html` loads vue.global.js from https://unpkg.com/vue@3/dist/vue.global.js.	✅	Line 7 of `index.html` is `<script src="https://unpkg.com/vue@3/dist/vue.global.js" defer></script>`.
`index.html` loads `app.js` in a `<script>` tag.	✅	Line 8 of `index.html` is `<script src="app.js" defer></script>`.
`app.js` disables an eslint rule with the line `// eslint-disable-next-line no-unused-vars, no-undef`	✅	Line 37 of `app.js` contains `// eslint-disable-next-line no-unused-vars, no-undef`.

Workflow

Requirement	Status	Evidence
The pull request contains at least three commits.	✅	The pull request contains 36 commits (which is at least 3 commits).
The commit messages briefly describe the changes made in the commit.	✅	The commit messages briefly describe the changes made (e.g. "adds mistakes again", "Merge branch 'main' into t02-vue1").

`index.html` Functionality

Requirement	Status	Evidence
data binding is used to display a word to be translated from the vue data.	✅	Line 39 in `index.html` displays the Spanish word dynamically using dynamic interpolation: `{{ wordA }}`.
a text input is used to allow the user to enter a translation for the word.	✅	Line 41 in `index.html` uses an `<input type="text" v-model="answer" />` tag.
data binding is used to display the user's translation as it is typed.	❌	There is no data binding expression (such as `{{ answer }}`) in `index.html` that displays the user's translation dynamically as it is typed.
the value of the text input is bound to a vue data property.	✅	Line 41 in `index.html` binds the text input value to the `answer` Vue data property via `v-model="answer"`.
a "Check Answer" button uses an `on-click` directive to call a vue method that checks the translation.	✅	Line 43 in `index.html` uses `<button v-on:click="checkAnswer()">` to invoke the `checkAnswer` method when clicked.
a `v-if` directive is used to display a feedback message after the "Check Answer" button is clicked.	✅	Line 45 in `index.html` uses `v-if="showFeedback"` to display the feedback section.
`v-if` and `v-else` directives are used to display correct or incorrect feedback messages.	❌	There are no `v-if` and `v-else` directives (or equivalent) in `index.html` to toggle correct/incorrect feedback messages. Line 46 only displays a success message using `v-if="correct"`: `<p v-if="correct" class="correct">You got it!</p>`.
a "Reset" button uses an `on-click` directive to call a vue method that resets the input and feedback message.	❌	Line 47 in `index.html` has `<button v-on:click="fail()">Reset</button>` which invokes `fail()` instead of the required `reset()` method.
the `div` with the id `app` has the `v-cloak` directive.	✅	Line 38 of `index.html` has `<div id="app" v-cloak>`.

The `checkAnswer` method

Requirement	Status	Evidence
sets the correct flag in the vue data to true if the answer is correct, otherwise sets it to false.	❌	The logic in `app.js` is inverted: `this.correct = this.wordB !== this.answer;` sets `correct` to `true` when the answer is incorrect, and `false` when it is correct.
sets the show feedback flag in the vue data to true.	✅	Line 28 in `app.js` sets `this.showFeedback = true;`.

The `reset` method`

Requirement	Status	Evidence
clears the user's answer in the vue data.	❌	Line 31 in `app.js` sets `this.answer` to `'q'` instead of clearing it (e.g., setting it to `''`).
sets the show feedback flag in the vue data to false.	❌	Line 32 in `app.js` sets `this.showFeedback` to `true` instead of `false`.

braughtg · 2026-08-25T22:01:35Z

@copilot review this pull request.

Copilot · 2026-08-25T22:03:22Z

@copilot review this pull request.

Project Structure

Requirement	Status	Evidence
There is a directory named `flashword` within the `web-projects` directory.	✅	The directory `web-projects/flashword` exists.
The `flashword` directory contains the files `index.html` and `app.js`.	✅	Both `index.html` and `app.js` are present inside `web-projects/flashword`.
`index.html` loads vue.global.js from https://unpkg.com/vue@3/dist/vue.global.js.	✅	Line 7 of `index.html` loads Vue from the specified URL: `<script src="https://unpkg.com/vue@3/dist/vue.global.js" defer></script>`.
`index.html` loads `app.js` in a `<script>` tag.	✅	Line 8 of `index.html` loads `app.js` using `<script src="app.js" defer></script>`.
`app.js` disables an eslint rule with the line `// eslint-disable-next-line no-unused-vars, no-undef`	✅	Line 37 of `app.js` contains the exact line: `// eslint-disable-next-line no-unused-vars, no-undef`.

Workflow

Requirement	Status	Evidence
The pull request contains at least three commits.	✅	The pull request contains 37 commits (which is at least 3 commits).
The commit messages briefly describe the changes made in the commit.	✅	The commit messages briefly describe the changes made (e.g. "require new review if there were new commits", "adds mistakes again").

`index.html` Functionality

Requirement	Status	Evidence
data binding is used to display a word to be translated from the vue data.	✅	Line 39 in `index.html` dynamically displays the Spanish word `wordA` using interpolation: `{{ wordA }}`.
a text input is used to allow the user to enter a translation for the word.	✅	Line 41 of `index.html` uses an `<input type="text" v-model="answer" />` tag.
data binding is used to display the user's translation as it is typed.	✅	Line 43 of `index.html` displays the translation dynamically as it is typed: `<p v-if="answer != ''">You answered: {{ answer }}</p>`.
the value of the text input is bound to a vue data property.	✅	Line 41 of `index.html` binds the text input to the `answer` Vue data property via `v-model="answer"`.
a "Check Answer" button uses an `on-click` directive to call a vue method that checks the translation.	✅	Line 45 of `index.html` uses `<button v-on:click="checkAnswer()">Check answer</button>` which invokes the `checkAnswer` method when clicked.
a `v-if` directive is used to display a feedback message after the "Check Answer" button is clicked.	✅	Line 47 of `index.html` uses `v-if="showFeedback"` on a `<template>` tag to display the feedback section.
`v-if` and `v-else` directives are used to display correct or incorrect feedback messages.	✅	Lines 48 and 49 of `index.html` use `v-if="correct"` and `v-else` respectively to toggle between correct/incorrect feedback messages: `<p v-if="correct" class="correct">You got it!</p>` and `<p v-else class="incorrect">Sorry, please try again.</p>`.
a "Reset" button uses an `on-click` directive to call a vue method that resets the input and feedback message.	✅	Line 50 of `index.html` uses a Reset button: `<button v-on:click="reset()">Reset</button>` which calls the `reset()` method.
the `div` with the id `app` has the `v-cloak` directive.	✅	Line 38 of `index.html` contains `<div id="app" v-cloak>`.

The `checkAnswer` method

Requirement	Status	Evidence
sets the correct flag in the vue data to true if the answer is correct, otherwise sets it to false.	✅	Line 27 in `app.js` sets `this.correct = this.wordB == this.answer` to evaluate if the input matches the translation.
sets the show feedback flag in the vue data to true.	✅	Line 28 in `app.js` sets `this.showFeedback = true`.

The `reset` method`

Requirement	Status	Evidence
clears the user's answer in the vue data.	✅	Line 31 in `app.js` sets `this.answer = ''`.
sets the show feedback flag in the vue data to false.	✅	Line 32 in `app.js` sets `this.showFeedback = false`.

braughtg · 2026-08-25T22:07:03Z

@copilot review this pull request.

Copilot · 2026-08-25T22:08:34Z

@copilot review this pull request.

Project Structure

Requirement	Status	Evidence
There is a directory named `flashword` within the `web-projects` directory.	✅	The directory `web-projects/flashword` exists.
The `flashword` directory contains the files `index.html` and `app.js`.	✅	Both `index.html` and `app.js` are present in `web-projects/flashword`.
`index.html` loads vue.global.js from https://unpkg.com/vue@3/dist/vue.global.js.	✅	Line 7 of `index.html` is `<script src="https://unpkg.com/vue@3/dist/vue.global.js" defer></script>`.
`index.html` loads `app.js` in a `<script>` tag.	✅	Line 8 of `index.html` is `<script src="app.js" defer></script>`.
`app.js` disables an eslint rule with the line `// eslint-disable-next-line no-unused-vars, no-undef`	✅	Line 37 of `app.js` contains the required ESLint disable comment.

Workflow

Requirement	Status	Evidence
The pull request contains at least three commits.	✅	The pull request contains 38 commits (which is at least 3 commits).
The commit messages briefly describe the changes made in the commit.	✅	The commit messages briefly describe the changes made (e.g. "add mistakes for testing", "Merge branch 'main' into t02-vue1").

`index.html` Functionality

Requirement	Status	Evidence
data binding is used to display a word to be translated from the vue data.	✅	Line 39 in `index.html` displays the Spanish word dynamically using dynamic interpolation: `{{ wordA }}`.
a text input is used to allow the user to enter a translation for the word.	✅	Line 41 of `index.html` uses an `<input type="text" v-model="answer" />` tag.
data binding is used to display the user's translation as it is typed.	❌	Line 43 uses `v-if="answer == ''"` which hides the paragraph when the user has typed an answer: `<p v-if="answer == ''">You answered: {{ answer }}</p>`.
the value of the text input is bound to a vue data property.	✅	Line 41 of `index.html` binds the text input to the `answer` Vue data property via `v-model="answer"`.
a "Check Answer" button uses an `on-click` directive to call a vue method that checks the translation.	✅	Line 45 of `index.html` uses a `<button v-on:click="checkAnswer()">` to invoke the `checkAnswer` method when clicked.
a `v-if` directive is used to display a feedback message after the "Check Answer" button is clicked.	✅	Line 47 of `index.html` uses `v-if="showFeedback"` to display the feedback section.
`v-if` and `v-else` directives are used to display correct or incorrect feedback messages.	❌	There is no `v-else` block to display incorrect feedback messages. Line 48 only displays a success message using `v-if="correct"`: `<p v-if="correct" class="correct">You got it!</p>`.
a "Reset" button uses an `on-click` directive to call a vue method that resets the input and feedback message.	❌	Line 50 has `<button v-on:click="resetting()">Reset</button>` which invokes `resetting()` instead of `reset()`.
the `div` with the id `app` has the `v-cloak` directive.	✅	Line 38 of `index.html` has `<div id="app" v-cloak>`.

The `checkAnswer` method

Requirement	Status	Evidence
sets the correct flag in the vue data to true if the answer is correct, otherwise sets it to false.	❌	Line 27 in `app.js` is `this.correct = this.wordB !== this.answer;` which sets `correct` to `true` when the answer is incorrect, and `false` when it is correct (inverted logic).
sets the show feedback flag in the vue data to true.	✅	Line 28 in `app.js` sets `this.showFeedback = true;`.

The `reset` method`

Requirement	Status	Evidence
clears the user's answer in the vue data.	❌	Line 31 of `app.js` sets `this.answer = null;` which does not clear it to an empty string (`''`).
sets the show feedback flag in the vue data to false.	✅	Line 32 in `app.js` sets `this.showFeedback = false;`.

braughtg · 2026-08-25T22:12:21Z

@copilot review this pull request.

Copilot · 2026-08-25T22:13:45Z

@copilot review this pull request.

Project Structure

Requirement	Status	Evidence
There is a directory named `flashword` within the `web-projects` directory.	✅	The directory `web-projects/flashword` exists.
The `flashword` directory contains the files `index.html` and `app.js`.	✅	Both `index.html` and `app.js` are present inside `web-projects/flashword`.
`index.html` loads vue.global.js from https://unpkg.com/vue@3/dist/vue.global.js.	✅	Line 7 of `index.html` loads Vue from the specified URL: `<script src="https://unpkg.com/vue@3/dist/vue.global.js" defer></script>`.
`index.html` loads `app.js` in a `<script>` tag.	✅	Line 8 of `index.html` loads `app.js` using `<script src="app.js" defer></script>`.
`app.js` disables an eslint rule with the line `// eslint-disable-next-line no-unused-vars, no-undef`	✅	Line 37 of `app.js` contains the exact line: `// eslint-disable-next-line no-unused-vars, no-undef`.

Workflow

Requirement	Status	Evidence
The pull request contains at least three commits.	✅	The pull request contains 38 commits (which is at least 3 commits).
The commit messages briefly describe the changes made in the commit.	✅	The commit messages briefly describe the changes made (e.g. "require new review if there were new commits").

`index.html` Functionality

Requirement	Status	Evidence
data binding is used to display a word to be translated from the vue data.	✅	Line 39 in `index.html` dynamically displays the Spanish word `wordA` using interpolation: `{{ wordA }}`.
a text input is used to allow the user to enter a translation for the word.	✅	Line 41 of `index.html` uses an `<input type="text" v-model="answer" />` tag.
data binding is used to display the user's translation as it is typed.	✅	Line 43 of `index.html` displays the translation dynamically as it is typed: `<p v-if="answer != ''">You answered: {{ answer }}</p>`.
the value of the text input is bound to a vue data property.	✅	Line 41 of `index.html` binds the text input to the `answer` Vue data property via `v-model="answer"`.
a "Check Answer" button uses an `on-click` directive to call a vue method that checks the translation.	✅	Line 45 of `index.html` uses `<button v-on:click="checkAnswer()">Check answer</button>` which invokes the `checkAnswer` method when clicked.
a `v-if` directive is used to display a feedback message after the "Check Answer" button is clicked.	✅	Line 47 of `index.html` uses `v-if="showFeedback"` on a `<template>` tag to display the feedback section.
`v-if` and `v-else` directives are used to display correct or incorrect feedback messages.	✅	Lines 48 and 49 of `index.html` use `v-if="correct"` and `v-else` respectively to toggle between correct/incorrect feedback messages: `<p v-if="correct" class="correct">You got it!</p>` and `<p v-else class="incorrect">Sorry, please try again.</p>`.
a "Reset" button uses an `on-click` directive to call a vue method that resets the input and feedback message.	✅	Line 50 of `index.html` uses a Reset button: `<button v-on:click="reset()">Reset</button>` which calls the `reset()` method.
the `div` with the id `app` has the `v-cloak` directive.	✅	Line 38 of `index.html` contains `<div id="app" v-cloak>`.

The `checkAnswer` method

Requirement	Status	Evidence
sets the correct flag in the vue data to true if the answer is correct, otherwise sets it to false.	✅	Line 27 in `app.js` sets `this.correct = this.wordB == this.answer` to evaluate if the input matches the translation.
sets the show feedback flag in the vue data to true.	✅	Line 28 in `app.js` sets `this.showFeedback = true`.

The `reset` method`

Requirement	Status	Evidence
clears the user's answer in the vue data.	✅	Line 31 in `app.js` sets `this.answer = ''`.
sets the show feedback flag in the vue data to false.	✅	Line 32 in `app.js` sets `this.showFeedback = false`.

braughtg · 2026-08-26T01:18:07Z

Used for testing.

braughtg added 30 commits June 29, 2026 18:43

Starting tutorial 01

d62e16f

adds FarmData2 logo

b31b371

adds title and paragraph

85654a8

adds unordered list of features

410970f

adds a link to the FarmData2 repo on GitHub

45582d5

adds missing heading and changes title

48b8928

adds css style sheet to index.html

57e6e67

added a different font to the page

3719341

adds background color and styles body

c54f1fb

styles the heading

8d7bf79

centers the FarmData2 logo

e83b2a5

Merge branch 'main' into tutorial-01-html-css

bc7e506

Merge branch 'main' into tutorial-01-html-css

dbdcba1

adds script/main.js and links in index.html

0008572

adds the image changer

cf30a8e

adds the custom greeting

2cdda2f

fixes null username issue

71bca3e

Merge branch 'main' into t01-html-css-js

226cafa

adds flashword directory and starter code

3a48c82

fixes broken cdn link

e07b31b

add answer input field

8b84a40

adds answer checking

8bf3d63

refactors feedback into a div

bca1ec9

factors out checkAnswer method

7974445

adds cloaking to remove raw code flash

1b6b6a4

adds the reset button

06c65af

uses template element in place of div

632d18e

adds array of words examples to data

41cdee8

adds examples of the use of v-for

e8f5de0

removes v-for examples

0cbc6f3

Copilot stopped work on behalf of braughtg due to an error August 25, 2026 20:19
The session was cancelled by the user.

Copilot started work on behalf of braughtg August 25, 2026 20:20 View session

Copilot stopped work on behalf of braughtg due to an error August 25, 2026 20:22
The session was cancelled by the user.

Merge branch 'main' into t02-vue1

030fe58

Copilot started work on behalf of braughtg August 25, 2026 20:30 View session

Copilot stopped work on behalf of braughtg due to an error August 25, 2026 20:32
The session was cancelled by the user.

braughtg force-pushed the t02-vue1 branch from 8dfdb23 to 030fe58 Compare August 25, 2026 20:32

Copilot started work on behalf of braughtg August 25, 2026 20:37 View session

Copilot finished work on behalf of braughtg August 25, 2026 20:38

Merge branch 'main' into t02-vue1

6683315

Copilot started work on behalf of braughtg August 25, 2026 22:02 View session

Copilot finished work on behalf of braughtg August 25, 2026 22:04

Copilot started work on behalf of braughtg August 25, 2026 22:07 View session

Copilot finished work on behalf of braughtg August 25, 2026 22:09

braughtg force-pushed the t02-vue1 branch from e8dfd48 to 6683315 Compare August 25, 2026 22:11

Copilot started work on behalf of braughtg August 25, 2026 22:12 View session

Copilot finished work on behalf of braughtg August 25, 2026 22:14

Merge branch 'main' into t02-vue1

432bfd5

braughtg closed this Aug 26, 2026

Navigation Menu

Uh oh!

T02 vue1 - #54

T02 vue1#54
braughtg wants to merge 38 commits into
mainfrom
t02-vue1

braughtg commented Aug 25, 2026 •

edited by github-actions Bot

Loading

Uh oh!

braughtg commented Aug 25, 2026

Uh oh!

braughtg commented Aug 25, 2026

Uh oh!

braughtg commented Aug 25, 2026

Uh oh!

Copilot AI commented Aug 25, 2026

Uh oh!

braughtg commented Aug 25, 2026

Uh oh!

Copilot AI commented Aug 25, 2026

Uh oh!

braughtg commented Aug 25, 2026

Uh oh!

Copilot AI commented Aug 25, 2026

Uh oh!

braughtg commented Aug 25, 2026

Uh oh!

Copilot AI commented Aug 25, 2026

Uh oh!

braughtg commented Aug 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

braughtg commented Aug 25, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Type of Work

Topic

Time Estimate

Additional Information

Uh oh!

braughtg commented Aug 25, 2026

Uh oh!

braughtg commented Aug 25, 2026

Uh oh!

braughtg commented Aug 25, 2026

Uh oh!

Copilot AI commented Aug 25, 2026

Project Structure

Workflow

index.html Functionality

The checkAnswer method

The reset method`

Uh oh!

braughtg commented Aug 25, 2026

Uh oh!

Copilot AI commented Aug 25, 2026

Project Structure

Workflow

index.html Functionality

The checkAnswer method

The reset method`

Uh oh!

braughtg commented Aug 25, 2026

Uh oh!

Copilot AI commented Aug 25, 2026

Project Structure

Workflow

index.html Functionality

The checkAnswer method

The reset method`

Uh oh!

braughtg commented Aug 25, 2026

Uh oh!

Copilot AI commented Aug 25, 2026

Project Structure

Workflow

index.html Functionality

The checkAnswer method

The reset method`

Uh oh!

braughtg commented Aug 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

braughtg commented Aug 25, 2026 •

edited by github-actions Bot

Loading

`index.html` Functionality

The `checkAnswer` method

The `reset` method`

`index.html` Functionality

The `checkAnswer` method

The `reset` method`

`index.html` Functionality

The `checkAnswer` method

The `reset` method`

`index.html` Functionality

The `checkAnswer` method

The `reset` method`