What are the HTML5 APIs you know

Geolocation API – Where am I right now?

Gives the user’s approximate location (latitude & longitude) after permission.

Real-world example

• Google Maps showing your current location
• Swiggy / Zomato detecting your delivery area
• Ride apps auto-filling pickup location

            navigator.geolocation.getCurrentPosition((position) => {
            console.log(position.coords.latitude);
            console.log(position.coords.longitude);
            });
        

Output

            12.946281310438385
            77.70402513644764
        

NOTE:

Browser asks permission → user allows → location is shared.

Web Storage API (localStorage & sessionStorage) – Remember this for me

Stores data inside the browser, no server call required.

Real-world example

            localStorage.setItem('theme', 'dark');
            console.log(localStorage.getItem('theme'));
        

            sessionStorage.setItem('token', 'cjsdbcsbdcbskd0932093209bcdsncnsc');
            console.log(sessionStorage.getItem('token'));
        

Faster than cookies and more storage capacity.

Difference

Fetch API – Talk to the server

Makes HTTP requests (GET, POST, PUT, DELETE).

Real-world example

• Login form submission
• Fetching product list from backend
• Calling REST APIs in SPA apps

            fetch('http://localhost:3000/api/users')
            .then(res => res.json())
            .then(data => console.log(data));
        

NOTE:

Replaced old XMLHttpRequest

Canvas API – Draw on the browser

Allows drawing graphics, animations, charts, games.

Real-world example

• Online games
• Drawing apps
• Custom charts (before chart libraries existed)

            const canvas = document.getElementById('c');
            const ctx = canvas.getContext('2d');
            ctx.fillRect(10, 10, 100, 50);
        

NOTE:

Pixel-level control

Audio & Video API – Play media without plugins

Native support for audio/video playback.

Real-world example

• YouTube
• Online courses
• Video conferencing apps

NOTE:

No Flash needed anymore.

Drag and Drop API – Drag files or items naturally

Enables drag-and-drop interaction.

Real-world example

• Upload files by dragging
• Reordering tasks (Trello)
• Moving cards in dashboards

            
Drag me
        

NOTE:

Makes UI feel desktop-like.

Web Workers API – Do heavy work without freezing UI

Runs JavaScript in background threads.

Real-world example

• File processing
• Image compression
• Heavy calculations (banking, analytics)

            const worker = new Worker('worker.js');
            worker.postMessage('start');
        

NOTE:

UI stays responsive.

File API – Read files without uploading first

Access files selected by the user.

Real-world example

• Excel upload preview
• Resume upload validation
• Image preview before upload

            input.onchange = (e) => {
            const file = e.target.files[0];
            console.log(file.name);
            };
        

NOTE:

Matches your flat-file upload use cases perfectly.

History API – Control browser navigation

Manipulates browser history without reloading.

Real-world example

• Angular / React routing
• Back button without page reload

            history.pushState({}, '', '/dashboard');
        

NOTE:

Matches your flat-file upload use cases perfectly.

WebSocket API – Real-time two-way communication

Keeps a live connection between client & server.

Real-world example

• Chat apps
• Live stock prices
• Multiplayer games
• Live dashboards

            const socket = new WebSocket('ws://localhost:3000');
            ocket.onmessage = e => console.log(e.data);