A Movie Rating App using Vue.js 3
| difficulty | chapter | training | tags |
|---|---|---|---|
|
1
|
Chapter 1: Vue.js Essentials
|
true
|
vue
|
Create a Movie Rating App
Challenge Description
During the next few challenges, your task will be to create a Movie Rating App using Vue.js 3. In this challenge, we’ll start by rendering a list of movies.
Requirements
- Define the movies as reactive data.
- Use the Vue.js template syntax to display the movie information.
- Render all the movies with a
v-forloop. - Display the name, description, genres, and image of each movie.
- Display the movie rating as stars, with a maximum of 5 stars
Other Considerations
- If you see the
data-testattribute anywhere in the boilerplate don’t remove it. - TailwindCSS is preinstalled with the default config. It might be helpful for you, if you want to have some styles. (Not obligatory)
? The movie list is provided as boilerplate, but feel free to add your favorite one into the list.
? Don’t peek at the solution until you’ve solved the exercise yourself or exhausted your resources. Challenging yourself will best prepare you for the exam
Example of Finished App
This is an example of what the functionality should look like for the completed exercise. If you’d like to mimic this style, feel free to do so, but it is not required.