Cliënt side Component

Cliënt-side Component

Cliënt-side Javascript

De Javascript die ik gebruik voor de progressive enhancement bestaat uit het gebruik van de Intersection Observer API in api.js, dit heb ik gedocumenteerd onder het kopje: API's research.

Ook gebruik ik onderstaande code voor het valideren van de form op de pagina social.ejs.

// variabelen
const selectGenres = document.getElementById('genres');

const formError = document.querySelector('.formError');

const zoekKnop = document.querySelector('.zoekKnop');

// zet alle 'option' elementen in 'optionElements' en voeg aan elke een event listener en voer direct de functie uit bij klikken
const optionElements = document.querySelectorAll('option').forEach(element => {
    element.addEventListener('click', () => {
        // verwijder error tekst bij een valide form
        formError.remove('Kies hier een genre');
        // voeg een classlist toe zodat de styling mooi blijft tussen de 'zoekknop' en de 'select'
        selectGenres.classList.add('valid');
    });
});

// luisteren naar klik op 'zoeken' button in social.ejs en voer direct een functie uit bij klikken
zoekKnop.addEventListener('click', () => {
    // als er op zoeken wordt geklikt wanneer er geen genre is geselecteerd, voeg dan de invalid classlist toe en geef een error melding dat er een genre moet worden gekozen
    if (selectGenres.value == "") {
        selectGenres.classList.add('invalid');
        formError.append('Kies hier een genre');
        console.log('vul een geldige zoekopdracht in');
    } else {
        return;
    }
});

Onderstaande link laat zien hoe dit werkt op de webpagina: https://share.vidyard.com/watch/u6fMzP8L9AHCupFBkwZMQL?

Wat er te zien is in deze code is het gebruik van de nieuwe ES6 syntax. Ik gebruik const voor het declareren van constante variabelen en ik gebruik arrow functions om de code netter en korter te kunnen schrijven.

CSS enhancement

Ik gebruik de buildtool van Sass om SCSS te schrijven in style.scss wat wordt omgezet in CSS, hier is meer van te lezen onder het kopje: Build-Tools

Form validatie

Onderstaande styling zorgt voor een simpele form validatie wanneer Javascript uit staat in combinatie met een required op de select in social.ejs. De required zorgt ervoor dat er een melding wordt gegeven als er geen genre is geselecteerd en er dus ook geen actie wordt uitgevoerd.

<select id="genres" name="genres" size="10" required>

select:valid {
    border: 2px solid green;
}

Onderstaande linker afbeelding wanneer Javascript uit staat en er geen genre is ingevoerd. De rechter laat zien wanneer er een genre is geselecteerd wanneer javascript uit staat.

HTML knoppen zichtbaar zonder CSS

Onderstaande code van de HTML laat de knoppen zien waar de gebruiker op kan klikken voor het liken/unliken. Hier is de Like/Remove tekst te zien in de button, maar deze is niet te zien wanneer CSS aan staat.

<button name="like" type="submit" value="<%= match.gebruikersnaam %>"><img src="/images/user-like-icon.svg" alt="like icoontje"/>Like</button>

<button name="like" type="submit" value="<%= match.gebruikersnaam %>"><img src="/images/user-like-icon.svg" alt="like icoontje"/>Remove</button>

In SCSS zorgt de volgende code dat de tekst niet zichtbaar is.

button {
    background-color: $sec-backgr-color;
    color: $sec-backgr-color;
    text-decoration: none;
    border: none;

    img {
        width: 30px;
        height: 30px;
    }
}

Wanneer de CSS uit staat wordt alleen de HTML geladen en is het volgende te zien in de knoppen bij de gebruikers.

Hierdoor weet de gebruiker alsnog wat de knoppen doen.

Feedback knoppen CSS pseudo-classes

Met pseudo-classes wordt er feedback aan de gebruiker gegeven wanneer er biijvoorbeeld wordt gehoverd, gefocust of geklikt op knoppen en links die knoppen zijn. De volgende code heb ik in SCSS gebruikt om dit te doen.

form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    input:hover {
        border: 2px solid $prim-button-color;
        background-color: $sec-text-color;
        color: $prim-button-color;
        transition: 0.2s;
        padding: 0.4em;
        cursor: pointer;
    }

    input:focus {
        border: 2px solid $prim-button-color;
        background-color: $sec-text-color;
        color: $prim-button-color;
        transition: 0.2s;
        padding: 0.4em;
        cursor: pointer;
    }
    
    input:active {
        border: 2px solid $prim-button-color;
        background-color: $sec-backgr-color;
        color: $prim-button-color;
        transition: 0.2s;
        padding: 0.4em;
        cursor: pointer;
    }
}

select:hover {
    cursor: pointer;
    background-color: $sec-backgr-color;
}

select:focus {
    background-color: $sec-backgr-color;
}

select:valid {
    border: 2px solid green;
}

button:hover {
    cursor: pointer;
}

Bronnen

• https://codyhouse.co/gem/back-to-top/
• https://css-tricks.com/how-to-make-an-unobtrusive-scroll-to-top-button/
• https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
• https://moderncss.dev/custom-select-styles-with-pure-css/
• https://flaviocopes.com/how-to-add-event-listener-multiple-elements-javascript/