jQuery copy/autoPaste form

Copy link from paragraph and autoPaste it to text area

by xf_analog

HTML

<p class="origem">
     <a class="link" href="https://www.link2.be/captured">
       The Link
      </a>
   </p>
   <div class="divclass">
     <center>
     <textarea readonly class="destino1"></textarea>
     <textarea readonly class="destino2"></textarea>
     <p class="info">Textareas to contain captured Link....</p>
      </center>  
    </div>

CSS

body{
  background: #fdf5e6;
}
textarea {
    -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd;
    -moz-box-shadow: inset 2px 2px 2px 0px #dddddd;
    box-shadow: inset 2px 2px 2px 0px #dddddd;
    height: 30px;
    margin: 10px;
    overflow: auto;
    padding: 7px 10px;
    width: 180px;    
    font-family: tahoma;
    font-size: 13px;
    border: 1px solid #aaa;
    resize: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.origem{
  text-align: center;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  font-weight: 400; 
  text-transform: uppercase;
  letter-spacing: .1em
}
.link{
  color: black;
  text-shadow: -.25px -.25px 0 transparent, 
                .25px .25px transparent;
  text-decoration: overline;
}
.link:hover{
  background-color: #292929;
  color: white;
  text-shadow: -.25px -.25px 0 white, 
                .25px .25px white;
  padding: 5px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  text-decoration: none !important;
}
.divclass{
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  max-width: 480px;
  margin: auto;
  padding: 10px;
  background-color: #f5f5f5;
}
.info{
  font-family: tahoma;
  font-size: 11px;
  color: #b8b8b8;
}
@keyframes bounce {
	0%, 20%, 60%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}
	80% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}
}
.info:hover{
  color: black;
  text-shadow: -.25px -.25px 0 black, 
                .25px .25px black;
  animation: bounce 1s;
}

JavaScript

// courtesy of https://stackoverflow.com/users/10386872/c-raysofthesun
window.onload = ()=>{
   let link;
   let textArea = document.querySelector('textarea.destino1');
   let textArea2 = document.querySelector('textarea.destino2');
  // actualiza paragrafo do link 2seg depois.
  setTimeout(()=>{
    // paragrafo que contém
    let paragraph = document.createElement('p');
    // elemento que vai receber link
   let anchor = document.createElement('a');
    let textNode = document.createTextNode('');
    anchor.appendChild(textNode);
    anchor.setAttribute('href', '');
    paragraph.classList.add("origem");
    paragraph.appendChild(anchor)
    document.body.appendChild(paragraph);
  }, 2000);
  // confirma existência do elemento e copia o atributo href
  setInterval(()=>{
    // devolve o elemento ao destino
    link = document.querySelector('p.origem a');
    if(link){
      textArea.value = link.getAttribute('href')
      textArea2.value = link.getAttribute('href')
    }
  }, 1000)
};