From d230d9857a4b02c3832d91c4f3288660e290898a Mon Sep 17 00:00:00 2001 From: Julio-Telles Date: Tue, 23 Jan 2024 11:14:50 -0300 Subject: [PATCH] Modal funcionando corretamente quando clicado em qualquer Pokemon card --- README.md | 2 + assets/css/global.css | 187 ++++++++++++++++++++++++++++++++++++++---- assets/js/main.js | 1 + assets/js/modal.js | 94 +++++++++++++++++++++ assets/js/poke-api.js | 5 +- index.html | 63 +++++++++++++- 6 files changed, 336 insertions(+), 16 deletions(-) create mode 100644 assets/js/modal.js diff --git a/README.md b/README.md index 0c237c1c3..021d6312d 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ # Trilha JS Developer - Pokedex +Simple HTML/CSS/JS project by getting information from PokeAPI and showing cards with pagination. The only different feature is when users click on card and a MODAL pops up with its layout and a few informations about the specific Pokemon. +Have a fun with that. 😁👨‍💻 \ No newline at end of file diff --git a/assets/css/global.css b/assets/css/global.css index 980e87861..3e45e1a67 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -1,24 +1,183 @@ * { - font-family: 'Roboto', sans-serif; - box-sizing: border-box; + font-family: 'Roboto', sans-serif; + box-sizing: border-box; } body { - background-color: #f6f8fc; + background-color: #f6f8fc; } .content { - width: 100vw; - height: 100vh; - padding: 1rem; - background-color: #fff; + width: 100vw; + height: 100vh; + padding: 1rem; + background-color: #fff; } @media screen and (min-width: 992px) { - .content { - max-width: 992px; - height: auto; - margin: 1rem auto; - border-radius: 1rem; - } -} \ No newline at end of file + .content { + max-width: 992px; + height: auto; + margin: 1rem auto; + border-radius: 1rem; + } +} + +#customModal { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 0px; + background-color: #fff; + border-radius: 20px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); + animation: fadeIn 0.3s ease-in-out; + z-index: 9; + min-width: 250px; +} + +.modal-header { + padding: 50px 20px; + border-radius: 20px 20px 0 0; +} + +.flex { + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal-header i { + font-size: 20px; + color: #fff; +} + +.close { + position: absolute; + background: transparent; + border: none; + outline: none; + color: #fff; + top: 15px; + left: 50%; + transform: translateX(-50%); +} + +.name { + text-transform: capitalize; + color: #fff; + margin-bottom: 0.25rem; + font-weight: normal; +} +.type { + color: #fff; + padding: 0.25rem 0.5rem; + margin: 0.25rem 0; + font-size: 10px; + border-radius: 1rem; + filter: brightness(1.1); + text-align: center; +} + +#customModal ol { + list-style: none; + padding-left: 0; + justify-content: flex-start; + gap: 5px; + margin-top: 0; +} + +#customModal ol li { + box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.8); + font-size: 13px; + padding: 5px 15px; +} + +#customModal .detail { + font-size: 14px; + color: #fff; +} + +.image-box { + display: flex; + justify-content: center; + margin-bottom: -60px; + margin-top: 20px; +} + +.image-box img { + height: 120px; + width: auto; +} + +.modal-content { + padding: 25px 20px; + border-radius: 20px; + background: #fff; + margin-top: -15px; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); +} + +h3 { + font-size: 16px; +} + +.modal-content .flex { + margin-bottom: 15px; +} + +.modal-content .label { + font-size: 14px; + color: #666; + width: 80px; +} + +.modal-content .flex { + justify-content: flex-start; +} + +.modal-content .typ { + display: flex; +} + +.modal-content .name { + color: #000; +} + +.modal-content .type { + color: #000; + padding: 0 5px; + margin: 0px; + font-size: 16px; + border-radius: none; + filter: none; + list-style: none; +} + +.modal-content .typ li { + background: #fff !important; +} + +@keyframes fadeIn { + from { + opacity: 0; + margin-top: 30px; + } + to { + opacity: 1; + margin-top: 0; + } +} + +#overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 1; +} diff --git a/assets/js/main.js b/assets/js/main.js index bcaa24508..b6b3836fb 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -27,6 +27,7 @@ function loadPokemonItens(offset, limit) { pokeApi.getPokemons(offset, limit).then((pokemons = []) => { const newHtml = pokemons.map(convertPokemonToLi).join('') pokemonList.innerHTML += newHtml + loadListener() }) } diff --git a/assets/js/modal.js b/assets/js/modal.js new file mode 100644 index 000000000..035c39d80 --- /dev/null +++ b/assets/js/modal.js @@ -0,0 +1,94 @@ +let name; +let number; +let type; +let clas; +let img; + +var liElements = document.querySelectorAll('#pokemonList li'); + +function loadListener(){ + + + +let intr = setInterval(function () { + + if (liElements.length) { + clearInterval(intr); + liElements = document.querySelectorAll('#pokemonList li'); + // console.log('list', liElements) + liElements.forEach(function (li) { + li.addEventListener('click', function () { + // Grab the content of the div and the href attribute of the a element + + name = this.querySelector('.name').textContent; + number = this.querySelector('.number').textContent; + clas = this.className; + type = this.querySelector('.types').innerHTML; + img = this.querySelector('img').getAttribute('src'); + //remove common class + var wordToRemove = "pokemon "; + + clas = removeWordFromString(clas, wordToRemove); + + let parser = new DOMParser(); + let doc = parser.parseFromString(type, 'text/html'); + + // Extract the list items from the parsed document + let listItems = Array.from(doc.body.querySelectorAll('li')).map(item => item.textContent.trim()); + + + + // Log the content and href to the console (you can do any further processing with these variables) + let modal = document.querySelector('#customModal'); + modal.querySelector('.detail').innerText = number; + modal.querySelector('.name').innerText = name; + modal.querySelector('.modal-header').className = 'modal-header'; + modal.querySelector('.modal-header').classList.add(clas) + modal.querySelector('.types').innerHTML = type; + modal.querySelector('img').setAttribute('src', img); + + //update modal details + let details = document.querySelector('#customModal .modal-content'); + details.querySelector('.number').innerText = number; + details.querySelector('.name').innerText = name; + details.querySelector('.typ').innerHTML = type; + details.querySelector('.length').innerHTML = listItems.length; + openModal() + }); + }); + } else { + liElements = document.querySelectorAll('#pokemonList li'); + } +}, 1000) + +} + + + +// Add an event listener to each li element + + + +function openModal() { + document.getElementById('customModal').style.display = 'block'; + document.getElementById('overlay').style.display = 'block'; + +} + +function closeModal() { + document.getElementById('customModal').style.display = 'none'; + document.getElementById('overlay').style.display = 'none'; +} + + +function removeWordFromString(inputString, wordToRemove) { + // Create a regular expression to match the word with word boundaries + var regex = new RegExp('\\b' + wordToRemove + '\\b', 'g'); + + // Use the replace method to remove the word from the string + var resultString = inputString.replace(regex, ''); + + return resultString; +} + +loadListener(); \ No newline at end of file diff --git a/assets/js/poke-api.js b/assets/js/poke-api.js index 38fbfd465..0e1fd255b 100644 --- a/assets/js/poke-api.js +++ b/assets/js/poke-api.js @@ -31,5 +31,8 @@ pokeApi.getPokemons = (offset = 0, limit = 5) => { .then((jsonBody) => jsonBody.results) .then((pokemons) => pokemons.map(pokeApi.getPokemonDetail)) .then((detailRequests) => Promise.all(detailRequests)) - .then((pokemonsDetails) => pokemonsDetails) + .then((pokemonsDetails) =>{ + console.log(pokemonsDetails) + return pokemonsDetails + } ) } diff --git a/index.html b/index.html index 1a017821d..4e8aca38d 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> - + @@ -20,6 +20,7 @@ + @@ -38,9 +39,69 @@

Pokedex

+ + + + +
+ +
+ + +
+
+ + +
+ +
+
+

Card Name

+
    + +
+
+ #01 +
+ +
+ +
+ + +
+ +
+

About

+
+ Number + #01 +
+ +
+ Name + Pokemon +
+ +
+ Type + 1.Bulet 2.Tolet 3.Dolet +
+ +
+ Length + 1.Bulet 2.Tolet 3.Dolet +
+
+
+ + + + \ No newline at end of file