<div>
  
  <div class="form-group">
    <label for="exampleInputEmail1" class="bmd-label-floating">Text to be copied to clipboard!</label>
    <input type="text" class="to-copy form-control" id="exampleInputEmail1">
  </div>
  
  <fieldset>
    <button class="btn btn-raised btn-primary write-btn">Copy to clipboard</button>
    
    <button class=" btn btn-raised btn-info read-btn">Paste from clipboard</button>

  </fieldset>

<div>
  
  

<h3 class="clipboard-results"></h3>
body {
  padding: 20px;
}
const readBtn = document.querySelector('.read-btn');
const writeBtn = document.querySelector('.write-btn');

const resultsEl = document.querySelector('.clipboard-results');
const inputEl = document.querySelector('.to-copy');

readBtn.addEventListener('click', () => {
  navigator.clipboard.readText()
    .then(text => {
      resultsEl.innerText = text;
    })
    .catch(err => {
      console.log('Something went wrong', err);
    })
});

writeBtn.addEventListener('click', () => {
  const inputValue = inputEl.value.trim();
  if (inputValue) {
    navigator.clipboard.writeText(inputValue)
      .then(() => {
        inputEl.value = '';
        if (writeBtn.innerText !== 'Copied!') {
          const originalText = writeBtn.innerText;
          writeBtn.innerText = 'Copied!';
          setTimeout(() => {
            writeBtn.innerText = originalText;
          }, 1500);
        }
      })
      .catch(err => {
        console.log('Something went wrong', err);
      })
  }
});

External CSS

  1. https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.