openai.js

Hi guys. Jans & I were playing around with OpenAI.

We first pasted in Bill E’s code & asked Open AI to explain what it was doing.

Here’s Bill’s code:

document.addEventListener('DOMContentLoaded', (event) => {
  var headers;
  headers = document.querySelectorAll('h2[slot="header"]');
  headers.forEach(
    function(header) {
      header.addEventListener('click',
        function() {
          var loc,
              urlCopiedDiv,
              animationHandler;

          loc = window.location.href;
          navigator.clipboard.writeText(loc);

          urlCopiedDiv = document.querySelector('#url-copied');
          urlCopiedDiv.classList.add('animation-active');

          animationHandler = function() {
            urlCopiedDiv.removeEventListener('animationend', animationHandler, false);
            urlCopiedDiv.classList.remove('animation-active');
          };

          urlCopiedDiv.addEventListener('animationend', animationHandler, false);
        },
        false);
    });
});

When asked to explain it, OpenAI said:

1. It adds an event listener to the DOMContentLoaded event.
2. It finds all the h2 elements with the slot attribute set to header.
3. It adds an event listener to each of the h2 elements.
4. When the h2 element is clicked, it copies the current URL to the clipboard.
5. It adds a class to the #url-copied element to trigger an animation.
6. It adds an event listener to the #url-copied element to remove the animation class when the animation ends.

---

I then asked OpenAI:

Write code that does this:

1. It adds an event listener to the DOMContentLoaded event.
2. It finds all the h2 elements with the slot attribute set to header.
3. It adds an event listener to each of the h2 elements.
4. When the h2 element is clicked, it copies the current URL to the clipboard.
5. It adds a class to the #url-copied element to trigger an animation.
6. It adds an event listener to the #url-copied element to remove the animation class when the animation ends.

OpenAI’s code:

// Listen for the DOMContentLoaded event
document.addEventListener("DOMContentLoaded", () => {
  // Find all the h2 elements with the slot attribute set to header
  const headers = document.querySelectorAll("h2[slot=header]");

  // Loop over the headers
  for (let i = 0; i < headers.length; i++) {
  // Add an event listener to each header
  headers[i].addEventListener("click", () => {
    // Copy the current URL to the clipboard
    navigator.clipboard.writeText(window.location.href);

    // Add a class to the #url-copied element to trigger an animation
    document.getElementById("url-copied").classList.add("animated");
  });
  }

  // Add an event listener to the #url-copied element to remove the animation class when the animation ends
  document.getElementById("url-copied").addEventListener("animationend", () => {
  document.getElementById("url-copied").classList.remove("animated");
  });
});

OpenAI explained itself thusly:

This code listens for the DOMContentLoaded event and then finds all the h2 elements with the slot attribute set to header. It adds an event listener to each of these elements, and when one is clicked, it copies the current URL to the clipboard. It then adds a class to the #url-copied element to trigger an animation, and listens for the animationend event to remove the class and end the animation.

What do you guys think? Jans & I were wondering.