After implementing a code snippet to enable a button to copy the URL to the clipboard, I encountered an issue. Originally, the button displayed the text "copy," which changed to "copied" after clicking on it and reverted back after 2 seconds.
However, I decided to replace the text with an icon. The problem now is that the icon transitions into the old "copied" text and then to nothing after 2 seconds since the icon is not textual. How can I make it revert back to the icon instead? Additionally, I want to replace the "copied" text with the same icon but slightly larger. What method or function should I use to achieve this?
I managed to fix the transition back to the icon. However, I'm unsure how to increase the size of the icon using JavaScript. Is there a way to change the font-size dynamically through JavaScript?
I successfully adjusted the font size with the help of this resource. Nonetheless, I am facing another challenge where the button's size changes due to adjusting the font size.
EDIT: I was able to resolve the entire issue. Thank you for all the assistance!
var $temp = $("<input>");
var $url = $(location).attr('href');
$('.clipboard').on('click', function() {
const originalText = $('.clipboard').html();
// CSS function:
const addCSS = s => document.head.appendChild(document.createElement("style")).innerHTML=s;
$("body").append($temp);
$temp.val($url).select();
document.execCommand("copy");
$temp.remove();
$('.clipboard').html(originalText);
// CSS Usage:
addCSS(".clipboard{ font-size: 20px; padding: 4.8px 21.3px 4.8px 21.3px; }")
// Run something in 1 second to revert back to the button's text
setTimeout(function() {
addCSS(".clipboard{ font-size: 15px; padding: 9px 21.3px 9px 21.3px}")
$('.clipboard').html(originalText);
}, 1000); // 1 second
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
<center>
<button class="clipboard"><i class="fas fa-copy"></i></button>
</center>
</div>