MLS - Music Lyrics Service

Who doesn't love music? You are not just entirely free to explore for any lyrics here, but you can additionally search for an official music video while singing along with your favourite artists.

Project Requirements:

✅ Use at least two APIs

✅ Use AJAX to pull data

✅ Use at least one new library or technology that haven't been learned

✅ Create a polished front end/UI

✅ Meet good quality coding standards (indentation, scoping, naming, etc)

✅ Do NOT use alerts, confirms, or prompts

✅ Incorporate some sor of repeating element (table, column, etc)

✅ Use Bootstrap or an alternative CSS framework

✅ Deploy site to Github Pages

✅ Include user input validation

📂 Files

MLS
├─ .git
├─ assets
│ ├─ css
│ │ ├─ front.css
│ │ ├─ glitch-effect.css
│ │ ├─ jquery.fancybox.min.css
│ │ ├─ main.css
│ │ └─ search-result.css
│ ├─ images
│ │ └─ background-home.jpg
│ ├─ javascript
│ │ ├─ artyom.js
│ │ ├─ artyom.window.js
│ │ ├─ artyom.window.min.js
│ │ ├─ index.js
│ │ ├─ jquery.fancybox.min.js
│ │ ├─ kendell.js
│ │ ├─ lyrics.js
│ │ └─ main.js
│ └─ screenshots
│ ├─ img-0.png
│ ├─ img-1.png
│ └─ img-2.png
├─ index.html
├─ lyrics.html
├─ main.html
└─ README.md

Technologies

Bootstrap
Google Fonts
Fontawesome
Fancybox
JavaScript
- jQuery
- Momentjs
- AJAX
APIs
- Youtube
- Apiseeds

Install

To clone this project to your device, type the code below to your git bash:

git clone https://github.com/itshally/MLS.git

Then, type the code to run the project:

cd MLS
start index.html

Usage

I'm deploying it with Github Pages. Here is a guide for deploying it to Github Pages if ever you encountered some problems: :point_right: How to effortlessly create a website for free with GitHub Pages (...)

Screenshots

This is the view once the app starts running

For the Music Videos link, this is what it looks like after the user searched for an artist

Lastly for the Lyrics link, this is what it looks like after the user searched for an artist and its song.

Demo

Click this live preview to see this page.

Authors / Team Members