Web Share API Using JavaScript

 

Welcome to the Codewithrandom blog. In this blog, We learn how to create a Web Share API Using JavaScript. We use HTML for baisc structure and create a button for sharing and Using Css we give a little bit of styling project. The main code is JavaScript for the Web Share API Project.

I hope you enjoy our blog let’s start with a basic html structure for a Web Share API.

HTML Code For Web Share API

<button id="btn">Demo of Web Share API</button>

ADVERTISEMENT

There is all html code for the Web Share API. Now, you can see output without Css and JavaScript, then we write Css and JavaScript for Web Share API.

Portfolio Website using HTML and CSS (Source Code)

Output

 

CSS Code For Web Share API

:root {
--background-color: #212121;
--text-color: #fff;
--font: sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--background-color);
font-family: var(--font);
color: var(--text-color);
}
#btn {
padding: 0.7rem 1.5rem;
border: none;
font-size: 1em;
border-radius: 5px;
cursor: pointer;
margin: 20px;
transition: 100ms ease-in-out;
background-color: #2ea44f;
color: white;
border: 2px solid #2ea44f;
}
#btn:hover {
background-color: transparent;
color: #2ea44f;
}

Now we have completed our Styling Css section. Here is our updated output HTML + CSS.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Output

JavaScript Code For Web Share API

const btn = document.getElementById("btn");
// function for web share api
function webShareAPI(header, description, link) {
navigator
.share({
title: header,
text: description,
url: link
})
.then(() => console.log("Successful share"))
.catch((error) => console.log("Error sharing", error));
}
if (navigator.share) {
// Show button if it supports webShareAPI
btn.style.display = "block";
btn.addEventListener("click", () =>
webShareAPI("header", "description", "www.url.com")
);
} else {
// Hide button if it supports webShareAPI
btn.style.display = "none";
console.error("Your Browser doesn't support Web Share API");
document.write("Your Browser doesn't support Web Share API");
}

Final Output Web Share API Using JavaScript

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Now we have completed the Web Share API Project Using JavaScript. Here is our updated output with Html, Css, and JavaScript. I hope you like the Web Share API. You can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create a  Web Share API Using JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.

Written by – Code With Random/Anki