script.js

const roles = [
    "Conceptualization",
    "Methodology",
    "Software",
    "Validation",
    "Formal analysis",
    "Investigation",
    "Resources",
    "Data curation",
    "Writing – original draft",
    "Writing – review & editing",
    "Visualization",
    "Supervision",
    "Project administration",
    "Funding acquisition"
];

const container = document.getElementById("author-container");
const addBtn = document.getElementById("add-author");
const generateBtn = document.getElementById("generate");
const output = document.getElementById("output");

// Create an author block
function addAuthor() {
    const block = document.createElement("div");
    block.className = "author-block";

    block.innerHTML = `
        <input type="text" class="author-name" placeholder="Author name">
        <div class="roles">
            ${roles
                .map(
                    r =>
                        `<label><input type="checkbox" value="${r}"> ${r}</label>`
                )
                .join("<br>")}
        </div>
        <hr>
    `;

    container.appendChild(block);
}

addBtn.onclick = addAuthor;
addAuthor(); // Start with one author

generateBtn.onclick = () => {
    const blocks = document.querySelectorAll(".author-block");
    let result = "CRediT Author Contributions:\n\n";

    blocks.forEach(block => {
        const name = block.querySelector(".author-name").value.trim();
        const checked = [...block.querySelectorAll("input[type=checkbox]:checked")].map(
            c => c.value
        );

        if (name && checked.length > 0) {
            result += `${name}: ${checked.join(", ")}.\n`;
        }
    });

    output.value = result;
};