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