Hexdedit.html

<!DOCTYPE html>
<html>

<head>
    <title>Hexdedit</title>
    <style>
        html {
            padding: 5%;
            color: #EEE;
            font-family: Courier New;
            font-size: 20px
        }

        body {
            background: #222;
        }
    </style>
</head>

<body>
    <h1>Hexdedit V0.1a</h1>
    <button id="trigger">Process</button>
    <h2>Input</h2>
    <textarea style="width: 80vw; height: 80vh" id="input"></textarea>
    <h2>Output</h2>
    <textarea style="width: 80vw; height: 80vh" id="output"></textarea>
    <footer>Copyright 2024 Pacifiky. All rights reserved.</footer>
    <script>
        let inp = document.getElementById("input");
        let trig = document.getElementById("trigger");
        let out = document.getElementById("output");
        trig.addEventListener("click", (e) => {
            let splittext = inp.value;
            splittext = splittext.split(",");
            let outputtext = "";
            for (let i = 0; i <= parseInt(splittext.length / 8); i++) {
                let ri = i * 8;
                let rowtext = ri.toString(16);
                for (let j = 0; j < 8; j++) {
                    if (ri + j >= splittext.length) {
                        break;
                    };
                    rowtext += ' ' + splittext[ri + j];
                    if (j == 3) { rowtext += " |" };
                };
                outputtext += rowtext + "\n";
            };
            out.value = outputtext;
            return;
        });
    </script>
</body>

</html>