From 734dbadeb4c4517a7673b1970b071c5e98d33f9a Mon Sep 17 00:00:00 2001 From: esteerlino Date: Fri, 26 Jan 2024 18:27:02 -0300 Subject: [PATCH] =?UTF-8?q?inclus=C3=A3o=20do=20js=20para=20buscar=20artis?= =?UTF-8?q?tas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api-artists/artists.json | 46 ++++++++++++++++++++++++++++++++++++ index.html | 2 ++ script.js | 34 ++++++++++++++++++++++++++ src/styles/main-content.css | 32 ++++++++++++------------- src/styles/media-queries.css | 8 +++---- 5 files changed, 102 insertions(+), 20 deletions(-) create mode 100644 api-artists/artists.json diff --git a/api-artists/artists.json b/api-artists/artists.json new file mode 100644 index 0000000..65c6280 --- /dev/null +++ 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 index 20be4bc..4da4bcc 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + Navegar por todas as seções + diff --git a/script.js b/script.js index e69de29..0a06012 100644 --- 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); +}) \ No newline at end of file diff --git a/src/styles/main-content.css b/src/styles/main-content.css index 4cdd63a..ae5285e 100644 --- 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 index af38ae5..4b2a8fa 100644 --- 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; - } - } \ No newline at end of file + .offer__list-item { + grid-template-columns: 1fr 1fr; + } +}