difficulty | training | chapter | tags |
---|---|---|---|
1 |
true |
Chapter 1: Vue.js Essentials |
vue |
In this challenge, let's poslish up the Movie Rating App with a few more features including:
- The ability to delete movies
- A display of the average rating.
- A display of the total number of movies
- and the ability to edit movies
- Add a button on each movie alowing users to remove it from the list.
- Calculate and display the averate rating with a computed prop
- Add a button to reset all movie ratings to zero.
- Calculate and display the total number of movies in the list
- Add the ability to edit each movie
- Add an edit button to each movie
- Re-use the "Add Movie" form to edit movies
- Pre-fill the form with the data of the movie being edited
- On form submit, replae the old movie values with the new
- Ensure that the ratings of that movie are not lost when you edit it
- If you see the
data-test
attribute 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)
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.