const target = document.querySelector("#target");
const domStatus = document.querySelector("#dom-status");
const readyStatus = document.querySelector("#ready-status");
const timingStatus = document.querySelector("#timing-status");

window.deferDemo = {
  ranBeforeDOMContentLoaded: false,
};

if (target && domStatus) {
  target.disabled = false;
  domStatus.textContent = "Deferred script found #target";
  console.log("defer script: target present");
}

if (readyStatus) {
  readyStatus.textContent = document.readyState;
  console.log(`defer script: document.readyState=${document.readyState}`);
}

window.deferDemo.ranBeforeDOMContentLoaded = true;

document.addEventListener("DOMContentLoaded", () => {
  const alreadyRan = window.deferDemo.ranBeforeDOMContentLoaded ? "yes" : "no";

  if (timingStatus) {
    timingStatus.textContent = `DOMContentLoaded saw deferred script first: ${alreadyRan}`;
  }

  console.log(`DOMContentLoaded: deferred script ran first: ${alreadyRan}`);
});