Codeplan - YunusEmreCMD/blokTech GitHub Wiki

HTML

Ik heb een leuk concept bedacht en hierbij wireframes gemaakt, alleen naar aanleiding van de feedback die ik heb gekregen op mijn wireframe heb ik mijn feature aangepast naar "Filteren" (was eerst "inloggen").

Ik had al direct een idee in mijn hoofd, op welke manier ik het wou aanpakken. Ik begreep dat je alleen je feature moest bouwen, dus ik heb een leeg pagina gemaakt met een header, met daarin een filter-knop rechtsboven in gepositioneerd.

CSS

Omdat het een mobiele applicatie is, heb ik er met CSS ervoor gezorgd dat wanneer de applicatie niet op een mobiel formaat wordt bekeken je de applicatie niet kan bekijken. Er staat "Bekijk op mobiel formaat" (Media query). Verder heb ik met CSS ervoor gezorgd dat de filter-overlay niet te zien is en van boven naar beneden kan glijden, wanneer er op de filter knop gedrukt wordt.

Het verbergen van de filter-overlay aan de bovenzijde van het scherm heb ik gedaan door het element een position: absolute; te geven met daarbij top: 0;, right: 0;, left: 0;. Zodat de overlay op de volledige breedte wordt weergegeven. Het verbergen deed ik met transform: translateY(-100%);, met javascript ga ik ervoor zorgen dat de filter-overlay naar beneden glijdt, wanneer je op de filter knop klikt. Dit gaat met een transitie: transition: 1s;, transition-timing-function: ease-out;.

Javascript

Ik maak een variabele aan voor de filter knop, hier koppel ik een functie aan die ervoor zorgt dat wanneer de gebruiker "klikt" een nieuwe stijl getoggled wordt, deze nieuwe style zorgt ervoor dat de transform: translateY(-100%); naar transform: translateY(0%); gaat, hierdoor komt de filter-overlay tevoorschijn.

var filterKnop = document.getElementById("filter-knop");

filterKnop.addEventListener("click", openFilterOverlay);

function openFilterOverlay() {

document.body.classList.toggle("filterOverlayOpenen");

}

Functionaliteiten

• Filteren door te zoeken naar branche, functie en/of bedrijf
• Filteren d.m.v. checkboxes
• Filteren d.m.v. radio-buttons

---

:lollipop: https://yunusemrecmd.github.io/blokTech/