Widget:SearchQuestScript: mudanças entre as edições
Ir para navegação
Ir para pesquisar
${cardData.title}
(Criou página com '<script> // Container dos cartões const container = document.querySelector("#quests-container") 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 ConvertStringToHTM...') |
Sem resumo de edição |
||
| (19 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
<script> | <script defer> | ||
// Container dos cartões | // Container dos cartões | ||
const container = document.querySelector("#quests | const container = document.querySelector("#app-quests") | ||
const contentLevel = document.querySelector("#contentLevel") | 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"); | |||
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 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=". | `<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> | ||
<h2> | <h2> | ||
${cardData.title} <span class="level"> | ${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); | ||
filteredData.forEach(data => { | filteredData.forEach(data => { | ||
container. | 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>