HTML API's That Every Developer Should Know

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}


I think this information is helpful to you.

 

Thanks for reading - Don't Forgot To Share & Comment

Any suggestion or queries please comment, our team will response asps.

 

You may like this :


         Best Chrome Extensions for Front End Developers - Part 2

         Best Chrome Extensions for Front End Developers

1 Comments

  1. 1xbet korean: Situs Slot Online | Bola88 & Bet365
    Situs online android 1xbet korean adalah poker online terpercaya หาเงินออนไลน์ yang sudah bandar slot Slot Online Pragmatic Play Indonesia. Slot Online Indonesia. Rating: 95% · 바카라사이트 ‎119,777 votes

    ReplyDelete
Previous Post Next Post