Widget:SearchQuestScript: mudanças entre as edições

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
 
(2 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 37: Linha 37:
         <a href="${cardData.link}" class="card">
         <a href="${cardData.link}" class="card">
             <main>
             <main>
                <header class="icon-container">
                    ${icons.join("")}                   
                </header>
                 <h2>
                 <h2>
                     ${cardData.title} <br /> <span class="level"> Level: ${cardData.level} </span>
                     ${cardData.title} <br /> <span class="level"> Level: ${cardData.level} </span>
Linha 46: Linha 42:


                 <div class="description-container">
                 <div class="description-container">
                     <p class="description">
                     <p class="description" title="${cardData.description}">
                       ${cardData.description}
                       ${cardData.description}
                     </p>
                     </p>
                 </div>
                 </div>
               
                <footer class="icon-container">
                    ${icons.join("")}                   
                </footer>
             </main>
             </main>


Linha 67: Linha 67:
         container.innerHTML += (createCard(data));
         container.innerHTML += (createCard(data));
     });
     });
})
});
</script>
</script>

Edição atual tal como às 18h22min de 27 de dezembro de 2023

<script defer> // Container dos cartões const container = document.querySelector("#app-quests") const contentLevel = document.querySelector("#contentLevel"); const questCheck = document.querySelector("#questCheck"); const catchCheck = document.querySelector("#catchCheck"); const dailyCheck = document.querySelector("#dailyCheck"); const tasksCheck = document.querySelector("#tasksCheck"); const pvpCheck = document.querySelector("#pvpCheck"); const nwCheck = document.querySelector("#nightmareCheck");

function filterData(data) {

   const temp = data.filter((item) => {
       if (Number(contentLevel.value) < Number(item.level) || !(Number(contentLevel.value) - 50 <= Number(item.level))) return false;
       if (
           questCheck.checked != item.categories.quest &&
           catchCheck.checked != item.categories.task &&
           dailyCheck.checked != item.categories.daily &&
           tasksCheck.checked != item.categories.catch &&
           pvpCheck.checked != item.categories.pvp && 
           nwCheck.checked != item.categories.nw
       ) return false;
       return true;
   });
   return temp;

}

function createCard(cardData) {

   const icons = cardData.icons.map((icon) => (
       `<img src="${icon.image}" title="${icon.title}" alt="Icone ${icon.title}">`
   ));
   return (`
       <a href="${cardData.link}" class="card">
           <main>

${cardData.title}
Level: ${cardData.level}

${cardData.description}

               <footer class="icon-container">
                   ${icons.join("")}                    
               </footer>
           </main>
           <aside>
               <img src="${cardData.imageSource}" alt="Imagem da missão - ${cardData.title}">
           </aside>
       </a>
   `)

}

document.querySelector("#quests-form").addEventListener("submit", function (e) {

   e.preventDefault();
   container.innerHTML = ;
   const filteredData = filterData(json);
   filteredData.forEach(data => {
       container.innerHTML += (createCard(data));
   });

}); </script>