Banyak Tombol Copy (Salin) ke Clipboard dari CODE

Setelah sebelumnya membuat Tombol Copy (Salin) ke Clipboard dari PRE - CODE hanya dengan satu tombol dan satu input yang dicopy, maka kali ini, mencoba membuat program dengan fungsi yang sama, namun untuk banyak tombol dan masing-masing code yang di copy. Langsung saja, berikut ini adalah contohnya. Sekaligus, yang sebagai contoh adalah, kode untuk membuat kode ini. Anda bisa copas untuk dipasang di blog anda.

Berikut ini contoh kode HTML, CSS, dan JavaScript untuk menyalin kode dari beberapa elemen <code> dan memberikan tombol "Salin Kode" untuk setiap elemen tersebut:

Contoh Copy Kode

  
  
    CONTOH CODE YANG DI SALIN 1
CSS :
<style>
.code-section {
 background-color: #f5f5f5;
 border: 1px solid #ddd;
 border-radius: 3px;
 font-size: 14px;
 line-height: 1.5;
 padding: 10px;
 white-space: pre-wrap;
 word-wrap: break-word;
}
code {
font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 3px;
  color: #4725ce;
}

.copy-button {
  background-color: #4285F4;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.copy-button:hover {
  background-color: #3367D6;
}

.copy-button:focus {
  outline: none;
}
</style>  

  
  
    CONTOH CODE YANG DI SALIN 2
HTML :

<h1>Contoh Copy Kode</h1>
<br>

<div class="code-section">
  <button class="copy-button">Salin Kode</button>
  <code>
    CONTOH CODE YANG DI SALIN 1

  </code>
</div>

<div class="code-section">
  <button class="copy-button">Salin Kode</button>
  <code>
    CONTOH CODE YANG DI SALIN 2

  </code>
</div>

<div class="code-section">
  <button class="copy-button">Salin Kode</button>
  <code>
    CONTOH CODE YANG DI SALIN 3

  </code>
</div>
  

  
  
    CONTOH CODE YANG DI SALIN 3
 SCRIPT :
<script>
const copyButtons = document.querySelectorAll(".copy-button");

copyButtons.forEach(button => {
  button.addEventListener("click", () => {
    const codeOutput = button.nextElementSibling;
    const code = codeOutput.textContent.trim();
    navigator.clipboard.writeText(code);
    button.textContent = "Kode telah berhasil disalin!";
    setTimeout(() => {
      button.textContent = "Salin Kode";
    }, 2000);
  });
});
</script>
  

Fungsi dari kode di atas adalah sebagai berikut:

HTML: terdapat tiga elemen <div> yang masing-masing memiliki satu elemen <button> dan satu elemen <code>. Elemen <button> akan digunakan untuk menyalin isi dari elemen <code> yang berada di dalam <div> yang sama.
CSS: menentukan style dari elemen <div> dan <button> untuk memperindah tampilan tombol "Salin Kode".
JavaScript: ketika tombol "Salin Kode" pada suatu elemen <div> diklik, program akan menyalin isi dari elemen <code> yang berada di dalam <div> tersebut ke clipboard. Setelah itu, teks pada tombol "Salin Kode" akan berubah menjadi "Kode telah berhasil disalin!" selama 2 detik sebelum kembali lagi ke teks aslinya.