Modal funcionando corretamente quando clicado em qualquer Pokemon card

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. 😁👨‍💻

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

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()
     })
 }
 

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();

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