inclusão do js para buscar artistas

esteerlino · Jan 26, 2024 · 734dbad · 734dbad
1 parent 07a36a8
commit 734dbad
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 20 deletions.
diff --git a/api-artists/artists.json b/api-artists/artists.json
@@ -0,0 +1,46 @@
+{
+  "artists": [
+    {
+      "id": 1,
+      "name": "Foo Fighters",
+      "genre": "Rock",
+      "urlImg": "https://i.scdn.co/image/ab67616100005174c884df599abc793c116cdf15"
+    },
+    {
+      "id": 2,
+      "name": "Michael Jackson",
+      "genre": "Pop",
+      "urlImg": "https://i.scdn.co/image/ab676161000051740e08ea2c4d6789fbf5cbe0aa"
+    },
+    {
+      "id": 3,
+      "name": "Emicida",
+      "genre": "Hip Hop",
+      "urlImg": "https://i.scdn.co/image/ab67616100005174908b4b4bc90e1518b68b4068"
+    },
+    {
+      "id": 4,
+      "name": "Chitãozinho e Xororó",
+      "genre": "Sertanejo",
+      "urlImg": "https://i.scdn.co/image/ab676161000051744606c59411c57f7b49588be4"
+    },
+    {
+      "id": 5,
+      "name": "Mc Coringa",
+      "genre": "Funk",
+      "urlImg": "https://i.scdn.co/image/ab67616d00001e02fe8f6dd361ad0f12b88c7f56"
+    },
+    {
+      "id": 6,
+      "name": "Arlindo Cruz",
+      "genre": "Samba",
+      "urlImg": "https://i.scdn.co/image/ab67616100005174181873f93056642d7b340839"
+    },
+    {
+      "id": 7,
+      "name": "Caetano Veloso",
+      "genre": "MPB",
+      "urlImg": "https://i.scdn.co/image/ab67616100005174e98de50f36cf1aa4bf047757"
+    }
+  ]
+}
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="./src/styles/vars.css" />
     <link rel="stylesheet" href="./src/styles/sidebar-footer.css" />
     <link rel="stylesheet" href="./src/styles/main-content.css" />
+    <link rel="stylesheet" href="./src/styles/media-queries.css"/>
 
     <link
       rel="stylesheet"
@@ -265,6 +266,7 @@ <h2 class="session">Navegar por todas as seções</h2>
         <button type="button">Inscreva-se grátis</button>
       </div>
     </footer>
+    <!--O javascript vem no final antes de fechar o body para garantir performance.-->
     <script src="script.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,34 @@
+const searchInput = document.getElementById('search-input');
+const resultArtist = document.getElementById("result-artist");
+const resultPlaylist = document.getElementById('result-playlists');
+
+function requestApi(searchTerm) {
+    const url = `http://localhost:3000/artists?name_like=${searchTerm}`
+    fetch(url)
+        .then((response) => response.json())
+        .then((result) => displayResults(result))
+}
+
+function displayResults(result) {
+    resultPlaylist.classList.add("hidden")
+    const artistName = document.getElementById('artist-name');
+    const artistImage = document.getElementById('artist-img');
+
+    result.forEach(element => {
+        artistName.innerText = element.name;
+        artistImage.src = element.urlImg;
+    });
+
+    resultArtist.classList.remove('hidden');
+}
+
+document.addEventListener('input', function () {
+    const searchTerm = searchInput.value.toLowerCase();
+    if (searchTerm === '') {
+        resultPlaylist.classList.add('hidden');
+        resultArtist.classList.remove('hidden');
+        return
+    }
+
+    requestApi(searchTerm);
+})
diff --git a/src/styles/main-content.css b/src/styles/main-content.css
@@ -36,8 +36,8 @@
   justify-content: center;
   width: 32px;
   height: 32px;
-  background: #111025;
-  background-color: #111025;
+  background: #100f29ab;
+  background-color: #100f29ab;
   border-radius: 50%;
   border: none;
   cursor: pointer;
@@ -168,7 +168,7 @@
 }
 
 .card1 {
-  background: linear-gradient(to bottom, rgb(0, 100, 80), #49a861);
+  background: linear-gradient(to top, rgb(233, 20, 41), #49a861);
 }
 .card2 {
   background: linear-gradient(to top, rgb(132, 0, 231), #ab7bb9);
@@ -186,31 +186,31 @@
   background: linear-gradient(to top, rgb(83, 122, 161), #1a0a61);
 }
 .card7 {
-  background: rgb(142, 102, 172);
+  background: linear-gradient(to bottom, rgb(142, 102, 172), #21bfdb);
 }
 .card8 {
-  background: rgb(20, 138, 8);
+  background: linear-gradient(to top, rgb(20, 138, 8), #c7ec42);
 }
 .card9 {
-  background: rgb(30, 50, 100);
+  background: linear-gradient(to bottom, rgb(30, 50, 100), #d8be49);
 }
 .card10 {
-  background: rgb(233, 20, 41);
+  background: linear-gradient(to top, rgb(211, 8, 8), #de55f0);
 }
 .card11 {
-  background: rgb(80, 55, 80);
+  background: linear-gradient(to bottom, rgb(97, 63, 97), #000000);
 }
 .card12 {
-  background: rgb(216, 64, 0);
+  background: linear-gradient(to top, rgb(216, 64, 0), #f0ed55);
 }
 .card13 {
-  background: rgb(186, 93, 7);
+  background: linear-gradient(to bottom, rgb(186, 93, 7), #0d662f);
 }
 .card14 {
-  background: rgb(0, 30, 80);
+  background: linear-gradient(to top, rgb(0, 30, 80), #0d662f);
 }
 .card15 {
-  background: rgb(60, 30, 80);
+  background: linear-gradient(to bottom, rgb(60, 30, 80), #8d918e);
 }
 
 .offer__list-item img {
@@ -240,7 +240,7 @@
 }
 
 .artist-card {
-  background: #181818;
+  background: #100f29ab;
   border-radius: 8px;
   -ms-flex: 1;
   flex: 1;
@@ -252,7 +252,7 @@
 }
 
 .artist-card:hover {
-  background-color: #252525;
+  background-color: #2c365a;
 }
 
 .card-img {
@@ -296,7 +296,7 @@
 }
 
 .artist-categorie {
-  color: #6a6a6a;
+  color: #dfdfdf;
   font-weight: 400;
   font-size: 0.875rem;
 }
@@ -310,7 +310,7 @@
   right: 10px;
   top: 120px;
   padding: 18px;
-  background-color: #1db954;
+  background-color: #14a3bd;
   border-radius: 100%;
   font-size: 14px;
   opacity: 0;

diff --git a/src/styles/media-queries.css b/src/styles/media-queries.css
@@ -1,5 +1,5 @@
 @media screen and (max-width: 1015px) {
-    .offer__list-item {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
+  .offer__list-item {
+    grid-template-columns: 1fr 1fr;
+  }
+}