Resilient-Labs · ishelvirakeira · Oct 7, 2025 · Oct 7, 2025 · Oct 28, 2025
diff --git 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/
+
+<img width="649" height="432" alt="music" src="https://github.com/user-attachments/assets/1cd14b8e-6c42-4382-b912-1434041c6ad9" />
+
+
+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
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang = "en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Find Lyrics</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+
+        <h1>Find The Lyrics Of Your Favorite Song.</h1>
+        <input id = "text" type="text" name="text" placeholder="Enter the artist name">
+        <input id= "text1" type="text" name = text placeholder="Enter the song title">
+
+        <button type="button" name="button">Get Song</button>
+        <h2>Artist:</h2>
+        <p class="artist"></p>
+
+        <h3>Song Title:</h3>
+        <p class="song"></p>
+
+        <h3>Lyrics:</h3>
+        <p class="lyrics"></p>
+
+        <script type="text/javascript" src="main.js"></script>
+
+    </body>
+
+</html>
diff --git a/main.js 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
@@ -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;
+  }
+}