+
+
+
+
+
+
+
\ 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
From c1c76f4134c63df6d1e05d58648aca68b3071adb Mon Sep 17 00:00:00 2001
From: Elvira Keira Ishimwe <97549159+ishelvirakeira@users.noreply.github.com>
Date: Tue, 7 Oct 2025 03:08:44 -0400
Subject: [PATCH 2/3] Update README.md
---
README.md | 23 +++++++----------------
1 file changed, 7 insertions(+), 16 deletions(-)
diff --git a/README.md b/README.md
index 83ce771..a0a7b5b 100644
--- a/README.md
+++ b/README.md
@@ -2,21 +2,12 @@
### 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:
+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.
-- 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!
+
+
+
+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.
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
From c6d683cf92fbdf204f8daae413d25742f56c32ad Mon Sep 17 00:00:00 2001
From: Elvira Keira Ishimwe <97549159+ishelvirakeira@users.noreply.github.com>
Date: Tue, 28 Oct 2025 13:19:41 -0400
Subject: [PATCH 3/3] README.md
---
README.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/README.md b/README.md
index a0a7b5b..cca883a 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,8 @@
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/
+