diff --git a/README.md b/README.md index 83ce771..cca883a 100644 --- a/README.md +++ b/README.md @@ -2,21 +2,14 @@ ### Goal: Use data returned from one api to make a request to another api and display the data returned -### How to submit your code for review: - -- Fork and clone this repo -- Create a new branch called answer -- Checkout answer branch -- Push to your fork -- Issue a pull request -- Your pull request description should contain the following: - - (1 to 5 no 3) I completed the challenge - - (1 to 5 no 3) I feel good about my code - - Anything specific on which you want feedback! - -Example: -``` -I completed the challenge: 5 -I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... -``` +This music/lyrics API project allows a user to enter an artist name and a song title and then display the artist information from the MusicBrainz API and their song lyrics from the Lyrics.ovh API. + +Find the live demo at https://ishelvirakeira.github.io/complex-api2-bootcamp/ + +music + + +Tools used: HTML, CSS, and JavaScript, APIs + +I learned how to read nested data structures such as arrays and objects from APIs and how to style the lyrics section by using overflow-y. + diff --git a/index.html b/index.html new file mode 100644 index 0000000..7ac7b64 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + Find Lyrics + + + + +

Find The Lyrics Of Your Favorite Song.

+ + + + +

Artist:

+

+ +

Song Title:

+

+ +

Lyrics:

+

+ + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..4be7d34 --- /dev/null +++ b/main.js @@ -0,0 +1,31 @@ +//fetch movie info and Wikipedia summary + +document.querySelector('button').addEventListener('click', getSong); +function getSong(){ + const artist = document.querySelector('#text').value; + const song= document.querySelector('#text1').value; + const url= `https://musicbrainz.org/ws/2/artist?query=${encodeURIComponent(artist)}&fmt=json`;//learned the encode part from Karim + //fmt=json converted it from XML into JSON. Ref: https://musicbrainz.org/doc/MusicBrainz_API +//artist info result + fetch(url) + .then(res => res.json()) + .then(data => { + console.log(data); + document.querySelector('.artist').innerText = data.artists[0].name; + //now find lyrics of their song + const url1= `https://api.lyrics.ovh/v1/${encodeURIComponent(artist)}/${encodeURIComponent(song)}`; + fetch(url1) + .then(res=>res.json()) + .then(data1 =>{ + console.log(data1); + document.querySelector('.song').innerText = song; + document.querySelector('.lyrics').innerText = data1.lyrics; + }) + + .catch(err=>{ + console.log(`error ${err}`); + }) + + }) +} + diff --git a/style.css b/style.css new file mode 100644 index 0000000..98b4d93 --- /dev/null +++ b/style.css @@ -0,0 +1,118 @@ + +*{ + box-sizing: border-box; + margin: 0; + padding: 0; +} +body { + background-color: rgb(130, 29, 130); + color: pink; + font-family: Arial, sans-serif; + text-align: center; + padding: 30px; +} + +h1 { + color: rgb(10, 29, 94); + margin-bottom: 20px; +} + +input[type="text"] { + width: 250px; + padding: 10px; + margin: 10px; + border: 1px solid black; + border-radius: 5px; + font-size: 16px; +} + +button { + background-color: rgb(10, 29, 94); + color: white; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + margin-bottom: 40px; +} + +button:hover { + background-color: rgb(66, 66, 156); +} + +.artist { + font-weight: 600; + color: white; + font-size: 20px; + margin-top: 20px; + +} + +h3{ + margin-top: 20px; +} + +.song { + font-style: italic; + font-weight: 600; + color: white; + margin-top: 10px; + font-size: 18px; +} + +.lyrics { + background-color: rgb(217, 191, 195); + border: 1px solid lightgrey; + border-radius: 8px; + padding: 15px; + width: 60%; + margin: 20px auto; + text-align: center; + line-height: 1.5; + color: rgb(74, 69, 69); + overflow-y: auto; /*ref: https://stackoverflow.com/questions/73737639/element-with-auto-height-overflowing-with-overflow-y-scroll*/ + max-height: 50vh; +} + + +/* Responsiveness */ +/* For tablets (768px) */ +@media screen and (max-width: 768px) { + input[type="text"] { + width: 80%; + font-size: 15px; + } + + button { + width: 70%; + font-size: 15px; + } + + .lyrics { + width: 90%; + font-size: 15px; + } +} + +/* For phones (480px) */ +@media screen and (max-width: 480px) { + h1 { + font-size: 20px; + } + + input[type="text"] { + width: 90%; + font-size: 14px; + } + + button { + width: 85%; + font-size: 14px; + padding: 8px 15px; + } + + .lyrics { + width: 95%; + font-size: 14px; + } +} \ No newline at end of file