JavaScript Web APIs: Web APIs Introduction · Fetch API · Geolocation API · History API · Pointer Events · Web Storage · Constraint Validation API · Web Workers

Browser
  ├── Fetch API          → Load data from servers without reloading the page
  ├── Geolocation API    → Get the user's GPS coordinates
  ├── History API        → Control the browser back/forward navigation
  ├── Pointer Events     → Handle mouse, touch, and stylus input uniformly
  ├── Web Storage        → Save data in the browser (localStorage / sessionStorage)
  ├── Validation API     → Check form inputs before submission
  └── Web Workers        → Run JavaScript in a background thread

fetch(url)
  .then(response => response.json())   // Step 1: Parse the raw response
  .then(data => console.log(data))     // Step 2: Use the data
  .catch(error => console.error(error)); // Step 3: Handle errors

// JSONPlaceholder is a free fake REST API — perfect for practising
fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(response => response.json())
  .then(user => {
    console.log(user.name);    // Output: Leanne Graham
    console.log(user.email);   // Output: Sincere@april.biz
    console.log(user.address.city); // Output: Gwenborough
  })
  .catch(error => console.error("Network error:", error));

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => {
    console.log(response.ok);      // true (status was 200–299)
    console.log(response.status);  // 200
    console.log(response.url);     // "https://jsonplaceholder.typicode.com/posts/1"

    // NOW parse the body
    return response.json();
  })
  .then(post => {
    console.log(post.title);
    // Output: sunt aut facere repellat provident...
  });

// ❌ Wrong — data is a Response object, not the JSON body
fetch(url).then(data => console.log(data.title));

// ✅ Correct — parse first, then read properties
fetch(url)
  .then(res => res.json())
  .then(data => console.log(data.title));

async function getUser() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
    const user = await response.json();
    console.log(user.name);   // Output: Leanne Graham
  } catch (error) {
    console.error("Error:", error.message);
  }
}

getUser();

async function createPost() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",                        // HTTP method
    headers: {
      "Content-Type": "application/json"   // Tell the server: "I'm sending JSON"
    },
    body: JSON.stringify({                 // Convert JS object to JSON string
      title: "Lagos Tech Meetup",
      body: "An amazing event for developers in Ikeja.",
      userId: 1
    })
  });

  const newPost = await response.json();
  console.log(newPost.id);       // Output: 101 (fake server echoes the new ID)
  console.log(newPost.title);    // Output: Lagos Tech Meetup
}

createPost();

async function safeGet(url) {
  const response = await fetch(url);

  // ❌ This is NOT automatically thrown
  if (!response.ok) {
    throw new Error(`HTTP Error: ${response.status}`);
  }

  return response.json();
}

safeGet("https://jsonplaceholder.typicode.com/users/9999")
  .then(data => console.log(data))
  .catch(err => console.error(err.message));
// Output: HTTP Error: 404

// Fetching currency exchange rates
async function getNairaRate() {
  const response = await fetch("https://api.exchangerate-api.com/v4/latest/USD");
  const data = await response.json();

  const nairaRate = data.rates.NGN;
  console.log(`1 USD = ₦${nairaRate}`);
  // Output: 1 USD = ₦1590.00 (rate at time of request)
}

getNairaRate();

// Check if the browser supports Geolocation
if ("geolocation" in navigator) {
  console.log("Geolocation is supported!");
} else {
  console.log("Your browser doesn't support Geolocation.");
}

navigator.geolocation.getCurrentPosition(
  successCallback,   // Called when location is found
  errorCallback,     // Called when something goes wrong
  options            // Optional configuration object
);

function onSuccess(position) {
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
  const accuracy = position.coords.accuracy; // metres

  console.log(`Latitude: ${lat}`);       // e.g. 6.4550
  console.log(`Longitude: ${lon}`);      // e.g. 3.3841
  console.log(`Accuracy: ±${accuracy}m`); // e.g. ±15m
}

function onError(error) {
  switch (error.code) {
    case 1: console.error("Permission denied by user"); break;
    case 2: console.error("Position unavailable (GPS failed)"); break;
    case 3: console.error("Timeout — took too long to get location"); break;
  }
}

navigator.geolocation.getCurrentPosition(onSuccess, onError);

position
  ├── coords.latitude           → Decimal degrees (e.g. 6.4550)
  ├── coords.longitude          → Decimal degrees (e.g. 3.3841)
  ├── coords.altitude           → Metres above sea level (or null)
  ├── coords.accuracy           → Accuracy of lat/lon in metres
  ├── coords.altitudeAccuracy   → Accuracy of altitude in metres (or null)
  ├── coords.heading            → Direction of travel in degrees (or null)
  ├── coords.speed              → Speed in metres/second (or null)
  └── timestamp                 → Unix timestamp of when position was acquired

const options = {
  enableHighAccuracy: true,   // Use GPS chip (drains battery more, more accurate)
  timeout: 10000,             // Max milliseconds to wait (10 seconds)
  maximumAge: 60000           // Accept a cached result up to 60 seconds old
};

navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

// Start watching
const watchId = navigator.geolocation.watchPosition(
  position => {
    const { latitude, longitude } = position.coords;
    console.log(`Moving to: ${latitude}, ${longitude}`);
    // Update a map marker here in a real app
  },
  error => console.error(error.message)
);

// Stop watching after 30 seconds
setTimeout(() => {
  navigator.geolocation.clearWatch(watchId);
  console.log("Stopped tracking.");
}, 30000);

navigator.geolocation.getCurrentPosition(position => {
  const { latitude, longitude } = position.coords;

  // Build a Google Maps URL — opens in any browser
  const mapsUrl = `https://www.google.com/maps?q=${latitude},${longitude}`;
  console.log("Open your location:", mapsUrl);
  // Output: https://www.google.com/maps?q=6.455,3.384
});

// ✅ Always check for support before calling
if (!navigator.geolocation) {
  showFallbackUI(); // Show a manual address form
  return;
}

// ✅ Always handle errors gracefully
navigator.geolocation.getCurrentPosition(success, error => {
  if (error.code === 1) {
    alert("Please enable location access to use this feature.");
  }
});

// ✅ Never use enableHighAccuracy when precision isn't needed
// It drains the user's battery unnecessarily

// Go back one page (same as clicking ←)
history.back();

// Go forward one page (same as clicking →)
history.forward();

// Go back 2 pages
history.go(-2);

// Go forward 3 pages
history.go(3);

// Reload the current page
history.go(0);

// How many entries are in the history stack?
console.log(history.length);
// Output: 5 (for example, if you visited 5 pages)

history.pushState(stateObject, title, url);

// User is on: https://myapp.com/home

history.pushState({ page: "products" }, "", "/products");
// URL is now: https://myapp.com/products
// Page did NOT reload — only the URL changed

history.pushState({ page: "phone" }, "", "/products/phone");
// URL is now: https://myapp.com/products/phone
// Still no reload

console.log(history.length); // Increased by 2

// Use case: redirecting a user after login without leaving the login page in history
history.replaceState({ page: "dashboard" }, "", "/dashboard");
// URL changed, but pressing Back won't go back to /login

window.addEventListener("popstate", function(event) {
  console.log("Navigation happened!");
  console.log("State:", event.state);
  // event.state is whatever you passed to pushState/replaceState

  // In a real SPA, you'd render the correct component here
  if (event.state && event.state.page === "products") {
    renderProductsPage();
  }
});

// Simulate navigating to a products page
history.pushState({ page: "products" }, "", "/products");

// When user presses Back, popstate fires with { page: "products" }

// A very basic client-side router using the History API
const routes = {
  "/":         () => renderHome(),
  "/about":    () => renderAbout(),
  "/contact":  () => renderContact()
};

function navigate(path) {
  history.pushState({ path }, "", path);
  routes[path]?.();
}

window.addEventListener("popstate", (e) => {
  const path = e.state?.path || "/";
  routes[path]?.();
});

// Example: clicking a nav link
document.getElementById("about-link").addEventListener("click", (e) => {
  e.preventDefault();          // Don't do a real page navigation
  navigate("/about");          // Use our SPA router instead
});

document.addEventListener("pointerdown", function(event) {
  console.log(event.pointerId);    // Unique ID for this pointer (useful for multi-touch)
  console.log(event.pointerType);  // "mouse", "touch", or "pen"
  console.log(event.clientX);      // X coordinate in the viewport
  console.log(event.clientY);      // Y coordinate in the viewport
  console.log(event.pressure);     // 0–1 (stylus/touch pressure; 0 for mouse)
  console.log(event.width);        // Contact area width (touch)
  console.log(event.height);       // Contact area height (touch)
  console.log(event.isPrimary);    // true = first/main touch point in multi-touch
});

const canvas = document.getElementById("drawCanvas");

canvas.addEventListener("pointerdown", (e) => {
  console.log(`Drawing started by: ${e.pointerType}`);
  // Output: "Drawing started by: mouse"   (on laptop)
  // Output: "Drawing started by: touch"   (on phone)
  // Output: "Drawing started by: pen"     (on Surface/iPad with stylus)
});

canvas.addEventListener("pointermove", (e) => {
  if (e.buttons > 0) {  // Only draw while button/finger is pressed
    console.log(`Drawing at: ${e.clientX}, ${e.clientY}`);
  }
});

canvas.addEventListener("pointerup", (e) => {
  console.log("Drawing stopped.");
});

const slider = document.getElementById("slider");

slider.addEventListener("pointerdown", (e) => {
  // Lock all pointer events to this element
  slider.setPointerCapture(e.pointerId);
});

slider.addEventListener("pointermove", (e) => {
  // This fires even if the mouse has moved outside the slider
  console.log("Slider value:", e.clientX);
});

slider.addEventListener("pointerup", (e) => {
  // Release the capture
  slider.releasePointerCapture(e.pointerId);
});

let activePointers = new Map();

canvas.addEventListener("pointerdown", (e) => {
  activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
  console.log(`Active touches: ${activePointers.size}`);
});

canvas.addEventListener("pointerup", (e) => {
  activePointers.delete(e.pointerId);
  console.log(`Active touches: ${activePointers.size}`);
});

// When 2 touches are active, you can detect pinch-to-zoom, rotate, etc.

// Prevent scrolling/zooming when touching the canvas
canvas.addEventListener("touchstart", e => e.preventDefault(), { passive: false });

// Or even better — use CSS to disable it entirely for a specific element:
// canvas { touch-action: none; }

// Store a value
storage.setItem("key", "value");

// Read a value
const value = storage.getItem("key");

// Remove one item
storage.removeItem("key");

// Clear ALL items in this storage
storage.clear();

// Number of items stored
console.log(storage.length);

// Get the key name at a specific index
const keyName = storage.key(0);

// --- Saving data ---
localStorage.setItem("username", "Tunde");
localStorage.setItem("city", "Lagos");
localStorage.setItem("theme", "dark");

// --- Reading data ---
const username = localStorage.getItem("username");
console.log(username);   // Output: Tunde

// If a key doesn't exist, getItem returns null
const missing = localStorage.getItem("nonexistent");
console.log(missing);    // Output: null

// --- Removing data ---
localStorage.removeItem("theme");
console.log(localStorage.getItem("theme")); // Output: null

// --- Count items ---
console.log(localStorage.length); // Output: 2 (username, city remain)

// --- Iterate all keys ---
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, "=", localStorage.getItem(key));
}
// Output:
// username = Tunde
// city = Lagos

// ❌ Wrong — stores "[object Object]" not the actual data
const user = { name: "Babatunde", age: 28 };
localStorage.setItem("user", user);
console.log(localStorage.getItem("user")); // Output: [object Object]

// ✅ Correct — serialize first
localStorage.setItem("user", JSON.stringify(user));

// ✅ Correct — parse when reading back
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // Output: Babatunde
console.log(savedUser.age);  // Output: 28

const recentSearches = ["iPhone 15", "Samsung S24", "MacBook Air"];
localStorage.setItem("searches", JSON.stringify(recentSearches));

const loaded = JSON.parse(localStorage.getItem("searches"));
console.log(loaded[0]); // Output: iPhone 15
console.log(loaded.length); // Output: 3

// Store data for this tab session only
sessionStorage.setItem("cartStep", "payment");
sessionStorage.setItem("orderId", "ORD-2024-08871");

// Read it
console.log(sessionStorage.getItem("orderId")); // Output: ORD-2024-08871

// When the tab is closed, ALL of this is wiped automatically

// In Tab 2, listening for changes made by Tab 1:
window.addEventListener("storage", function(event) {
  console.log("Key changed:", event.key);
  console.log("Old value:", event.oldValue);
  console.log("New value:", event.newValue);
  console.log("Changed by URL:", event.url);
});

// In Tab 1:
localStorage.setItem("theme", "light");
// Tab 2 immediately logs:
// Key changed: theme
// Old value: dark
// New value: light

function storageAvailable(type) {
  let storage;
  try {
    storage = window[type];
    const testKey = "__storage_test__";
    storage.setItem(testKey, testKey);
    storage.removeItem(testKey);
    return true;
  } catch (e) {
    return false;
  }
}

if (storageAvailable("localStorage")) {
  console.log("localStorage is available!");
} else {
  console.log("Use cookies or another fallback.");
}

<form id="registrationForm">
  <input id="name"     type="text"     required minlength="2" maxlength="50">
  <input id="email"    type="email"    required>
  <input id="phone"    type="tel"      pattern="[0-9]{11}" title="Enter 11 digits">
  <input id="age"      type="number"   min="18" max="100">
  <input id="website"  type="url">
  <button type="submit">Register</button>
</form>

const emailInput = document.getElementById("email");
emailInput.value = "not-an-email";

// validity — A ValidityState object with boolean flags
console.log(emailInput.validity.valid);        // false
console.log(emailInput.validity.typeMismatch); // true  (wrong type)
console.log(emailInput.validity.valueMissing); // false (value was provided)

// validationMessage — The browser's built-in error message
console.log(emailInput.validationMessage);
// Output: "Please include an '@' in the email address."

// willValidate — true if this element participates in validation
console.log(emailInput.willValidate); // true

// checkValidity() — true if valid, false if not (and fires 'invalid' event)
console.log(emailInput.checkValidity()); // false

const input = document.getElementById("age");
input.value = "15";

const v = input.validity;

console.log(v.valueMissing);    // true if required but empty
console.log(v.typeMismatch);    // true if value doesn't match type (e.g. "abc" in type="email")
console.log(v.patternMismatch); // true if value doesn't match pattern attribute
console.log(v.tooLong);         // true if value exceeds maxlength
console.log(v.tooShort);        // true if value is below minlength
console.log(v.rangeUnderflow);  // true if number < min
console.log(v.rangeOverflow);   // true if number > max
console.log(v.stepMismatch);    // true if value doesn't match step
console.log(v.badInput);        // true if browser can't convert value
console.log(v.customError);     // true if setCustomValidity() was used
console.log(v.valid);           // true if ALL of the above are false

const phoneInput = document.getElementById("phone");

phoneInput.addEventListener("input", function() {
  if (this.value.length !== 11) {
    // Set a custom error — this also makes validity.customError = true
    this.setCustomValidity("Phone number must be exactly 11 digits (e.g. 08012345678)");
  } else {
    // Clear the custom error — restores normal validation
    this.setCustomValidity("");
  }
});

const form = document.getElementById("registrationForm");

document.getElementById("checkBtn").addEventListener("click", function() {
  // This checks ALL fields and shows native browser validation UI (red outline, tooltip)
  const isValid = form.reportValidity();

  if (isValid) {
    console.log("Form is valid! Ready to submit.");
  } else {
    console.log("Form has errors. Fix them first.");
  }
});

const form = document.getElementById("registrationForm");

form.addEventListener("submit", function(e) {
  e.preventDefault(); // Prevent browser's default submission

  const name = document.getElementById("name");
  const email = document.getElementById("email");
  const phone = document.getElementById("phone");
  let isFormValid = true;

  // Clear previous custom errors
  [name, email, phone].forEach(field => field.setCustomValidity(""));

  // Custom rule: name must not contain numbers
  if (/\d/.test(name.value)) {
    name.setCustomValidity("Abeg, name no fit contain numbers.");
    isFormValid = false;
  }

  // Use built-in email validation
  if (!email.validity.valid) {
    email.setCustomValidity("Enter valid email address.");
    isFormValid = false;
  }

  // Custom phone check
  if (!/^0[7-9][01]\d{8}$/.test(phone.value)) {
    phone.setCustomValidity("Enter valid Nigerian number (e.g. 08012345678).");
    isFormValid = false;
  }

  if (isFormValid) {
    console.log("Form submitted successfully!");
    form.submit();
  } else {
    form.reportValidity(); // Show all custom error messages
  }
});

Main Thread (UI)                Worker Thread (Background)
     |                                    |
     |---[postMessage("start")]---------> |
     |                          [does heavy work]
     |<--[postMessage(result)]----------- |
     |                                    |
   (UI stays responsive)        (computation done!)

// Create the worker — it loads from a separate JS file
const worker = new Worker("worker.js");

// Send a message TO the worker
worker.postMessage({ task: "heavyCalc", input: 1000000 });

// Receive a message FROM the worker
worker.onmessage = function(event) {
  console.log("Worker result:", event.data);
  // Output: Worker result: { sum: 500000500000 }
};

// Handle errors from the worker
worker.onerror = function(error) {
  console.error("Worker error:", error.message);
};

// Listen for messages from the main thread
self.onmessage = function(event) {
  const { task, input } = event.data;

  if (task === "heavyCalc") {
    let sum = 0;
    for (let i = 1; i <= input; i++) {
      sum += i;  // Adds 1 + 2 + 3 + ... + 1,000,000
    }
    // Send the result back to the main thread
    self.postMessage({ sum });
  }
};

// From the main thread — immediately stops the worker
worker.terminate();
console.log("Worker has been stopped.");

// From inside the worker itself
self.close();

// Inside worker.js
importScripts("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js");

// Now lodash is available inside this worker
const result = _.chunk([1,2,3,4,5,6], 2);
self.postMessage(result);
// Sends: [[1,2],[3,4],[5,6]]

// In main thread (multiple tabs can do this)
const sharedWorker = new SharedWorker("shared-worker.js");

sharedWorker.port.postMessage("Hello from tab!");

sharedWorker.port.onmessage = (e) => {
  console.log("Shared worker says:", e.data);
};

sharedWorker.port.start(); // Must call start() for SharedWorker

// shared-worker.js
self.onconnect = function(e) {
  const port = e.ports[0];
  port.onmessage = function(event) {
    console.log("Received from a tab:", event.data);
    port.postMessage("All tabs acknowledged.");
  };
  port.start();
};

// main.js
const worker = new Worker("sort-worker.js");

// Generate 500,000 random numbers
const bigArray = Array.from({ length: 500000 }, () => Math.random() * 1000000);

console.time("Sort");
worker.postMessage(bigArray);

worker.onmessage = (e) => {
  console.timeEnd("Sort");
  console.log("First 5 sorted:", e.data.slice(0, 5));
  // Output: Sort: 230ms
  // Output: First 5 sorted: [0.00012, 0.00045, 0.0012, ...]
};

// sort-worker.js
self.onmessage = function(e) {
  const sorted = e.data.sort((a, b) => a - b);
  self.postMessage(sorted);
};

// A tiny SPA shell — before adding any features
const app = {
  currentSection: "home",

  navigate(section) {
    history.pushState({ section }, "", `/${section}`);
    this.render(section);
  },

  render(section) {
    document.getElementById("content").innerHTML =
      `<h2>${section.toUpperCase()}</h2><p>Loading ${section} content...</p>`;
  }
};

window.addEventListener("popstate", e => app.render(e.state?.section || "home"));
app.render("home");

1. Create index.html with nav links: Home | Announcements | Map | Report | Whiteboard
2. Set up a router using History API (pushState + popstate)
3. Create render functions that swap content without reload
4. Add a theme toggle (light/dark) that saves to localStorage
5. On page load, read theme from localStorage and apply it
6. Listen for the storage event to sync theme across tabs

// Fetch announcements and find the 3 most recent ones in a worker
const worker = new Worker("filter-worker.js");

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(r => r.json())
  .then(posts => {
    worker.postMessage({ posts, limit: 3 });
  });

worker.onmessage = e => {
  console.log("Top 3 announcements:", e.data);
};

1. Fetch 20 posts from JSONPlaceholder as "community announcements"
2. Pass them to a Web Worker that:
   - Sorts by id (descending)
   - Filters to only posts with titles longer than 40 characters
   - Returns the top 5 results
3. Display results on the Announcements page
4. Add a Geolocation button on the Map page:
   - Shows "Finding your location..." while waiting
   - Displays lat/lon when found
   - Shows the nearest of 5 hardcoded Surulere landmarks
5. Handle all Geolocation error codes gracefully

// Pointer-based whiteboard preview
const canvas = document.getElementById("whiteboard");
const ctx = canvas.getContext("2d");
let isDrawing = false;

canvas.style.touchAction = "none"; // Prevent scroll on touch

canvas.addEventListener("pointerdown", e => {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
});

canvas.addEventListener("pointermove", e => {
  if (!isDrawing) return;
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
});

canvas.addEventListener("pointerup", () => isDrawing = false);

1. Build the Report a Problem form with fields:
   - Name (required, no digits, minlength 2)
   - Email (required, type="email")
   - Nigerian phone (pattern: ^0[7-9][01]\d{8}$)
   - Problem description (required, minlength 20)
   - Category (required: "Road | Light | Water | Security")
   All with setCustomValidity() messages in plain English/Pidgin

2. On valid submit: save the report to localStorage and confirm to user

3. Build the Whiteboard section:
   - Canvas element with pointer events (works on mouse AND touch)
   - Colour picker for pen colour
   - Pen size slider
   - Clear button
   - Save button (downloads canvas as PNG)
   - Show pointer type ("You are drawing with: mouse/touch/pen")

4. Add a localStorage-based history of submitted reports:
   - Show last 5 reports on the Map page as "Known Issues"

5. Polish: add loading spinners for all async operations