7 JavaScript Web APIs to build Futuristic Websites you didn't know🤯
Tags: webdev, javascript, html, beginners
Published: 2023-02-19 07:38:18

With the rapidly changing technologies, developers are being provided with incredible new **tools** and **APIs**. But it has been seen that out of the **100+ APIs**, only **5%** of them are actively used by developers.

Let's take a look at some of the useful **Web APIs** that can help you skyrocket your website to the moon!🌕🚀

## 1. Screen Capture API

The **Screen Capture API**, as the name suggests, allows you to capture the contents of a screen, making the process of building a **screen recorder** a piece of cake.

You need a **video** element to display the captured screen. The **start** button will start the **screen capture**.

```html
<video id="preview" autoplay>
  Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>
```

```js
const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");

async function startRecording() {
  previewElem.srcObject =
    await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
}

startBtn.addEventListener("click", startRecording);
```

## 2. Web Share API

The **Web Share API** allows you to share **text**, **links**, and **even files** from a **web page to other apps** installed on the device.

```js
async function shareHandler() {
  navigator.share({
    title: "Tapajyoti Bose | Portfolio",
    text: "Check out my website",
    url: "https://tapajyoti-bose.vercel.app/",
  });
}
```

**NOTE:** To use the **Web Share API**, you need an interaction from the user. For example, a **button click** or a **touch event**.

## 3. Intersection Observer API

The **Intersection Observer API** allows you to **detect when an element enters or leaves the viewport**. This is exceptionally useful for implementing **infinite scroll**.

{% codepen https://codepen.io/ruppysuppy/pen/abBeZwj %}

**NOTE:** The demo uses **React** because of my personal preference, but you can use **any framework** or **vanilla JavaScript**.

## 4. Clipboard API

The **Clipboard API** allows you to **read and write data** to the **clipboard**. This is useful for implementing the **copy to clipboard** functionality.

```js
async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}
```

## 5. Screen Wake Lock API

Ever wondered how **YouTube** prevents the screen from being switched off while playing the video? Well, that's because of the **Screen Wake Lock API**.

```js
let wakeLock = null;

async function lockHandler() {
  wakeLock = await navigator.wakeLock.request("screen");
}

async function releaseHandler() {
  await wakeLock.release();
  wakeLock = null;
}
```

**NOTE:** You can only use the **Screen Wake Lock API** if the page is already visible on the screen. Otherwise, it would throw an error.

## 6. Screen Orientation API

The **Screen Orientation API** allows you to check the **current orientation** of the screen and even **lock it** to a specific orientation.

```js
async function lockHandler() {
  await screen.orientation.lock("portrait");
}

function releaseHandler() {
  screen.orientation.unlock();
}

function getOrientation() {
  return screen.orientation.type;
}
```

![orientation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hm5xubn1n982azfs43ls.jpg)

## 7. Fullscreen API

The **Fullscreen API** allows you to display an element or the entire page in **full screen**.

```js
async function enterFullscreen() {
  await document.documentElement.requestFullscreen();
}

async function exitFullscreen() {
  await document.exitFullscreen();
}
```

**NOTE:** To use the **Fullscreen API** too, you need an interaction from the user. 

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

Follow me on [Instagram](https://www.instagram.com/tapajyotib/) to check out what I am up to recently.

Follow my blogs for **bi-weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

   1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
   2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.