007 Placeholder Image path generator final source code

<html>

<head>
    <title>JavaScript</title>
    <style>

    </style>
</head>

<body> Image Size:
    <select>
        <option value="150x50">Small</option>
        <option value="350x150">Medium</option>
        <option value="650x350">Large</option>
    </select>
    <br> Text on Image:
    <input type="text">
    <br> Color of Background:
    <input type="color" id="bck" value="#dddddd">
    <br> Color of Text:
    <input type="color" id="txt" value="#ff0000">
    <br> <img src=""><br>
    <textarea rows="3" cols="50"></textarea>
    <script>
        const sel = document.querySelector("select");
        const inpAll = document.querySelectorAll("input");
        const myImg = document.querySelector("img");
        const txtArea = document.querySelector("textarea");
        sel.addEventListener("change", build);
        inpAll.forEach(function (item) {
            item.addEventListener("change", build);
        })
        function clean(str){
            return str.replace("#","");
        }
        function spacers(str){
            return str.split(" ").join("+");
        }

        function build(e) {
            let i = {};
            i.size = sel.value;
            i.text = spacers(inpAll[0].value);
            i.bgClr =clean(inpAll[1].value);
            i.txtClr =clean(inpAll[2].value);
            i.path = "http://via.placeholder.com/"+i.size+"/"+i.bgClr+"/"+i.txtClr+"?text="+i.text;
            myImg.src = i.path;
            txtArea.value = i.path;
            txtArea.select();
            txtArea.focus();
            document.execCommand("copy");
            console.log(i);
        

        
        
        }
    </script>
</body>

</html>