Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Load more results as the user scrolls.
Infinite Scroll is easiest to learn by reading the example, changing it, and observing the result.
let page = 1;
let loading = false;
window.addEventListener('scroll', async () => {
const nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 200;
if (!nearBottom || loading) return;
loading = true;
const res = await fetch(`/api/lessons?page=${++page}`);
const more = await res.json();
document.querySelector('#list').insertAdjacentHTML(
'beforeend', more.map(l => `<li>${l.title}</li>`).join(''));
loading = false;
});Practice the Infinite Scroll example in a small scratch file, then explain what changed and why.