Vacaturekaart met semantische HTML
HTMLBouw een vacaturekaart op met passende, semantische elementen (bijv. <article>, <h2>, <ul>) in plaats van overal <div>.
Front-end assessment
HTML, CSS & JavaScript
Waar gaat dit over?
Als Business Engineer werk je naast Mendix ook met webtechnologie. Met deze opdracht krijgen we een beeld van je gevoel voor HTML, CSS en JavaScript en hoe je een probleem aanpakt. Geen ervaring vereist — opzoeken (bijv. op MDN) mag en wordt aangemoedigd.
Aan de slag
Download de opdracht hieronder. Pak de ZIP uit en open README.md — daarin staat alles uitgelegd. Alles draait in je browser door simpelweg de index.html-bestanden te openen; je hoeft niets te installeren.
Voortgang bijhouden
Vink hieronder de onderdelen af die je hebt afgerond. Dit wordt in je eigen browser bewaard, zodat je je voortgang terugziet als je later terugkomt. Reken op zo'n 2 uur voor deel 1 en 2 samen; deel 3 is een bonus.
0 van 14 afgerond
Deel 1 — HTML & CSS
Kaart opmaken met CSS
CSSGeef de kaart een witte achtergrond, afgeronde hoeken, binnenruimte (padding) en een subtiele schaduw.
Tags op een rij (flexbox)
CSSZet de tags netjes naast elkaar met flexbox en geef ze een gekleurd "pill"-uiterlijk.
Knop "Solliciteer" met hover-effect
CSSMaak de knop herkenbaar: opvallende kleur, witte tekst, afgeronde hoeken en een hover-effect.
Tweede kaart & responsive layout
UitdagingVoeg een tweede vacaturekaart toe en zorg dat de kaarten op een breed scherm naast elkaar en op een smal scherm onder elkaar staan.
Deel 2 — JavaScript
Taak toevoegen via de knop
JSVoeg een taak toe aan de lijst als de gebruiker op "Toevoegen" klikt, en maak het invoerveld daarna leeg.
Lege invoer afvangen
JSVoeg geen lege taak toe: bij een leeg veld (of alleen spaties) gebeurt er niets.
Taak kunnen verwijderen
JSGeef elke taak een eigen "verwijderen"-knop die alleen díe taak uit de lijst haalt.
Teller bijwerken
JSWerk de teller ("Aantal taken: X") bij telkens als er een taak bijkomt of verdwijnt.
Toevoegen met Enter-toets
UitdagingZorg dat een taak ook toegevoegd wordt als de gebruiker op Enter drukt in het invoerveld.
Deel 3 — Data ophalen (bonus)
Data ophalen met fetch
BonusHaal de data op van de API met fetch() en zet het antwoord om naar JSON.
Per persoon een kaart tonen
BonusMaak per persoon een kaart met de naam, het e-mailadres en de bedrijfsnaam.
Laadtekst bijwerken
BonusWijzig of verberg "Bezig met laden..." zodra de data binnen is (bijv. toon hoeveel personen er gevonden zijn).
Foutafhandeling
ExtraVang fouten netjes op: toon een duidelijke foutmelding als de data niet opgehaald kan worden.