kevin/portfolio
1
0
Fork 0
Code

Create a simple status filterable plamo kit page with checkboxes.

Browse Source
This commit is contained in:
Kevin Matsubara 2026-02-17 23:25:03 +01:00
parent 9a1fdc027c
commit 408f30d574
1 changed files with 57 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
portfolio/templates/model-kits.html
View File

@ -1,6 +1,37 @@
<hr/>
<div class="filters">
<fieldset>
<legend>Filter by status</legend>
<label>
<input type="checkbox" value="Still in box" checked>
Still in box
</label>
<label>
<input type="checkbox" value="Building" checked>
Building
</label>
<label>
<input type="checkbox" value="Built" checked>
Built
</label>
<label>
<input type="checkbox" value="Complete" checked>
Complete
</label>
</fieldset>
</div>
<hr/>
<div class="row row-cols-md-1 row-cols-lg-2 row-cols-xxl-3 g-4 p-1">
$for(kits)$
<div class="col">
<div class="col kit" data-status="$status$">
<div class="card h-100 mb-3" style="max-width: 500px; min-width: 300px;">
<div class="row g-0">
<a href="$url$"><h5 class="card-title text-center mt-1">$title$</h5></a>
@ -44,4 +75,28 @@
</div>
</div>
$endfor$
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const checkboxes = document.querySelectorAll(".filters input[type=checkbox]");
const kits = document.querySelectorAll(".kit");
function updateFilter() {
const selected = Array.from(checkboxes)
.filter(cb => cb.checked)
.map(cb => cb.value);
kits.forEach(kit => {
const status = kit.dataset.status;
if (selected.includes(status)) {
kit.style.display = "";
} else {
kit.style.display = "none";
}
});
}
checkboxes.forEach(cb => cb.addEventListener("change", updateFilter));
});
</script>