Pravin Zende

Clickable code box

.bottom-alert {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #204ecf;
color: #fff;
padding: 10px;
text-align: center;
display: none;
width: 200px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 999999;
}

Code Copied!

// Select all elements with class “copyableCode”
var codeElements = document.querySelectorAll(“.copyableCode”);

// Loop through all “copyableCode” elements
codeElements.forEach(function(element) {
// Add event listener to each element for double-click
element.addEventListener(“dblclick”, function() {
copyToClipboard(element);
});
});

// Function to copy text to clipboard
function copyToClipboard(element) {
var tempTextArea = document.createElement(“textarea”);
tempTextArea.value = element.textContent || element.innerText; // For compatibility with different browsers
document.body.appendChild(tempTextArea);
tempTextArea.select();
tempTextArea.setSelectionRange(0, 99999); // For mobile devices
document.execCommand(“copy”);
document.body.removeChild(tempTextArea);

// Show the “Code Copied!” message
showBottomAlert();
}

// Function to display the “Code Copied!” alert
function showBottomAlert() {
var bottomAlert = document.getElementById(“bottomAlert”);
bottomAlert.style.display = “block”; // Make alert visible
setTimeout(function() {
bottomAlert.style.display = “none”; // Hide alert after 3 seconds
}, 3000);
}

    PRAVIN ZENDE