const buttonClick = document.querySelector(".button");
const defaultDIv = document.querySelector(".normal-div");
const getUser = document.querySelector(".user-button");

buttonClick.addEventListener("click", clickedButoon);
// getUser.addEventListener("click", addUser);
document.addEventListener("DOMContentLoaded", addUser);
function clickedButoon() {
  const para = document.createElement("p");
  let xhr = new XMLHttpRequest();
  xhr.open("GET", "raw.txt", true);
  xhr.onload = function () {
    if (this.status == 200) {
      para.innerHTML = this.responseText;
      console.log(this.responseText);
    }
  };
  defaultDIv.appendChild(para);
  xhr.onerror = function () {
    console.log("error occurred");
  };
  xhr.send();
}

function addUser(e) {
  e.preventDefault();
  const usersPara = document.createElement("p");
  let xhr = new XMLHttpRequest();
  xhr.open("GET", "user.json", true);
  xhr.onload = function () {
    console.log(xhr.responseText);
    let obj = JSON.parse(xhr.responseText);
    if (this.status === 200) {
      usersPara.innerText = `${obj.name} , ${obj.age} , ${obj.status}, ${obj.class}`;

      defaultDIv.appendChild(usersPara);
    }
  };
  xhr.send();
}