Class 5, Preparation: Conditional Rendering and Rendering Lists Practice

In the previous class we learned about using props, conditional rendering, and rendering lists. Practice these concepts in preparation for the next class by completing the following exercise in your prep5 repository.

Grading

10 points. Completion credit for meeting the requirements specified.

You must demonstrate that you attempted all parts of the assignment, and you put forth a good faith effort to complete the assignment for full credit. No partial credit is provided for completion-graded assignments.

Source: syllabus

Warning

Professionalism: Professionalism means meeting the client's requirements. Not doing less and not do more. Your submission should meet these requirements and nothing more.

If your submission uses methods not covered in class thus far or implements additional functionality, you will receive 0 points for this preparation exercise.

Part I: Reactive Variables and Conditional Rendering

tip

While Copilot, ChatGPt, Gemini, and Claude can complete this assignment for you, you will need to be able to code Vue.js interactive components on your own for the oral exams without generative AI. You should use the in-class, preparation, and homework exercises to practice coding Vue.js components on your own.

In the SoundButton component, implement the functionality to toggle the sound on and off when the button is clicked. You should use a reactive variable to track whether the sound is currently playing or not. (audio.pause() and audio.play() are the only methods you should use to control the sound.)

After you've implemented the toggle functionality, uncomment the speaker-active.svg and speaker-muted.svg icons in the SoundButton component. Next, use conditional rendering to display the speaker-active.svg icon when the sound is playing and the speaker-muted.svg icon when the sound is muted. Use the v-if directive to conditionally render the appropriate icon based on the state of the reactive variable.

Part II: Rendering Lists

In the App component, create a variable the contains an array of sound objects. Using this variable, render a list of SoundButton components in your app using the v-for directive. Each SoundButton component should receive the appropriate sound object as a prop.

When finished you should have have four sound buttons each with a different sound rendered in your app prototype.

Submission

Stage, commit, and push your changes to your prep5 repository in GitHub.

Then complete the submission form for "prep5".