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
 
(12 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 2: Linha 2:
// Container dos cartões
// Container dos cartões
const container = document.querySelector("#app-quests")
const container = document.querySelector("#app-quests")
const contentLevel = document.querySelector("#contentLevel").value;
const contentLevel = document.querySelector("#contentLevel");
const questCheck = document.querySelector("#questCheck");
const questCheck = document.querySelector("#questCheck");
const catchCheck = document.querySelector("#catchCheck");
const catchCheck = document.querySelector("#catchCheck");
Linha 12: Linha 12:
function filterData(data) {
function filterData(data) {
     const temp = data.filter((item) => {
     const temp = data.filter((item) => {
         if (Number(contentLevel) < Number(item.level)) return false
         if (Number(contentLevel.value) < Number(item.level) || !(Number(contentLevel.value) - 50 <= Number(item.level))) return false;


         if (
         if (
Linha 31: Linha 31:
function createCard(cardData) {
function createCard(cardData) {
     const icons = cardData.icons.map((icon) => (
     const icons = cardData.icons.map((icon) => (
         `<img src="${icon.image}" alt="Icone ${icon.title}">`
         `<img src="${icon.image}" title="${icon.title}" alt="Icone ${icon.title}">`
     ));
     ));


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} <span class="level"> (Level: ${cardData.level}) </span>
                     ${cardData.title} <br /> <span class="level"> Level: ${cardData.level} </span>
                 </h2>
                 </h2>


                 <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 60: Linha 60:


document.querySelector("#quests-form").addEventListener("submit", function (e) {
document.querySelector("#quests-form").addEventListener("submit", function (e) {
     e.preventDefault()
     e.preventDefault();
    container.innerHTML = '';
     const filteredData = filterData(json);
     const filteredData = filterData(json);
    console.log(filteredData)


     filteredData.forEach(data => {
     filteredData.forEach(data => {
         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>