const final = document.getElementById('demo');

const container = document.createElement('div');
container.setAttribute('class', 'container');

final.appendChild(container)

var request = new XMLHttpRequest();
request.open('GET', 'https://jsonplaceholder.typicode.com/posts?fbclid=IwAR2aHkMfSVPYV3va38MKu-jOahl9G8UzyPJ1Dd67EyskMPZMw1gN9xi-AUg', true)
request.onload = function() {
  var data = JSON.parse(this.response)

  if (request.status >= 200 && request.status < 400) {
    data.forEach(user => {

      const card = document.createElement('div')
      card.setAttribute('class', 'card')

      const h3 = document.createElement('h3');
      h3.textContent = `ID: ` + user.id;

      const h4 = document.createElement('h4');
      h4.textContent = `Title: ` + user.title;

      const p = document.createElement('p');
      p.textContent = `Description: ` + user.body;

      container.appendChild(card);
      card.appendChild(h3)
      card.appendChild(h4)
      card.appendChild(p)
    })
} else {
    console.log('error')
  }
}

request.send();