Merge pull request #7 from crisnlopez/copiar

Copiar
crisnlopez · May 21, 2022 · 9852dd0 · 9852dd0
2 parents 992e02c + 4b538d1
commit 9852dd0
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -168,6 +168,38 @@ footer p a:hover{
   display: none !important;
 }
 
+#notificacion{
+  position: absolute;
+  margin: 0 auto;
+  top: -10%;
+  left: 0;
+  right: 0;
+  width: max-content;
+  padding: .5rem 1rem;
+  background-color: var(--Dark-blue-500);
+  color: var(--White);
+  font-family: 'Inter', sans-serif;
+  border-bottom-right-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+  animation-name: show;
+  animation-duration: 3s;
+}
+
+@keyframes show{
+  from{
+    top: -10%;
+  }
+  10%{
+    top:0
+  }
+  50%{
+    top: 0;
+  }
+  to{
+    top: -10%;
+  }
+}
+
 @media only screen and (min-width: 600px){
   .buttons-container{
     display: flex;

diff --git a/index.html b/index.html
@@ -15,6 +15,7 @@
     <script defer src="js/app.js"></script>
   </head>
   <body>
+    <div id="notificacion" hidden="">Texto copiado</div>
     <div class="container">
       <header>
         <img src="img/Alura_logo.svg" alt="Logo Alura">

diff --git a/js/app.js b/js/app.js
@@ -9,6 +9,7 @@ const outputDiv = document.getElementById("output-container")
 const noMsg = document.getElementById("no_msg")
 const msgEncriptado = document.getElementById("msg_encriptado")
 const muniecoImg = document.querySelector("img[src='img/munieco.svg']")
+const notificacion = document.getElementById("notificacion")
 
 const noPermitido = ['á','é','í','ó','ú','?','/','!','@','#','$','%','^','&','*','(',')','-','_','=','+','[',']','{','}','`','~','|','\\']
 const ingresaTexto = "Ingresa el texto que desees encriptar o desencriptar."
@@ -97,6 +98,28 @@ const mostrarInicio = () => {
   msgEncriptado.innerText = ingresaTexto
 }
 
+async function copiarTexto() {
+  try {
+    await navigator.clipboard.writeText(msg_encriptado.innerText)
+      .then(() =>{
+        notificar('Texto copiado')
+      })
+      .catch(notificar)
+  } catch (err) {
+    console.error('Failed to copy:', err)
+  }
+}
+
+const notificar = value => {
+  clearTimeout(notificar.timer)
+
+  if (notificacion.hidden) notificacion.textContent = value
+
+  notificacion.hidden = false
+  notificar.timer = setTimeout(() => {notificacion.hidden = true}, 3000)
+}
+
 // Eventos
 btnEncriptar.addEventListener("click", encriptar)
 btnDesencriptar.addEventListener("click",desencriptar)
+btnCopiar.addEventListener("click", copiarTexto)