Week 3
We zijn vandaag begonnen met een standup. Daarin hebben we ons werk laten zien en besproken wat we gaan doen deze komende dagen. Bij de 'own-playlist' section hadden we besproken dat de header-styling aangepast moet worden om het meer pleasurable te maken.
De 'own-playlist' header had ik de styling veranderd naar neon-styling ook heb ik om het meer pleasurable te maken bij de bedienknoppen een hover/click interactie toegevoegd. De achtergrond wordt donkerder als je clickt/hovered, hierdoor is het voor de gebruiker duidelijk dat ze gebruik maken van de hover.
Ik heb het carousel gebouwd via de principes van hierachy of users delight, ik ben begonnen door het eerst functioneel te maken, dit heb ik gedaan door in de eerste laag en 2e laag (html) de buttons op hidden te zetten in html en het reliable te maken. Ik heb het usable gemaakt door de buttons, hierdoor kan je het bedienen door op de buttons te klikken. Om het pleasurable te maken heb ik scrollbehavior op smooth gezet en heb ik de buttons een hover gegeven zodat het duidelijk is voor de gebruiker dat ze de buttons gebruiken.
In de JS heb ik gezorgd dat buttons bedienbaar zijn, ook heb ik een click interactie (achtergrond kleur veranderd) op de buttons toegevoegd zodat het duidelijk voor de gebruiker is dat ze de button gebruiken.
prevBTN.addEventListener('mousedown', () => {
prevBTN.classList.add('button-background');
});
prevBTN.addEventListener('mouseup', () => {
setTimeout(() => {
prevBTN.classList.remove('active');
}, delay);
});
prevBTN.addEventListener('mouseleave', () => {
// This ensures the class is removed if the mouse leaves the button while it's pressed
setTimeout(() => {
prevBTN.classList.remove('button-background');
}, delay);
});
// hover & click event button
nextBTN.addEventListener('mousedown', () => {
nextBTN.classList.add('button-background');
});
nextBTN.addEventListener('mouseup', () => {
setTimeout(() => {
nextBTN.classList.remove('active');
}, delay);
});
nextBTN.addEventListener('mouseleave', () => {
// This ensures the class is removed if the mouse leaves the button while it's pressed
setTimeout(() => {
nextBTN.classList.remove('button-background');
}, delay);
});
Op woensdag heb ik een aantal kleine aanpassingen gemaakt aan het carousel en heb ik de main-branch live-gezet.
https://github.com/lisavanmansom/pleasurable-ui/blob/main/README.md
Op woensdag hebben we al ons werk gemerged. We hebben uiteindelijk gekozen voor de homepage van mij met daarin de muis die Hadil heeft geanimeerd, ook heeft Hadil een pleasurable achtergrond (kleur veranderd per 12uur) in de homepage gemerged. Verder heb ik de 'own playlist' section geredesign en gemerged.
Op donderdag heb ik de site getest op toegankelijkheid en performance. De score van de performance test is 37, we hebben deze sprint geen rekening gehouden met de performance en verschillende interacties toegevoegd, dit is te zien in de score van de site. Door een aantal aanpassingen is de toegankelijkheid ook daarbeneden gegaan sinds de laatste test, op dit moment is de score 84.
