Interactive slides

Code-defined decks with live demos and polls

Moving around

→ / Space / PageDown — next step or slide (clickers send PageDown)

← / PageUp — back one step

O overview · F fullscreen · B black screen · T theme

Columns, code and callouts

js

const button = document.querySelector('button');
button.addEventListener('click', () => {
  console.log('clicked');
});

A plain code block keeps its Copy button.

Math works too

The area of a circle is $A = \pi r^2$ .

\sum_{i=1}^{n} i = \frac{n(n+1)}{2}

A live demo

Styled box

<div class="box">Hello, slides!</div>

.box {
  padding: 24px;
  border-radius: 12px;
  background: tomato;
  color: white;
  font: 600 28px system-ui;
}

Press Run to see the result

Console

Console output

Loop script.js

for (let i = 1; i <= 3; i++) {
  console.log('step', i);
}
console.warn('this is a warning');

Press Run to see the result

Console

Press Run — this demo does not start on its own.

Result only

Counter

<button id="count">Clicked 0 times</button>

button {
  font: 600 22px system-ui;
  padding: 12px 20px;
  margin: 24px;
}

let n = 0;
const button = document.getElementById('count');
button.addEventListener('click', () => {
  n++;
  button.textContent = `Clicked ${n} times`;
});

Press Run to see the result

Console

Edit shows the code; ↗ opens the demo in the playground.

A demo can be a step

First, a question: what does textContent do with markup?

textContent

<p id="out"></p>

document.getElementById('out').textContent = '<b>bold?</b>';

Press Run to see the result

Console

Prediction

The counter button on slide 7 is clicked three times. What does it say?

Quiz

Which method attaches an event handler?

Live sessions

Join from your phone

Scan the QR code on the board, or open gkrisz.space/s and type the code.

Your phone follows the presenter; switch to Browse to look around on your own.