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.
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