Can you fix 2 GPT Web Component errors??

I opened my GPT Web Component Creator

https://chatgpt-web-component.github.io/

or: https://chatgpt.com/g/g-quK0nMtwZ-create-or-refactor-your-web-component

I typed one GPT prompt:

Create a <toast-message> Web Component capturing "toast-message" Events, displaying the message in the bottom-right of the screen for 10 seconds, then fade out and delete the messages. New message are immediatly captured in the stack

ChatGPT created this code in 4.2 seconds

<!-- Example 1 -->
<toast-message></toast-message>

<script>
customElements.define('toast-message', class extends HTMLElement {
  constructor() {
    const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
    super();
    super().attachShadow({ mode: 'open' }).append(
      createElement('style', { innerHTML: `
        :host {
          position: fixed;
          bottom: 10px;
          right: 10px;
          display: grid;
          gap: 10px;
        }
        .toast {
          background: #333;
          color: #fff;
          padding: 10px;
          border-radius: 5px;
          opacity: 1;
          transition: opacity 0.5s ease;
        }
        .fade-out {
          opacity: 0;
        }
      ` })
    );
  }

  connectedCallback() {
    this.handleToast = this.handleToast.bind(this);
    window.addEventListener('toast-message', this.handleToast);
  }

  disconnectedCallback() {
    window.removeEventListener('toast-message', this.handleToast);
  }

  handleToast(event) {
    const message = event.detail.message;
    const toast = this.shadowRoot.appendChild(createElement('div', {
      className: 'toast',
      innerHTML: message
    }));

    setTimeout(() => {
      toast.classList.add('fade-out');
      setTimeout(() => this.shadowRoot.removeChild(toast), 500);
    }, 10000);
  }
});
</script>

<!-- Example 2 -->
<toast-message></toast-message>

<script>
window.dispatchEvent(new CustomEvent('toast-message', { detail: { message: 'This is a test message' } }));
</script>

<!-- Example 3 -->
<toast-message></toast-message>

<script>
setTimeout(() => {
  window.dispatchEvent(new CustomEvent('toast-message', { detail: { message: 'Another message after 5 seconds' } }));
}, 5000);
</script>

to error is human

Then GPT is human, because there are 2 errors in the above code.

Here is a JSFiddle, read the console.log, and you can fix these obvious errors yourself:

https://jsfiddle.net/WebComponents/42ehaxju/

Errors fixed; Working <toast-message> Web Component

Scroll the whole JSFiddle into view, the toast message are in the right bottom
Switch between Result and HTML Tab to run again!

[scroll this line to the bottom of your screen, to See the full fiddle above]

Now all I have to do is change some styles, ask for gold background in a new GPT prompt.

https://chatgpt-web-component.github.io/

or: https://chatgpt.com/g/g-quK0nMtwZ-create-or-refactor-your-web-component

---

---