Code Monkey home page Code Monkey logo

lyrics-it's Introduction

Instruction

You need to create a Lyrics app to show song lyrics.

Features

  • User should be able to search songs based on artist name or song title words.
  • On Search button click event, show list of matched songs based on user input.
  • Support Pagination functionality. User should be able to go to next page and previous page.
  • On Show Lyrics button click event, show that song's lyrics.

Lyrics API Document

https://lyricsovh.docs.apiary.io/#

Endpoint to get song suggestions is not mentioned in API doc. mentioning it here. https://api.lyrics.ovh/suggest/inputQuery

inputQuery is path parameter. Replace inputQuery with actual word(ex. stairway)

Additional feature

  • You will get more points for writing test cases

Restrictions

  • You need to use pure HTML, CSS, and JavaScript to build this application.
  • No other frameworks/libraries(ex. React, Angular, SCSS, etc) is allowed.
  • Development libraries and dependencies are allowed and recommended For example:
    • Jest + helpers(for testing purpose)
    • ESLint + Airbnb (for linting purpose)
  • Do not remove or rename existing files and folder. you can add new files and folder though.

Commands

  • Run npm run develop to run app locally

lyrics-it's People

Contributors

mdaz78 avatar arfatsalman avatar

Watchers

James Cloos avatar  avatar

lyrics-it's Issues

Implement Dark Mode

Implement the functionality to toggle between dark mode and light mode

  • Implement dark mode
  • Implement light mode
  • Add method to toggle between dark and light mode

Implement functionality to search for songs

Implement method to search for songs.

  • Search for a song
  • Show a list of suggestions in card format
  • Design the song card
  • Show lyrics of a song when a song card is clicked
  • Implement pagination of suggested songs

Add Favourites feature

  • User should be able to add a song to favorites
  • User should be able to remove a song to favorites
  • Show a list of favorite songs when the favorites link in the header is clicked
  • Show if a song is added to favorites when showing suggestions of searched songs
  • Show a song is added to favorites when viewing the lyrics page

Design Header

Design the header

  • Mobile Layout
  • Laptop, Desktop and large screen layout

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.