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

Ir para navegação Ir para pesquisar
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
 
(17 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<script defer>
<script defer>
// Container dos cartões
// Container dos cartões
const container = document.querySelector("#app")
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 8: Linha 8:
const tasksCheck = document.querySelector("#tasksCheck");
const tasksCheck = document.querySelector("#tasksCheck");
const pvpCheck = document.querySelector("#pvpCheck");
const pvpCheck = document.querySelector("#pvpCheck");
 
const nwCheck = document.querySelector("#nightmareCheck");
 
let ConvertStringToHTML = function (str) {
    let parser = new DOMParser();
    let doc = parser.parseFromString(str, 'text/html');
    return doc.body;
};


function filterData(data) {
function filterData(data) {
     const temp = data.filter((item) => {
     const temp = data.filter((item) => {
         if (contentLevel < item.level) return false;
         if (Number(contentLevel.value) < Number(item.level) || !(Number(contentLevel.value) - 50 <= Number(item.level))) return false;


         if (
         if (
Linha 27: Linha 19:
             dailyCheck.checked != item.categories.daily &&
             dailyCheck.checked != item.categories.daily &&
             tasksCheck.checked != item.categories.catch &&
             tasksCheck.checked != item.categories.catch &&
             pvpCheck.checked != item.categories.pvp
             pvpCheck.checked != item.categories.pvp &&
         )
            nwCheck.checked != item.categories.nw
            return false;
         ) return false;


         return true;
         return true;
Linha 39: Linha 31:
function createCard(cardData) {
function createCard(cardData) {
     const icons = cardData.icons.map((icon) => (
     const icons = cardData.icons.map((icon) => (
         `<img src="./assets/img/icon.png" alt="Image simbolica">`
         `<img src="${icon.image}" title="${icon.title}" alt="Icone ${icon.title}">`
     ));
     ));


Linha 45: 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 68: 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.append(ConvertStringToHTML(createCard(data)))
         container.innerHTML += (createCard(data));
     });
     });
})
});
</script>
</script>

Menu de navegação