50% off all plans with SPRING50
UI Logic
regular Card 1 of 11

UI Logic

User story

As a user, I want to see a visually appealing UI that includes a gradient background, a centered circle with an image, and the song title and author below it.

Acceptance criteria

  • Display a random gradient background per song that covers the full width and around 25% of the height.
  • Show a circle in the center with a white outline.
  • Inside the circle, display a random image from an external source like Unsplash per song.
  • Display the song title and author below the circle.
  • Use a predefined set of songs for learning purposes, e.g., from Pixabay.
  • Store song properties in an array of objects.
  • Keep track of the active song index.

Build this task card

Start your 7-day free trial to build this card in our code editor with Figma designs and live preview.

Start 7-Day Free Trial to Build This Card

Other cards in Music Player