Web API is a kind of power that allow developers to interact with various browser features, manipulate the Document Object Model (DOM), and perform tasks related to user interface, networking, storage, and more.

DOM API (Document Object Model):

The DOM API allows developers to interact with the HTML and XML structure of a document. It provides methods and properties to manipulate, create, or delete elements on a webpage dynamically.

// creating new button element
let btn = document.createElement("button")
btn.innerHTML = "click"
btn.classList("btn")

// removing class property
btn.classList("")

// accesing document
let id = document.getElementById("id")
id.innerHTML = "Header"

Event API:

The Event API allows developers to work with events such as mouse clicks, keyboard inputs, and other user interactions. Event listeners can be used to handle these events.

let btn = document.getElementById("btn")
btn.addEventListener("click", () => {
  console.log("button is clicked");
})

here button is get via its id and then adding an event listener and attaching a callback function with it.

LocalStorage and SessionStorage API:

These APIs provide a way to store key-value pairs locally in the browser, either for the duration of a page session (sessionStorage) or persistently (localStorage).

const username = localStorage.getItem('username');

console.log(username); // Output: john_doe

// Clearing all data from localStorage
localStorage.clear();

// Retrieving data from sessionStorage
const username = sessionStorage.getItem('username');

console.log(username); // Output: john_doe


// Clearing all data from sessionStorage
sessionStorage.clear();

The Geolocation API is a web API provided by modern web browsers that allows web applications to access the geographical location information of a user's device. This information includes latitude, longitude, altitude, accuracy, and other details related to the device's location.

Canvas

The Canvas API in HTML5 provides a way for developers to draw and manipulate graphics on a webpage dynamically. It allows you to create various shapes, paths, text, and images within an HTML document. The <canvas> element serves as the drawing area, and JavaScript is used to interact with the Canvas API to render graphics.

// Get the canvas element and its context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Drawing a rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 80);

// Drawing a circle
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(300, 100, 30, 0, 2 * Math.PI);
ctx.fill();

// Drawing text
ctx.fillStyle = 'green';
ctx.font = '20px Arial';
ctx.fillText('Hello, Canvas!', 150, 180);

These APIs, among others, empower developers to create dynamic and interactive web applications by providing access to various browser functionalities.