Frontend Master

JavaScript Curriculum

Clipboard, Geolocation & Other APIs
+60 XP

Clipboard, Geolocation & Other APIs

medium
~25 min·60 XP

The coffee shop menu needs a copy-link button, a 'find nearest branch' feature, and a dark mode that respects the user's OS setting. Each is one browser API away.

Clipboard, Geolocation & Other APIs

The browser is a platform — it exposes hardware and OS features that go far beyond the DOM. These APIs let your web app feel native.

Clipboard API

Read and write the clipboard with permission-aware async methods:

clipboard-api.js
clipboard.writeText()
clipboard.readText()
// Click buttons to try Clipboard API
// Modern Clipboard API
async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text)
    showToast('Copied!')
  } catch (err) {
    // Fallback for older browsers:
    const el = document.createElement('textarea')
    el.value = text
    document.body.appendChild(el)
    el.select()
    document.execCommand('copy')
    el.remove()
  }
}
ℹ️writeText vs readText permissions
`navigator.clipboard.writeText()` works without a permission prompt in most browsers (triggered by user gesture). `navigator.clipboard.readText()` requires explicit clipboard-read permission — the browser will show a permission dialog. Always wrap both in try/catch.

Geolocation API

Get the device's physical location — once or continuously:

geolocation.js
navigator.geolocation.getCurrentPosition(
  (pos) => {
    const { latitude, longitude } = pos.coords
    showOnMap(latitude, longitude)
  },
  (err) => {
    if (err.code === 1) showError('Location denied')
    else showError('Could not get location')
  },
  { enableHighAccuracy: true, timeout: 10000 }
)
⚠️Always handle permission denial
Users can deny location access. `err.code === 1` means permission denied. `err.code === 2` means position unavailable. `err.code === 3` means timeout. Show a helpful fallback for each — never assume location will succeed.

matchMedia & Other Browser APIs

Query media features in JavaScript, detect online status, share content natively:

media-apis.js
window.matchMedia()
(prefers-color-scheme: dark)Dark mode?
(prefers-reduced-motion: reduce)Reduced motion?
(max-width: 768px)Mobile viewport?
(pointer: coarse)Touch device?
(min-resolution: 2dppx)Retina display?
printPrint mode?
Other browser APIs

Is the browser currently connected?

console.log(navigator.onLine) // → true/false

window.addEventListener('online',  () => hideBanner())
window.addEventListener('offline', () => showOfflineBanner())
💡matchMedia for JS-driven dark mode
`window.matchMedia('(prefers-color-scheme: dark)').matches` reads the user's OS dark mode preference. Add a change listener: `mq.addEventListener('change', e => applyTheme(e.matches))` to automatically switch when the user changes their OS setting.

Your Challenge

Build three micro-features: (1) Copy button: await navigator.clipboard.writeText(location.href) — show "Copied!" for 2s. (2) On load: if matchMedia('(prefers-color-scheme: dark)').matches, add dark class to body. (3) Find branch button: getCurrentPosition(pos => showMap(pos.coords.latitude, pos.coords.longitude)).

Challenge

Build three features: (1) a 'Copy menu link' button using navigator.clipboard.writeText, (2) a dark mode toggle that reads window.matchMedia('(prefers-color-scheme: dark)').matches on load, (3) a 'Find nearest branch' button using navigator.geolocation.getCurrentPosition.

clipboardwriteTextreadTextgeolocationgetCurrentPositionwatchPositionmatchMediaprefers-color-schemeprefers-reduced-motionnavigator.onLinevisibilitychangeWeb Share API
Clipboard, Geolocation & Other APIs | Nexus Learn