Cacher is the code snippet organizer for pro developers

//Variables
const btnText = document.getElementById('btnText');
const btnJSON = document.getElementById('btnJSON');
const btnAPI = document.getElementById('btnAPI');

//Events
btnText.addEventListener('click',getText)

btnJSON.addEventListener('click',getJSON);

btnAPI.addEventListener('click',getAPI);

//Get local file .txt data
function getText() {
  fetch('data.txt')
  .then(response=> response.text()) 
   .then(data=> {
    // console.log(data)
    document.getElementById('output').innerHTML = `<ul class = "z-depth-4">
    <li >${data}</li></ul>`
  })
  .catch(error =>console.log(error))
}
//Get local file .json data
function getJSON() {
  fetch('data.json')
  .then(res=>res.json()) 
  .then(data=> {
    // console.log(data);
    let output = ''
    data.forEach(post => {
     output+=`
     <ul class="z-depth-3">
      <li>${post.title}</li>
      <li>${post.body}</li>
      </ul>`
    });
    document.getElementById('output').innerHTML = output;
   
  })
}
//Get API data
function getAPI() {
  fetch('https://api.github.com/users')
  .then (response =>response.json()
  )
  .then(data=> {
    let output = ''
    data.forEach(user => {
     output+=`
     <ul class="z-depth-2">
      <li ><img src="${user.avatar_url}"> </img></li>
      <li>
     ${user.login}
      </li>
      <div>
        <a href="${user.html_url}"   class>Visit  ${user.login} page
        </a>
      </div>
      <li></li>
      </ul>`
  })
  document.getElementById('output').innerHTML = output;
}).catch(err=>console.log(err));
}