Widget:SearchQuestScript

<script defer> // Container dos cartões const container = document.querySelector("#app") const contentLevel = document.querySelector("#contentLevel").value; 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");

let ConvertStringToHTML = function (str) {

   let parser = new DOMParser();
   let doc = parser.parseFromString(str, 'text/html');
   return doc.body;

};

function filterData(data) {

   const temp = data.filter((item) => {
       if (contentLevel < 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
       )
           return false;

       return true;
   });

   return temp;

}

function createCard(cardData) {

   const icons = cardData.icons.map((icon) => (
       `<img src="./assets/img/icon.png" alt="Image simbolica">`
   ));

   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()
   const filteredData = filterData(json);
   console.log(filteredData)

   filteredData.forEach(data => {
       container.append(ConvertStringToHTML(createCard(data)))
   });

}) </script>