/improve-the-rating-ux-1

Primary LanguageVue

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

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.

Finished app in this challenge