<div id="result">
</div>

#result{
  height: 50px;
  width: 50px;
  background: red;
  padding: 1em;
}
.complete{
  width:unset !important;
  min-height: 70vh !important;
  background: green !important;
}
.complete > textarea{
  height:100%;
  width:320px;
}

const result = document.querySelector('#result'),
ajax = (url) =>{
 fetch(url)
  .then(response => response.json())
  .then(data => {
  window.dispatchEvent(new CustomEvent("ajaxComplete", {bubbles: true, composed: true,detail:{
    data: data
  }}));
});
}

window.addEventListener('ajaxComplete', function(event){
  console.dir(event);
   setTimeout(() => result.classList.add('complete'),
              result.innerHTML='<textarea>'+
              event.detail.data.map((d)=> d.sha).join('\n')+'</textarea>'
              , 5000);
 });


ajax('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');