fix copy to clipboard in binary

binary/binary.css

@@ -1,5 +1,5 @@
 body {
-  background-color: #6497b1;
+  background-color: #ac7489;
   font-family: "Courier Prime", monospace;
   height: 100%;
 }
@@ -12,10 +12,11 @@ body {
   overflow: auto;
   width: 75vw;
   margin: auto;
+  padding: 5px;
 }
 
 .submit {
-  background-color: #03396c;
+  background-color: #883d3d;
   border: 2px black solid;
   /* width: 25vw; */
   height: 100px;
@@ -32,6 +33,8 @@ body {
 }
 
 #out {
+  display: flex;
+  align-self: center;
   border: 4px black solid;
   width: 75vw;
   height: 5rem;

binary/binary.js

@@ -8,7 +8,7 @@ function out() {
   console.log("out");
   document.getElementById("out").innerHTML = "";
   var binary_out = "";
-    document.getElementById("input").innerHTML.replace(/  /g, '');
+  document.getElementById("input").innerHTML.replace(/  /g, "");
   var input = document.getElementById("input").textContent;
   for (var i = 0; i < input.length; i++) {
     var z = input.charCodeAt(i).toString(2);
@@ -32,7 +32,7 @@ function out1() {
   var input = document.getElementById("input").textContent.replace(/ /g, "");
   input = input.replace(/&nbsp; /gi, "");
   for (var i = 0; i < input.length; i = i + 8) {
-        var z = '';
+    var z = "";
     var z = input.substr(i, 8);
     text_out += String.fromCharCode(parseInt(z, 2)) + "";
   }
@@ -59,3 +59,19 @@ function copy() {
 function clear1() {
   document.getElementById("input").textContent = "";
 }
+let copyText = document.getElementById("out");
+function copyOut() {
+  // Get the text field
+  copyText = document.getElementById("out");
+  // focus text feild
+  copyText.focus();
+  // Select the text field
+  copyText.select();
+  copyText.setSelectionRange(0, 99999); // For mobile devices
+
+  // Copy the text inside the text field
+  navigator.clipboard.writeText(copyText.value);
+
+  // Alert the copied text
+  alert("Copied the text: " + copyText.value);
+}

binary/index.html

@@ -9,8 +9,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
     <title>Binary</title>
     <link rel="stylesheet" type="text/css" href="/menu/menu.css" />
-    <link rel="icon" type="image/ico" href="../binary.ico">
-    <link rel="stylesheet" type="text/css" href="binary.css" />
+    <link rel="icon" type="image/ico" href="/binary/binary.ico">
+    <link rel="stylesheet" type="text/css" href="/binary/binary.css" />
     <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
 
@@ -38,8 +38,8 @@
         </div>
     
     
-        <div id="out" onclick="copy()">
-            <div>
+        <textarea id="out" onclick="copyOut()">
+        </textarea>
  
     <br />