Skip to content

cromerc/polish-your-app-1

Repository files navigation

difficulty training chapter tags
1
true
Chapter 1: Vue.js Essentials
vue

Polish your App

Challenge Description

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

Requirements

  • 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

Other Considerations

  • 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)

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.

Finished app in this challenge

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published