T03 vue2

[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.

[github-actions]

Thank you for your pull request.

Note that all new pull requests to the Vue3-WebDev-Kit are opened as draft pull requests.

Submitting Your Work

When you believe your work on the assignment is complete mark your pull request as ready for review to turn it in.

Getting Help

If you have questions as you work you can get in touch via:

• comments on this pull request.
• comments on the associated issue(s).
• any other course communication channel(s).

[braughtg]

@copilot review this pull request

[Copilot]

@copilot review this pull request

Workflow

Requirement	Status	Evidence
The pull request contains at least three commits.	✅	The pull request contains 47 commits.
Commit messages briefly describe the changes made.	✅	The commit messages describe the associated changes, such as adding bindings, inputs, computed properties, and watchers.

Event Handling

Requirement	Status	Evidence
The text input uses v-on for Enter-keyup and calls the answer-checking method.	✅	web-projects/flashword/index.html uses v-on:keyup.enter="checkAnswer()".

Attribute Binding

Requirement	Status	Evidence
The img element binds src and alt with v-bind.	✅	The image uses v-bind:src and v-bind:alt.
checkAnswer changes the bound image and alt-text data properties for correct and incorrect answers.	✅	web-projects/flashword/app.js sets image and imageAlt in both branches.
The text input binds its style to an object literal setting the background color.	✅	The input uses v-bind:style="{'background-color' : inputBackgroundColor}".

Form Input Binding

Requirement	Status	Evidence
Three radio inputs use v-model with the same data property.	✅	All three difficulty radios use v-model="level".
The difficulty select uses v-model.	✅	The select uses v-model="level".
The sentence textarea uses v-model.	✅	The textarea uses v-model="sentence".

Computed Properties and Watchers

Requirement	Status	Evidence
The page contains first- and last-name text inputs.	✅	The page includes inputs bound to firstName and lastName.
A computed property returns the concatenated full name.	✅	fullName() concatenates firstName and lastName.
A watcher on the first name updates the full-name data property.	✅	The firstName watcher updates firstNameAndLastName.
A watcher on the last name updates the full-name data property.	✅	The lastName watcher updates firstNameAndLastName.
A computed property returns Spanish words with three or fewer characters.	✅	shortSpanishWords() filters with word.length <= 3.

[braughtg]

used for testing.