main.js

const textarea = document.getElementById("txt-area");

function f1(e){
    let value = e.value;
    textarea.style.fontSize = value + "px";
}

function f2(e){
    if(textarea.style.fontWeight == "bold")
    {
        textarea.style.fontWeight = "normal";
        e.classList.remove("active");
    }
    else
    {
        textarea.style.fontWeight = "bold";
        e.classList.add("active");
    }
}

function f3(e){
    if(textarea.style.fontStyle == "italic")
    {
        textarea.style.fontStyle = "normal";
        e.classList.remove("active");
    }
    else
    {
        textarea.style.fontStyle = "italic";
        e.classList.add("active");
    }
}

function f4(e){
    if(textarea.style.textDecoration == "underline")
    {
        textarea.style.textDecoration = "normal";
        e.classList.remove("active");
    }
    else
    {
        textarea.style.textDecoration = "underline";
        e.classList.add("active");
    }
}

function f5(e){
    textarea.style.textAlign = "left";
}

function f6(e){
    textarea.style.textAlign = "center";
}

function f7(e){
    textarea.style.textAlign = "right";
}

function f8(e){
    if(textarea.style.textTransform == "uppercase")
    {
        textarea.style.textTransform = "none";
        e.classList.remove("active");
    }
    else
    {
        textarea.style.textTransform = "uppercase";
        e.classList.add("active");
    }
}

function f9(){
    textarea.style.fontWeight = "normal";
    textarea.style.textAlign = "left";
    textarea.style.fontStyle = "normal";
    textarea.style.textTransform = "capitalize";
    textarea.value = "";
}

function f10(e){
    let value = e.value;
    textarea.style.color = value;
}

window.addEventListener("load"), ()=> {
    textarea.value = "";
}