Origin trial controlled feature not enabled: 'interest-cohort'.

• fix the movie switching when some movie was deleted

Challenge Description
In this challenge, let’s continue development on the Movie Rating App. Instead of the rating stars being for display purposes only, let’s transform them into clickable buttons that allow end users to provide their own rating.

Requirements
Remove the display-only stars that we coded in the last challenge
Create buttons for each rating from 1 to 5 and display a star inside.
Color the stars based on the movie rating. For example, if the movie rating is 3, color 3 stars yellow and 2 gray.
Allow the end user to click on any of the 5 buttons to update the movie rating accordingly.
Disable the button for the currently selected rating to prevent the user from giving the same rating twice.
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.

Example

Form Focus

Challenge Description

In this challenge, let's focus the first field in our form (the name field) when it's added to the DOM and shown in the model overlay

💡 HINT: You could do this with the autofocus attribute but use a template ref instead so you can practice this valuable Vue.js concept!

Requirements

• When the modal component opens, the name field on the movie form should be focused for the user to start filling the form
• Use a template ref in the MovieForm component to focus the input when the component mounts to the DOM

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

• Modal title doesn't change after closing modal in editing mode
• Popup top position doesn't recalculates
• Popup activator border doesn't recoloring when open edit modal

Bug Found

Challenge Description

In this challenge, we will do something a little bit different. Some sneaky bugs have made their way into the code. It's up to you to squash them!

Requirements

• Updating a movie's rating no longer works. Fix it.
• Updating 1 movie's data, updates all of them. Fix it.
• Deleting a movie no longer works. Fix 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)

Reusable Modal Component

Challenge Description

In this challenge, let's create a re-usable AppModal component and use it to display the movie form.
Later on we'll improve this component to keep up with it's own display state .

Requirements

• Move the current template for the modal into the AppModal.vue component and modify it for general re-use.
• The AppModal.vue component should meet the following specs:
  • Include a slot for the body content
  • Display a close (x) button
  • Display a title above the body content
  • Receive the following props:
    • title: a string for the title, defaults to null.
  • Emit the following events:
    • close: emitted when component is closed
• Use the AppModal.vue component to display the MovieForm in App.vue
• Import the AppModal.vue and MovieForm.vue component asynchronously so that the components' code is only downloaded once it's displayed
• The rest of the app should continue to work as before

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

Extract Components

Challenge Description

So far, so good. 💪 In this challenge, let's extract some parts of our app into components.
This is good for keeping the code clean and organized code and allows us to abstract logic for reuse.

What we will do in this coding challenge:

• Create a movie component.
• Move the template for a movie into the MovieItem.vue component.
• Listen to custom events from that component.

Requirements

• Move the current template for a movie into the MovieItem.vue component.
• Replace the current part of our template where the movie is displayed, for a MovieItem.vue component
• Move the notRated value into the MovieItem.vue component, create a computed property out of it.
• The MovieItem.vue component should have the following props:
  • movie: It should receive the movie object.
• Create 3 custom events in the MovieItem.vue component.
  • edit: Should be dispatched when the user clicks the edit button with the id as parameter
  • remove: Should be dispatched when the user clicks the remove button with the id as parameter
  • update:rating: Should be dispatched when the user updates the rating with the id and the new rating as parameter
• Change the behavior of the updateRating to accept the movie id instead of the movieIndex
• Change the behavior of the removeMovie to accept the movie id instead of the movieIndex
• Change the behavior of the editMovie to accept the movie id instead of the movieIndex

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

Modal Transitions

Challenge Description

In this challenge, let's make our app look a little nicer by adding some transitions to the modal component.

💡 HINT: We've updated the modal overlay component so that it takes in a show prop instead of using v-if to show/hide it.

Requirements

• When the modal component appears and disappears it should be done with a smooth transition.
• We want to have two different transitions
  1. the modal overlay (the dark background) should fade in
  2. the modal itself should slide in (fade in + slide down 50px)

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

Dedicated Movie Pages

Challenge Description

In this challenge, let's use Vue Router to display the current app on the homepage but also allow linking to info about an individual movie.

💡 HINT: We've already installed Vue Router in the boilerplate code

Requirements

• Setup Vue Router in main.js with routes for:
  • the homepage (/)
  • and an individual movie (/:id)

💡 HINT: We've provided boilerplate code for each page in the /src/pages directory

• Modify App.vue so that it displays the proper component from the pages directory based on the current route
• Add a link on each movie item on the home page to go to the movie's detail page
• Display the info for the proper movie on the movie's detail page based on the id from the URL

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.

Improve the Rating UX

Challenge Description

In this challenge, let’s present each movie’s ratings prominently with a big star and the rating number in the top right hand corner of the movie poster.

Requirements

• Display each movie rating number within a large yellow StarIcon in the top right hand corner of the movie posters
• For movies with no rating, show a dash instead of the number and color the StarIcon gray

💡 HINT: You can use the tailwind classes text-yellow-500 and text-gray-500 to help color the star

💡 HINT: You can give the movie rating a null value in movies.json to test the proper display of a movie with no rating

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.

Challenge Description

Your task is to create a New Years countdown app. It should meet the following requirements.

Requirements

• Use the CountdownSegment component to display days, hours, minutes, and seconds until 00:00:00 of January 1st next year
• Each number should update approriately every second
• You should transition the minutes, seconds, etc as they tick by
• The CountdownSegment component must accept a number prop and use it to display how many x is left (x being days, minutes, etc)

Example of finished App

This is an example of what the functionality should look like for the completed exercise.

Polish your App

Challenge Description

In this challenge, let's polish 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 allowing users to remove it from the list.
• Calculate and display the average 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, replace the old movie values with the new
  • Ensure that the ratings of that movie are not lost when you edit it

Checklist

• A button for deleting a movie is present on each movie.
• When you click the delete button, that movie is removed from the list.
• A button for editing a movie is present on each movie.
• When you click the edit button, that form shows up.
• The form is prefilled with the movie data.
• The form submit buttons text is Save when you edit.
• The form validates the correct data.
• The form is cleared out and hidden after saving a valid movie.
• Is the movie is updated on the list once the form is submitted and valid.
• Clicking the cancel button hides the form.
• Clicking the cancel button clears the form.
• Clicking the cancel button clears all errors.
• Clicking the cancel button does not update the movie.
• An average rate of the movies is shown on screen.
• The total amount of the movies is shown on screen.
• There is a button present to clear out all the ratings.
• Pressing that button removes the rate of each movie.

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

Code a Create Movie Form

Challenge Description

In this challenge, let's give users the ability to add new movies in the Movie Rating App.

Requirements

• 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

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