Vandaag heb ik de HTML/CSS/JavaScript voor deze wireflow geschreven, enkel alleen voor de bovenste rij. De invalid e-mail ben ik nog niet aan begonnen wegens tijdgebrek.

Ik heb hierbij de volgende bronnen geraadpleegt:

1. MDN - Blur event
2. MDN - classList property
3. Op het einde een klein beetje trouble shooting (= het ook toepassen op de dropdown) met mijn vriend ^^

Eerst maak ik een item voor de form aan. In dit geval is het een text input voor de voornaam van de persoon die de form invult. Hier voeg ik een ID aan toe zodat ik deze in de JavaScript code kan aanroepen.

<label for="fname">Voornaam<span>*</span></label>
<input type="text" id="vnaam" name="voornaam" placeholder="Jouw voornaam.." required>

Dan schrijf ik de JavaScript die dus met het ID dit stukje code aanroept. Wanneer de element out of focus gaat (ook wel blurred genoemd) voert de functie checkIfEmpty uit.

let vnaam = document.getElementById('vnaam');
vnaam.addEventListener('blur', () => {
  checkIfEmpty(vnaam);
});

Hier declare ik wat de functie checkIfEmpty nou eigenlijk doet. Hij kijkt of de element value 0 is, of te wel, leeg. Indien dit het geval is, triggered hij de class form__invalid--visible waardoor de border van het veld rood wordt. Indien er wel wat in het veld staat, dus de input value is niet 0, dan haalt hij die class weg, als die er was door bijvoorbeeld een vorige poging.

function checkIfEmpty(element) {
  if(element.value == null || element.value == '') {
    element.classList.add('form__invalid--visible')
    document.getElementById('invalidFieldMessage').classList.add('form__invalid--message');
  } else {
    element.classList.remove('form__invalid--visible')
    document.getElementById('invalidFieldMessage').classList.remove('form__invalid--message');
  }
}

Zie hier het eindresultaat:

PS: De focus ring is hier oranje en hoort zwart te zijn, dit moet ik nog aanpassen. Hij was eerst wel zwart, maar toen magisch niet meer!

Vandaag heb ik de contact pagina responsive gemaakt en gelijk ook de tweede pagina, namelijk de initiatief informatie pagina in elkaar gezet. Deze is ook responsive. Om de pagina responsive te maken maak ik gebruik van twee media queries. Ook heb ik gelijk de header en footer gestyled, en deze is dus voor alle pagina's al responsive.

/* Size M Device - Tablet */

@media (min-width: 768px) and (max-width: 1023px) {}

/* Size L-XL Device - Laptop-Desktop */

@media (min-width: 1024px) {}

Dit is het eindresultaat geworden van de initiatief pagina:

Vandaag heb ik de landing pagina en de over ons pagina gemaakt. Bij de over ons pagina heb ik de image een klein beetje veranderd ter opzichte van de schets, omdat ik het toch anders te leeg vond.

Hier zie je het eindresultaat:

Vandaag heb ik de overzicht pagina gemaakt, hierbij ben ik tegen wat problemen aangelopen met selectors (dezelfde selectors gebruikt als bij de contact pagina) maar gelukkig heb ik dit kunnen oplossen. Dit is het eindresultaat geworden: