Testing Fetch with someone else's code

NOTE: the base works with fetch(url) versions 4,5,6 & versions 7 & 8 try to use the more complex method of invoking fetch and both suffer from the "Unexpected end of input" syntax error... not worth playing around with such a lame problem going to use axios

by Matt Rummler

HTML

<h1>Authors</h1>
  <ul id="authors"></ul>

JavaScript

function createNode(element) {
      return document.createElement(element);
  }

  function append(parent, el) {
    return parent.appendChild(el);
  }

  const ul = document.getElementById('authors');
  const url = 'https://randomuser.me/api/?results=250';
//  const url = 'https://cloudwist.com/dataService/dts.snippet.php?contentType=lookups&operationType=get&lookupForm=Cannedmessages';
//NOTE: the below generates an "Unexpected end of input syntax error... however if just a url is given as a parameter to fetch then it will likely work fine... but I can't because I have to tell it no-cors right now"
	fetch(url,{method:'get',mode:'no-cors'})
//  fetch(url)
  .then((resp) => resp.json())
  .then(function(data) {
    let authors = data.results;
    return authors.map(function(author) {
      let li = createNode('li'),
          img = createNode('img'),
          span = createNode('span');
      img.src = author.picture.medium;
      span.innerHTML = `${author.name.first} ${author.name.last}`;
      append(li, img);
      append(li, span);
      append(ul, li);
    })
  })
  .catch(function(error) {
    console.log(error);
  });