Voor mijn styling heb ik een paar kleine features toegevoegd. Als eerste maak ik gebruik van root variablen. Hierdoor kun je als developer makkelijk en snel de stijlkleuren aanpassen. Maar, niet elke browser ondersteund deze variablen. Internet Explorer ondersteund deze namelijk niet. Vandaar dat ik eerst de kleurcode handmatig neer zet, en daaronder de kleur eventueel overschrijf met de variablen. Zoals bijvoorbeeld:

:root {
	/* COLORS */
	--mainColor: #634193; /*MAIN PURPLE COLOR*/
	--h1Color: white; /*COLOR OF HEADER: WHITE*/
}

h1 {
	background: #634193;
	background: var(--mainColor);
	color: white;
	color: var(--h1Color);
}

Daarnaast maak ik zo veel mogelijk gebruik van Grid. Grid werkt, helemaal in combinatie met minmax, erg fijn om responsive meerdere items te tonen. Helaas gooien ook hier oudere browsers, zoals Internet Explorer, roet in het eten. Daarom heb ik zoveel mogelijk geprobeerd om eerst met flexbox een zo mooi mogelijke grid te creeëren. Vervolgens overschrijf ik die display:flex weer door display:grid om zo een betere gebruikerservaring te creeëren.

// FIRST LOAD FLEX, THEN GRID IF SUPPORTED
main > section > ul {
        list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: stretch;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
	grid-gap: 1em;
}

/* EXTRA STYLING IF GRID NOT SUPPORTED */
main > section > ul li {
	flex-basis: 13em;
	flex-grow: 1;
	max-width: 17em;
	margin: 0.2em;
}

Hieronder vindt u een paar voorbeelden van veranderingen als javascript ondersteund wordt.

In de HTML worden eerst de numerieke input velden geladen met de type 'number'.

<label for="age">Leeftijd</label>
<input type="number" name="age" id="age" required />
<p id="ageValue"></p>

Wanneer Javascript geladen kan worden, veranderd de type van de input in 'range'. Omdat er standaard bij range geen waarde wordt getoond met wat de daadwerkelijke inputwaarde is, heb je javascript nodig om die waarde te tonen. Daarom kan er alleen range gebruikt worden met javascript.

// SAVE INPUT AS VARIABLES
const slider = document.querySelector('#age');
const ageValue = document.querySelector('#ageValue');

// CHANGE INTEGER INPUT INTO RANGE / SLIDER WHEN JAVASCRIPT LOADED AND SET MIN, MAX, CURRENT VALUE AND VISIBILITY
slider.type = 'range';
slider.min = '16';
slider.max = '60';
slider.value = '18';
ageValue.style.display = 'block';
slider.classList.add('slider');

ageValue.innerHTML = 'Leeftijd: ' + slider.value;

slider.oninput = () => {
  ageValue.innerHTML = 'Leeftijd: ' + slider.value;
}

Wanneer er op een mobiel de website wordt geopend, klapt de sidebar in. Linksonderin heb je dan een kleine 'bladwijzer' waar je dan op kan klikken om deze sidebar uit te vouwen.

Wanneer er Javascript gelezen wordt, wordt de sidebar ook weer ingeklapt wanneer en gescrold wordt. Normaal moet er op het rode knopje gedrukt worden. Maar met javascript klapt hij ook automatisch weer in wanneer de gebruiker scrold.

window.addEventListener('scroll', () => {
  console.log('setting false');
  document.querySelector('#asideButton').checked = false;
})