add copy to clipboard function

ycanas · Mar 27, 2024 · bd90296 · bd90296
1 parent c8f9e32
commit bd90296
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 3 deletions.
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/styles.css → css/styles.css b/styles.css → css/styles.css
diff --git a/index.html b/index.html
@@ -9,8 +9,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- estilos -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="./styles.css">
+    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="./css/styles.css">
     <link rel="icon" type="image/png" href="./img/favicon.png">
     <title>Traductor Binario</title>
 </head>
@@ -37,6 +37,16 @@
         <!-- JavaScript -->
     </div>
 
+    <!-- Toast -->
+    <div class="toast align-items-center position-fixed bottom-0 end-0 border-0 border-bottom border-success m-4 p-1" id="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000">
+        <div class="d-flex">
+          <div class="toast-body fw-medium fs-6">
+            Resultado Copiado
+          </div>
+          <button type="button" class="btn-close btn-close-dark me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+    </div>
+
     <!-- infromación -->
     <div class="px-5 pt-5 mt-5" style="font-size: 18px;">
         <p>
@@ -91,6 +101,7 @@ <h5>Ejemplo: </h5> <br>
     </footer>
 
     <!-- script -->
-    <script src="./main.js"></script>
+    <script src="./js/bootstrap.min.js" type="module"></script>
+    <script src="./js/main.js" type="module"></script>
 </body>
 </html>
diff --git a/js/bootstrap.min.js b/js/bootstrap.min.js
diff --git a/main.js → js/main.js b/main.js → js/main.js
@@ -1,3 +1,7 @@
+import "./bootstrap.min.js"
+
+const toast = document.getElementById('toast');
+const bootstrapToast = bootstrap.Toast.getOrCreateInstance(toast);
 const buttonBinary = document.getElementById('buttonBinary');
 const buttonText = document.getElementById('buttonText');
 
@@ -21,6 +25,8 @@ buttonBinary.onclick = function() {
     document.getElementById('inputText').value = "";
     divOutput.className = "w-75 mt-1 alert alert-success mx-auto";
     divOutput.innerHTML = `${output.trim()}`;
+    navigator.clipboard.writeText(output.trim());
+    bootstrapToast.show();
 }
 
 
@@ -56,4 +62,6 @@ buttonText.onclick = function() {
     document.getElementById('inputText').value = "";
     divOutput.className = "w-75 mt-1 alert alert-success mx-auto";
     divOutput.innerHTML = `${output.trim()}`;
+    navigator.clipboard.writeText(output.trim());
+    bootstrapToast.show();
 }