Widget:SearchQuestScript

<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>
               <header class="icon-container">
                   ${icons.join("")}                    
               </header>

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

${cardData.description}

           </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>