HTML API's That Every Developer Should Know

What is HTML?

HTML - HyperText Markup Language

HTML Provides some basic elements to develop a user interface.

What is API?

API - Application Program Interface between two mediums like (computer to computer) or (computer - program).

Let see HTML API

1) Geolocation

Geolocation API helps to get accurate position users.

Geolocation API, you can get user position latitude and longitude.

Geolocation API, you can render the google map based on the position.

In the Geolocation API response, you can get these props.

coords.latitude
coords.longitude
coords.accuracy
coords.altitude
coords.altitudeAccuracy
coords.heading
coords.speed
timestamp

Example Code

Map.html

<button onclick="getCurrentPosition()">Get Current Position</button>

<div id="geo-location">
// reponse will render here
</div>{codeBox}

Map.js

var glElement = document.getElementById("geo-location");
function getCurrentPosition() {
if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(printPosition);
} else {
   glElement.innerHTML = "Geolocation is not supported by this browser.";
}
}

function printPosition(positionObj) {
glElement.innerHTML =
   "Latitude: " + positionObj.coords.latitude + "<br>Longitude: " + positionObj.coords.longitude;
}~~{codeBox}~~

2) Drag and Drop

Drag and Drop API helps to drag and drop any HTML elements into any HTML element.

Drag and Drop is one of the most useful features on the user end.

Example Code

<!DOCTYPE html>
<html>
<head>
    <style>
      #dropArea {
        width: 200px;
        height: 70px;
        padding: 10px;
        border: 1px solid #aaaaaa;
        background: #efefef;
        margin-bottom: 30px;
      }

      #dragElement {
        width: 150px;
        padding: 20px;
        background-color: purple;
        color: white;
      }
    </style>
    <script>
      function allowDrop(ev) {
        ev.preventDefault();
      }

      function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }

      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
</head>
<body>
    <p>Drag the Attractive Aurora Text into the Drop Area :</p>

    <div id="dropArea" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <div id="dragElement" draggable="true" ondragstart="drag(event)">
      Attractive Aurora
    </div>
</body>
</html>~~{codeBox}~~

3)Web Storage

Web storage is not like cookies both session & local storage are stored at the client side.

Web Storage is a store the data based on origin, protocol, and domain.

Same-origin or protocol or domain users only can be able to view or edit storage information.

HTML web storage offers two types of object storage methods

Local Storage
Session Storage

Local Storage:

Local storage data has no expiration date until you manually clear them.

Local storage data are browser-based you can access them from any tab in the browser of the same origin.

The local storage limit is high compare to others.

Example Code:

Local Storage

// Set Localstorage

localStorage.setItem("name", "attractiveaurora");

// Set Localstorage

localStorage.getItem("name");

// Remove Localstorage

localStorage.removeItem("name");~~{codeBox}~~

Session Storage:

Session storage data are browser tab-based.

Session Storage same as local storage, but session storage gets expired when closing the browser tab.

Example Code:

Session Storage

// Set Sessionstorage

sessionStorage.setItem("name", "attractiveaurora");

// Set SessionStorage

sessionStorage.getItem("name");

// Remove SessionStorage

sessionStorage.removeItem("name");~~{codeBox}~~

4)Web Worker

Webworks one of the best HTML API perform a background task.

Web worker helps to run or execute your javascript script independently without affecting UI or HTML pages.

You can start, stop, terminate the web worker at any time.

Example Code:

Web work file - timer-webwork.js

function timeUpdater() {
const now = new Date()
postMessage(now);
setInterval("timeUpdater()",1000);
}

timeUpdater();~~{codeBox}~~

Web Worker

<html>
<body>
    <p>Server Time: <output id="result"></output></p>
    <button onclick="startWorker()">Start Worker</button>
    <button onclick="stopWorker()">Stop Worker</button>

    <script>
      var webWorkerInstance;

      function startWorker() {
        if (typeof Worker !== "undefined") {
          if (typeof webWorkerInstance == "undefined") {
            webWorkerInstance = new Worker("timer-webwork.js"); // javascript file which you want run
          }
          webWorkerInstance.onmessage = function (event) {
            document.getElementById("result").innerHTML = event.data;
          };
        } else {
          document.getElementById("result").innerHTML =
            "Web Worker Not Support.";
        }
      }

      function stopWorker() {
        webWorkerInstance.terminate();
        webWorkerInstance = undefined;
      }
    </script>
</body>
</html>~~{codeBox}~~

5)SSE

SSE - Server-Sent Events.

SSE helps to update the web page when the server sent new data.

SSE same as a web socket but its a one-way message

Example

SSE File

var sseInstance = new EventSource("demo_sse.php");
sseInstance.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};{codeBox}

Code in PHP (demo_sse.php)

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>{codeBox}