🌐 Day 36 — Web APIs & Browser Features

on

🌐 Day 36 — Web APIs & Browser Features

Hi Guys, Consistency is the key for success Welcome to Day 36 🌎 Today, you’ll see how JavaScript doesn’t work alone — it communicates with the Browser APIs to perform incredible tasks like accessing location, copying text, recognizing speech, and storing data.

🧠 1️⃣ What Are Web APIs?

Web APIs (Application Programming Interfaces) are built-in browser features that JavaScript can use to interact with your system — no external libraries needed.

  • 🗺️ Geolocation API
  • 🗂️ Clipboard API
  • 🎤 Speech Recognition API
  • 🎞️ Canvas API
  • 💾 Storage APIs

📍 2️⃣ Geolocation API

Lets you access the user’s current position — useful for maps, delivery apps, and weather widgets. 

navigator.geolocation.getCurrentPosition(
  (pos) => {
    console.log("Latitude:", pos.coords.latitude);
    console.log("Longitude:", pos.coords.longitude);
  },
  (err) => console.log("Error:", err.message)
);

📋 3️⃣ Clipboard API

Used to copy or read text from the clipboard. 

async function copyText() {
  await navigator.clipboard.writeText("Hello from JavaScript!");
  alert("Copied to clipboard!");
}

async function pasteText() {
  const text = await navigator.clipboard.readText();
  console.log("Pasted:", text);
}

🎤 4️⃣ Speech Recognition API

Available in Chrome’s webkitSpeechRecognition. It converts spoken words to text. 

const recognition = new webkitSpeechRecognition();
recognition.lang = "en-US";
recognition.start();

recognition.onresult = function(event) {
  console.log("You said:", event.results[0][0].transcript);
};

🎨 5️⃣ Canvas API

The Canvas API lets you draw graphics and animations on the browser. 

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 150, 100);

💾 6️⃣ Storage APIs

Store user data locally using LocalStorage or SessionStorage. 

localStorage.setItem("username", "Rahul");
console.log(localStorage.getItem("username"));

📦 7️⃣ Practice Task

  1. Use Geolocation to show your live location.
  2. Create a button that copies a quote using Clipboard API.
  3. Draw your name on a Canvas element.

🎯 Summary

Web APIs bridge the gap between JavaScript and the browser’s native capabilities. From location to storage — these features make your websites feel alive and intelligent. Tomorrow, you’ll connect to real web servers using Fetch API and handle JSON data.

Comments

Post a Comment