Useful resources
Below is a list of reading material which can assist you during this challenge. The resources usually include official documentation, useful blog posts, basically anything that can be of a use
Lyrics API
HTML
CSS
jQuery
$AJAX
Remember when music tracks used to have lyrics and we used to search for them? Let's build an interface for that! We will build our own "search engine" dedicated only to lyrics.
In the Lyrics API Challenge we will use jQuery and its $.AJAX method for communicating with the REST API, work on separation of concerns, making our code more clean and animate some UI elements according to the application's state.
What will you build?
General Info
- - The project comes with base files, enabling you to jump straight away to work with the API, without needing to deal with the setup, styling, etc.
- - Choose a way of learning/working that suits you most - whether it's building it all independently or using the base files, if it's coding along the YouTube video or just using it as guidance - there is no one right way to do it
- - Feel free to change up some things if you want to tailor the project to your liking, after all it's yours to play with and to add to your portfolio!
Should you have questions, check out the About Page for more information
Hints
Check the hints below when you feel stuck, it might be covered here! If what you're struggling with isn't covered, try to first go through the links in the useful resources section right above this one and search for an answer there. If no luck there as well - try researching on your own, or check the end result files or the YouTube video.
To create the request that makes a generic search for songs and artists (Step 2 in script.js) you'll need to call the following GET endpoint: https://api.lyrics.ovh/suggest/:query, where :query is the searched value.
To find the artist and song name the user wants to get the lyrics of (when they click on the item list or the button in the item list), work with attaching dataset attributes to the html tag which displays this information and access it through the event of the click.