Choose the UI from the permission state
On a real page: const status = await navigator.permissions.query({ name: "geolocation" }), then uiFor(status.state), and status.onchange = () => render(uiFor(status.state)) to follow changes made in site settings.
Powerful browser features such as the clipboard, the user's location and system notifications are guarded by permissions: they need a secure (HTTPS) page, often a user action, and the user's consent, so good code detects support, asks at the right moment and has a fallback when the answer is no.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write supports() that returns an object saying whether clipboard, geolocation, notifications and share are available, then log it.
Write copyText(text) that resolves to "copied" or "manual" (when the Clipboard API is missing or rejects), never throwing.
Explain it without notes
What layers of protection do browsers put around powerful APIs?
How do you use the Geolocation API with async/await, and what are its error codes?
What is the right way to ask for notification permission?
What can and can't the Permissions API do?
Preview
Console
Nothing logged yet.Expected console output
granted: (no button)
prompt: Use my location
denied: Type a city
unsupported: Type a city