difficulty | training | chapter | tags |
---|---|---|---|
1 |
true |
Chapter 1: Vue.js Essentials |
vue |
In this challenge, let's give users the ability to add new movies in the Movie Rating App.
- Create an "Add Movie" button
- Show a form for creating new movies when the button is clicked
- Include the following fields on the form:
- Name: text input & required
- Description: textarea
- Image: text input
- Genre: dropdown & required & user can select multiple
- Is in theaters: checkbox
- Validate the form on submit
- Once submitted and valid, add the movie to the list
- Clear and hide the form after the movie is added
- Add a cancel button to the form
- Clicking the cancel button should clean up the form, and any error that it might have.
- Clicking the cancel button should hide the form for the user.
๐ก HINT: You can make up any genres you like
๐ก HINT: You can visit imdb.com to find movie descriptions, images, etc for testing your form
- 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.