Aula 4 finalizada!!

Commit para a Main da aula 4 da Imersão Front-end da Alura!!

index.html

@@ -95,7 +95,7 @@
 
             <!-- PLAYLIST -->
             <div class="playlist-container">
-                <div id="playlist-result">
+                <div id="result-playlists">
                     <div class="playlist">
                         <h1 class="greeting">Boa Tarde</h1>
                         <h2 class="session">Navegar por todas as seções</h2>
@@ -240,9 +240,9 @@ <h2 class="session">Navegar por todas as seções</h2>
                                 </div>
                             </div>
                             <div class="card-text">
-                                <a title="Foo Fighters" class="vst"  href="">
-                                    <span class="artist-name" id="artist-name"></span>
-                                    <span class="artist-categorie">Artista</span>
+                                <a title="Foo Fighters" class="vst"  href=""></a>
+                                <span class="artist-name" id="artist-name"></span>
+                                <span class="artist-categorie">Artista</span>
                                 </a>
                             </div>
                         </div>
@@ -262,5 +262,7 @@ <h2 class="session">Navegar por todas as seções</h2>
             <button>Inscreva-se de graça </button>
         </div>
     </footer>
+
+    <script type="text/javascript" src="./script.js"></script>
 </body>
 </html>

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);
+})