const getData = (url) => new Promise((resolve, reject) => {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = () => {
    if (xhttp.readyState === 4 ) {
      if (xhttp.status == 200) {
        resolve(JSON.parse(xhttp.response));
      } else {
        reject(xhttp.statusText);
      }
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
});

getData('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => {
    const { id, title, completed } = res; 
    const html = `<div class="item">
                    <div>Id: ${id}</div>
                    <div>Title: ${title}</div>
                    <div>Completed: ${completed}</div>
                  </div>`;
    const newNode = document.createElement('div');      
    newNode.innerHTML = html;
    document.querySelector('#list').appendChild(newNode);
    }
  )
  .catch(res => {
    console.log(res);
    alert(`Something Error ,because ${res}`);
  });