Interactivity with JavaScript

00. DOM

Interactivity examples with a button.

• 01 DOM page without variability (static)
• 02 DOM with variability due to a timer script Open the Elements tab in dev tools
• 03 DOM with variability due to a user action Open the Elements tab in dev tools

---

01. Button

Interactivity examples with a button.

• 01 Basic HTML button
• 02 Identify the button
• 03 Create a reference to the button in JavaScript Open the console
• 04 Access information of the button with JavaScript Open the console
• 05 Add an event listener Open the console
• 06 Add an event listener (alternative syntaxe) Open the console
• 07 Show a feedback after clicking the button
• 08 Add multiple manipulations inside the same event listener
• 09 Add some computational logic inside the event listener
• 10 Wrap-up example with a small learning app

---

02. Multiple buttons

Interactivity examples with multiple buttons.

• 01 Identify multiple buttons at the same time Open console
• 02 Iterate through the buttons Open console
• 03 Add an event listener to each button Open console
• 04 Show a feedback after clicking each button
• 05 Wrap-up example with a small learning app

---

03. Input

How to interact with input from the user (e.g. text input, ...)

• 01. Different kind of inputs (overview)
• 02. Identify inputs with JavaScript Open console
• 03. Add event listeners to an input
• 04. Wrap-up example converting digital to binary numbers.