<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Convert calc</title>
	<style type="text/css">	
    	body {background-color: #404040; color: #bfbfbf}
        .maininput {background-color: #606060; color: #dedede; border: 2px solid #ffffff; width: 20%; transition-duration: 0.4s; border-radius: 0px; text-align: center;}
   		.maininput:hover {background-color: #ffffff; color: #000000; border: 2px solid #000000;}
        .output {border: 2px solid #ffffff; width: 80%; margin: auto; padding: 0px 1ch; cursor: copy;}
        label {margin-left: 2ch;}
    </style>
</head>

<body>

<div style="margin: auto; width: 80%; text-align: center;">
        <label for="Dec">Dec: </label>
        <input type="radio" name="calcopt" id="Dec" value="dec" onchange="calcopt(this.value)" checked>
        <label for="Hex">Hex: </label>
        <input type="radio" name="calcopt" id="Hex" value="hex" onchange="calcopt(this.value)">
        <label for="Bin">Bin: </label>
        <input type="radio" name="calcopt" id="Bin" value="bin" onchange="calcopt(this.value)">
    <br>
    <br>
        <input type="text" name="data" id="data" class="maininput" placeholder = "[0-9]" oninput="convert(this.value)">
    <br>
    <br>
        <h2>Dec: <span id="decout" class="output" onclick="copy(this.innerHTML)">0000</span></h2>
        <h2>Hex: <span id="hexout" class="output" onclick="copy(this.innerHTML)">0000</span></h2>
        <h2>Bin: <span id="binout" class="output" onclick="copy(this.innerHTML)">0000</span></h2>
        <h2>Unicode: <span id="utfout" class="output" onclick="copy(this.innerHTML)">0000</span></h2>
        <br>
    <p style="text-align: center;">Click on the box to copy.</p>
    <br>
</div>

</body>

<script type="text/javascript">
    const version = "1.2";
    
    let option = "dec";
    
    //data from radio input fce
    function calcopt(opt) {
        option = opt;
        document.getElementById("data").value = "";
        document.getElementById("decout").innerHTML = "0000";
        document.getElementById("hexout").innerHTML = "0000";
        document.getElementById("binout").innerHTML = "0000";
        document.getElementById("utfout").innerHTML = "0000";
        switch (opt) {
            case "dec":
                document.getElementById("data").placeholder = "[0-9]";
                break;
            case "hex":
                document.getElementById("data").placeholder = "[0-9 A-F]";
                break;
            case "bin":
                document.getElementById("data").placeholder = "[0-1]";
                break;
            default:
                break;
        }
    }

    //convert fce
    function convert(param) {
        param = param.toUpperCase();
        if (param == "") {
            document.getElementById("decout").innerHTML = "0000";
            document.getElementById("hexout").innerHTML = "0000";
            document.getElementById("binout").innerHTML = "0000";
            document.getElementById("utfout").innerHTML = "0000";
        }
        else {
            switch (option) {
            case "dec":
                document.getElementById("decout").innerHTML = param;
                document.getElementById("hexout").innerHTML = parseInt(param, 10).toString(16);
                document.getElementById("binout").innerHTML = parseInt(param, 10).toString(2);
                document.getElementById("utfout").innerHTML =  String.fromCharCode(param);
                break;
            case "hex":
                document.getElementById("hexout").innerHTML = param;
                document.getElementById("decout").innerHTML = parseInt(param, 16);
                document.getElementById("binout").innerHTML = parseInt(param, 16).toString(2);
                document.getElementById("utfout").innerHTML = String.fromCharCode(parseInt(param, 16));
                break;
            case "bin":
                document.getElementById("binout").innerHTML = param;
                document.getElementById("decout").innerHTML = parseInt(param, 2)
                document.getElementById("hexout").innerHTML = parseInt(param, 2).toString(16);
                document.getElementById("utfout").innerHTML = String.fromCharCode(parseInt(param, 2));
                break;
            default:
                break;
            }
        }
    }

    //copy output fce
    function copy(data) {
		navigator.clipboard.writeText(data);
    }
    
</script>
</html>