JavaScript Clipboard Tool Project part-3

 

Copy All Sections with One Click (JavaScript + Toast)

নিচের উদাহরণে একটি textarea ও একটি Copy All বাটন থাকবে। ক্লিক করলেই পুরো টেক্সট কপি হবে এবং স্ক্রিনে একটি নোটিফিকেশন দেখাবে।


<textarea id="allText" rows="6" style="width:100%;">
এই সব টেক্সট এক ক্লিকে কপি হবে।
✅ JavaScript দিয়ে Clipboard API ব্যবহার করা হয়েছে।
✅ Copy All Sections ফিচার যুক্ত করা হয়েছে।
</textarea>

<button onclick="copyAllText()" style="margin-top:10px;">Copy All</button>
ব্যাখ্যা:
<textarea> ট্যাগের মধ্যে কন্টেন্ট রাখা হয়েছে যেটা কপি হবে।
Copy All বাটনে ক্লিক করলে copyAllText() ফাংশন চালু হবে।

<script>
function copyAllText() {
  const textarea = document.getElementById("allText");

  navigator.clipboard.writeText(textarea.value)
    .then(() => {
      showToast("✅ সব কিছু কপি হয়েছে!");
    })
    .catch(err => {
      alert("❌ সমস্যা হয়েছে: " + err);
    });
}

function showToast(message) {
  const toast = document.createElement("div");
  toast.innerText = message;
  toast.style.cssText = `
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #00796b;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    font-weight: bold;
    z-index: 9999;
  `;
  document.body.appendChild(toast);

  setTimeout(() => {
    toast.remove();
  }, 2500);
}
</script>
ব্যাখ্যা:
copyAllText() ফাংশন Clipboard API দিয়ে টেক্সট কপি করে।
➤ সফল হলে showToast() কল হয় এবং একটি temporary toast দেখায়।
setTimeout দিয়ে ২.৫ সেকেন্ড পরে নোটিফিকেশনটি মুছে ফেলা হয়।

আপনি এটি কীভাবে ব্যবহার করতে পারেন?

এই কোডটি আপনার WordPress HTML Editor-এ বসালেই আপনি পাবেন একটি কার্যকর Copy All ফিচারসহ টেক্সট কপি করার অপশন। এই ফিচারটি বড় টেক্সট বা কোড ব্লক কপি করার ক্ষেত্রে খুবই উপযোগী।

 

Leave a Reply