main.js

// require or destructure or input blocks
import Alpine from 'alpinejs';
import DaisyUI from 'daisyui';
import tailwind from 'tailwind';
import Three from 'three';

Alpine.start();
DaisyUI.start();
tailwind.addPlugin(Three);

// global scope
const comicFactory = new Comicscape();

class Comicscape {
    constructor() {
        this.comics = [];
        this.elem = document.getElementById('comic-factory');
        this.btn = document.getElementById('generate-comic-btn');
        this.textarea = document.getElementById('comic-textarea');
    }

    fetchComics() {
        fetch('/comics')
            .then(response => response.json())
            .then(data => {
                this.comics = data.ebooks;
                this.render();
            })
            .catch(error => console.error(error));
    }

    render() {
        const ebooks = this.comics.map((ebook) => {
            return `
                <article class="prose">
                    <header class="mb-8 lg:mb-12">
                        <h2 class="max-w-3xl mb-4">${ebook.title}</h2>
                        <div class="text-sm">
                            <a class="text-sm text-indigo-500 no-underline" href="${ebook.ebook_url}">Read Comic</a>
                            <a class="text-sm text-indigo-500 no-underline" href="${ebook.edit_comic}">Edit Comic</a>
                            <button type="button" class="btn btn-danger" href="/comics/${ebook.id}/delete">Delete Comic</button>
                        </div>
                    </header>
                    <div class="max-w-3xl mb-4">
                        <img src="${ebook.image_url}" alt="${ebook.title}">
                    </div>
                    <div class="prose lg:prose-lg">${ebook.description}</</t>)
                </article>
            </Fragment>
        `;
    });

        this.elem.innerHTML = ebooks.join('');
    }

    generateComic() {
        this.textarea.value = this.elem.getAttribute('href');
        this.textarea.select();
        document.execCommand('copy');
        console.log('Copied to clipboard!');
    }
}

comicFactory.fetchComics();
comicFactory.btn.onclick = () => {
    comicFactory.generateComic();
};