Browser APIs are essential tools for creating interactive and user-friendly web applications. Here, we explore several key built-in APIs in JavaScript, along with practical use cases and examples. #### **1. Document Object Model (DOM) API** The DOM API allows developers to dynamically interact with and manipulate HTML elements. - **Key Features:** - Access and modify elements in real-time. - Handle user events like clicks and input changes. ```javascript const heading = document.querySelector("h1"); heading.textContent = "Updated Heading"; document.querySelector("button").addEventListener("click", () => { alert("Button clicked!"); }); ``` #### **2. Notification API** The Notification API enables web applications to send desktop notifications to users. - **Key Features:** - Engage users with timely updates. - Requires user permission. ```javascript if ("Notification" in window) { Notification.requestPermission().then(permission => { if (permission === "granted") { new Notification("Hello, this is a test notification!"); } }); } ``` #### **3. Geolocation API** The Geolocation API provides the user's geographical location. - **Key Features:** - Fetch latitude and longitude. - Useful for location-based services. ```javascript if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(position => { console.log(`Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`); }); } ``` #### **4. Local Storage API** The Local Storage API is used to store data in the browser, persisting across sessions. - **Key Features:** - Store and retrieve simple key-value pairs. - Data persists even after browser closure. ```javascript localStorage.setItem("username", "JohnDoe"); console.log(localStorage.getItem("username")); ``` #### **5. Clipboard API** The Clipboard API enables copying and pasting content programmatically. - **Key Features:** - Write to and read from the system clipboard. ```javascript navigator.clipboard.writeText("Hello, World!").then(() => { console.log("Text copied to clipboard"); }); ``` #### **6. Fetch API** The Fetch API simplifies making HTTP requests for data. - **Key Features:** - Supports promises for cleaner syntax. - Handles various HTTP methods. ```javascript fetch("https://api.example.com/data") .then(response => response.json()) .then(data => { console.log(data); }) .catch(error => { console.error("Error fetching data:", error); }); ``` ### **Practical Projects with Built-In APIs** #### **1. Live Currency Converter** - Fetch exchange rates using a public API. - Dynamically update UI based on user input. #### **2. Weather App** - Use the Geolocation API to determine user location. - Fetch and display weather information using APIs like OpenWeatherMap. #### **3. Notification Reminder** - Utilize the Notification API to send reminders. - Use Local Storage to persist task data. #### **4. GitHub User Explorer** - Fetch user data from GitHub's API. - Display repositories and user details in a dynamic UI. --- This resource highlights the power of browser-native APIs, encouraging hands-on learning to build functional and interactive web applications.