text2bin.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap with it's required CSS and JS files with crossorigin attribute and integrity attribute -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    
    <title>Text to Binary</title>
</head>

<body>
    <div class="container">
        <br>

        <!-- create a center div to hold the header -->
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center">Text to Binary</h1>
            </div>
        </div>
        <!-- Bootstrap form for input text -->
        <form>
            <div class="form-group">
                <label for="text">Text:</label>
                <textarea class="form-control" id="text" name="text">

                </textarea>
                <label for="result">
                    Result:
                </label>

                <textarea id="result" class="form-control" readonly>

                </textarea>
            </div>
            <!--Button to copy text to clipboard-->
            <button type="button" class="btn btn-primary" id="copy">Copy</button>

        </form>


    </div>

</body>

<script>
    function convertToBinary(text) {
        var result = '';
        for (var i = 0; i < text.length; i++) {
            var char = text[i];
            var code = char.charCodeAt(0);
            result += code.toString(2) + ' ';
        }
        return result;
    }

    // add a event listener to the input change
    document.getElementById('text').addEventListener('input', function (e) {
        const text = e.target.value;
        const result = convertToBinary(text);
        document.getElementById('result').value = result;
    });

    // add event listener to the button
    document.getElementById('copy').addEventListener('click', function (e) {
        const text = document.getElementById('result').value;
        const textArea = document.createElement('textarea');
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        textArea.remove();
    });


</script>

</html>