Week 17: Modal, Classes & Keypress events

• JavaScript
• MBO
• Studiejaar 2

Where am I? 🤔

Waar staan wij op dit moment met JS?

Where am I? 🤔

Periode 1: Fundament gelegd

Periode 2: Geavanceerde fundament geleerd

Periode 3 (nu): Guess my number project gemaakt

Waar gaan wij heen? 🗺

Nieuwe project!

Modal, Classes en Keypress events 🤓

Wat heb je nodig?

Voor deze les, moet je Node.js hebben geinstalleerd en basis DOM manipulatie begrijpen. Deze zijn in de vorige les behandeld.

Meer hierover in de studentenhandleiding op onderwijs online.

Expertgroep opdracht

De docent heeft een probleem. Hij/zij weet niet hoe een popup te maken na het indrukken van een knop (modal). Ook heeft hij/zij geen kennis hoe de popup te sluiten wanneer je buiten de popup klikt of op escape drukt.

Expertgroep opdracht

De docent maakt groepjes die het gaan onderzoeken. Jij documenteert wat je hebt gedaan in stappen en legt het uit aan de docent.

Doel van deze les

• De student kan in JavaScript een popup laten verschijnen na het indrukken van een knop.
• De student kan in JavaScript een popup sluiten door buiten de kaders te klikken.
• De student kan in JavaScript een toetsenbord combinatie gebruiken om de popup te sluiten.

Volgende technieken moeten gebruikt worden

• Jij moet werken met hidden classes (CSS)
• Meerdere elementen selecteren met querySelectorAll
• Dezelfde functionaliteit maken voor dezelfde elementen door een for loop te gebruiken
• De modal window laten verschijnen door classList.remove te gebruiken
• Een event listener gebruiken om te reageren op events
• De keydown event gebruiken.
• Jij moet aan refactoring doen.

developer.mozilla.org

Groepjes leggen modal uit.

Wat waren de doelen?

• De student kan in JavaScript een popup laten verschijnen na het indrukken van een knop.
• De student kan in JavaScript een popup sluiten door buiten de kaders te klikken.
• De student kan in JavaScript een toetsenbord combinatie gebruiken om de popup te sluiten.

Denk je dat je de leerdoelen hebt behaald?

Ja

Nee