Article title
Enter article content to copy here...
HTML,CSS, JavaScript কফি বাটনে ক্লিক করে Code টি কপি করুন।
আপনার ওয়েব পেজে গিয়ে পেস্ট করুন এবং আপনার "Article Title" এবং "Enter artical content to copy here" পরিবর্তন করুন।
HTML,CSS,JavaScript
<!--GopalRockUnplugge Copy box container-->
<div class="copy-box">
<div class="copy-box__container">
<button class="copy-box__btn" title="Copy" onclick="copyText()">
<i class="far fa-copy"></i>
<span>Copy</span>
</button>
</div>
<div class="copy-box__article">
<h2 class="copy-box__article-title">Article title</h2>
<p class="copy-box__article-content">Enter article content to copy here...</p>
</div>
</div>
<script>
function copyText() {
// Select the text to be copied
var text = document.querySelector(".copy-box__article-content").textContent;
// Copy the text to the clipboard
navigator.clipboard.writeText(text);
// Display a notification
Swal.fire({
icon: "success",
title: "Text copied!",
text: "You can now paste it anywhere.",
showConfirmButton: false,
timer: 2000,
});
}
</script>
<style>
.copy-box {
background-color: #ffffff;
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
.copy-box__container {
display: flex;
justify-content: center;
align-items: center;
}
.copy-box__btn {
background-color: #000000;
color: #ffffff;
border: none;
cursor: pointer;
padding: 10px;
font-size: 16px;
font-weight: 400;
border-radius: 5px;
}
.copy-box__btn:hover {
background-color: #000000;
color: #ffffff;
border: none;
cursor: pointer;
padding: 10px;
font-size: 16px;
font-weight: 400;
border-radius: 5px;
}
.copy-box__article {
background-color: #ffffff;
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
.copy-box__article-title {
font-size: 20px;
font-weight: 600;
}
.copy-box__article-content {
font-size: 16px;
font-weight: 400;
}
</style>
<!--GopalRockUnplugge Copy box container-->
Website Development Course
Website Development Course
Website Development Course
