Introduction:
In this tutorial, we’ll create a simple, effective copy-to-clipboard function using JavaScript. This feature is common on websites, enabling users to copy text with a single click—whether it’s for sharing code, email addresses, or other information. Our function will include an alert message that appears briefly to confirm the text has been copied successfully.
Things You Will Learn:
- Setting up a project folder structure for your web development project.
- Writing HTML, CSS, and JavaScript to create a basic copy-to-clipboard feature.
- Using the Clipboard API to copy text with JavaScript.
- Displaying a confirmation message with JavaScript and CSS.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather reading a blog post you can check out the video down below. Also subscribe to my YouTube channel where I post new tutorials every alternate day.
Project Folder Structure:
Before we start coding we take a look at the project folder structure. We start by creating a folder called – ‘Copy To Clipboard’. Inside this folder we have 3 files. These files are :
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Copy To Clipboard</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p id="text1">Here is some text to be copied</p>
<button onclick="copy('text1')">Copy</button>
<p id="text2">And here is another one</p>
<button onclick="copy('text2')">Copy</button>
<p id="alert">Text Copied</p>
<script src="script.js"></script>
</body>
</html>
CSS:
Now, let’s style the page. Copy the CSS code below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding: 20px;
}
p,
button {
font-size: 20px;
}
button {
background-color: #3d91f5;
color: #ffffff;
border: none;
margin: 10px 0 30px 0;
padding: 5px 20px;
outline: none;
cursor: pointer;
}
#alert {
width: 90%;
text-align: center;
background-color: #202020;
color: #ffffff;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 20px;
padding: 5px 0;
display: none;
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
function copy(copyId) {
let copyText = document.getElementById(copyId).innerText;
if (navigator.clipboard) {
navigator.clipboard
.writeText(copyText)
.then(() => {
document.getElementById("alert").style.display = "block";
setTimeout(function () {
document.getElementById("alert").style.display = "none";
}, 1000);
})
.catch((err) => {
console.error("Failed to copy text:", err);
});
} else {
console.error("Clipboard api not supported on this browser");
}
}
Conclusion:
Congratulations! You’ve successfully built an animated sidebar that toggles with a click, using HTML, CSS, and JavaScript. This project demonstrates how to use CSS transitions and JavaScript to create interactive UI components. You can now integrate this sidebar into your projects to enhance navigation and user experience.
