Ik heb gewerkt aan het maken van animaties. Ik heb een filter uitgewerkt die ook daadwerkelijk gebruikt kan worden. Ik heb verschillende styling gebruikt. De eerste afbeelding is de algemene button styling. Het + geeft aan dat er meer te vinden en dit wordt ook duidelijk door de blauwe hover (afbeelding 2). Als je dan de button uitklapt wordt duidelijk door de cirkels, feedforward, dat je een optie kan selecteren. De feeedback zal zijn dat de button zwart wordt, er is een filter actief (afbeelding 4). Ook zal de titel van 'alle events' veranderen naar een titel met geselecteerde filter, dit is ook feeedback (afbeelding 5 & 6). Verder zie je uiteraard alleen de events met geselcteerde filter (afbeelding 7). Bekijk zelf de site!
Verder heb ik nog gewerkt aan wat kleinere dingen. De hovers toegevoegd op de ook kleinere linkjes. Blauwe links worden zwart en de blauwe zwart. De plaatsgevonden events hebben een lageree opacity, zodat duidelijker wordt dat deze al geweest zijn. Ook heb ik in de nav 'event' blauw gemaakt, zo weet je op welke pagina je je bevindt. Verder heb ik buiten het ontwerp om zelf de titel "alle events:" toegevoegd, dit voor wat meer duidelijkheid en overzicht op de pagina. Tot slot heb ik aan de hand van de sprint review en de feedback een border om het formulier heen gemaakt. Dit was op de detailpagina.
In de HTML heb ik een radio form toegevoegd met een label eromheen voor toegankelijkheid. Ook heb ik gebruik gemaakt van data-category's. Bekijk hier mijn HTML code!
In de CSS heb ik gebruik gemaakt van stated als :has en :checked. Bekijk hier mijn CSS code!
Ik heb gebruik gemaakt van select, event & classlist. Verder heb ik ook gebruik gemaakt van if ... else. Bekijk hier mijn JS code!
This project is licensed under the terms of the MIT license.