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
 
(Uma revisão intermediária pelo mesmo usuário não está sendo mostrada)
Linha 42: 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>

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>