function Hello() {
var text_to_copy = document.getElementById("quote").innerHTML;
navigator.clipboard.writeText(text_to_copy).then(
function(){
alert("Copied successfully"); // success
})
.catch(
function() {
alert("Error"); // error
});
}
I want the code to flash the "Copied duccessfully" or "Error" instead of showing in alert box
A snackbar/toast message would work perfectly. But you will need to code your own implementation for it ofc.
An example of how to implement this:
HTML:
<span id="snackbar">Successfully Copied</span>
CSS:
#snackbar {
visibility: hidden;
color: #fff;
background-color: #333;
min-width: 250px;
margin-left: -125px;
border-radius: 2px;
padding: 16px;
text-align: center;
left: 50%;
bottom: 30px;
z-index: 1;
position: fixed;
}
/* This will be activated when the snackbar's class is 'show' which will be added through JS */
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* Animations for fading in and out */
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
Javascript:
function showSnackBar() {
var sb = document.getElementById("snackbar");
//this is where the class name will be added & removed to activate the css
sb.className = "show";
setTimeout(()=>{ sb.className = sb.className.replace("show", ""); }, 3000);
}
You can edit & style to your liking. (ofc ideally you should edit this to pass whatever string message you want the Snackbar/toast to display, something i left out for you to enjoy)