I opened my GPT Web Component Creator
https://chatgpt-web-component.github.io/
or: https://chatgpt.com/g/g-quK0nMtwZ-web-component-creator-vanilla-javascript
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-web-component-creator-vanilla-javascript
Top comments (0)