const argsElement = document.getElementById("args");
const tagInput = document.getElementById("add_arg");
const selectElem = document.getElementById("language");

function select(e){
    selectElem.removeEventListener("change", select);
    document.getElementById("input").attributes.removeNamedItem("disabled");
}

function addArg() {
    let tagDiv= document.createElement("div");
    tagDiv.classList.add("arg")
    let el = document.createElement("span");
    el.innerHTML = tagInput.value.replace("<", "&lt;").replace(">", "&gt;");
    tagDiv.append(el);

    let tagCloser = document.createElement("span")
    tagCloser.classList.add("delete-arg");
    tagCloser.innerHTML = "X";
    tagDiv.append(tagCloser);

    tagCloser.addEventListener("click", deleteArg);

    argsElement.append(tagDiv);
    tagInput.value = "";

    handleInput();
}

function deleteArg(e) {
    e.target.removeEventListener("click", deleteArg);
    e.target.parentElement.remove();
    handleInput()
}

function copyResult(){
    let attr = outputEl.attributes.getNamedItem("disabled");
    outputEl.attributes.removeNamedItem("disabled")
    outputEl.focus();
    outputEl.select();
    document.execCommand("copy");
    outputEl.select();
    outputEl.attributes.setNamedItem(attr);
}

tagInput.addEventListener("change", addArg);
selectElem.addEventListener("change", select);

document.getElementById("date").innerHTML = new Date().getFullYear();