Here’s a more advanced version with added functionality and improvements to make the "copy code" box even more user-friendly and visually appealing. We will include better styling, animation on button clicks, and an updated user interface for more refined behavior.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Copy Box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="code-container">
<pre><code id="codeBox">
// Your code snippet here
function sayHello() {
console.log('Hello, World!');
}
</code></pre>
<button class="copy-btn" onclick="copyCode(this)">Copy Code</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (style.css):
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 20px;
}
.code-container {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
background-color: #282c34;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
color: white;
}
code {
display: block;
font-family: "Courier New", monospace;
font-size: 16px;
color: #f8f8f2;
background-color: #2d2d2d;
padding: 15px;
border-radius: 5px;
overflow: auto;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
font-size: 14px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.copy-btn:hover {
background-color: #45a049;
}
.copy-feedback {
position: absolute;
top: 10px;
left: 10px;
font-size: 14px;
color: #4CAF50;
display: none;
opacity: 0;
transition: opacity 0.5s ease;
}
JavaScript (script.js):
function copyCode(button) {
// Find the sibling element of the clicked button
var codeBox = button.previousElementSibling;
// Create a temporary textarea to copy text
var textArea = document.createElement("textarea");
textArea.value = codeBox.innerText;
document.body.appendChild(textArea);
textArea.select();
textArea.setSelectionRange(0, 99999); // For mobile devices
document.execCommand("copy");
document.body.removeChild(textArea);
// Provide feedback (optional)
button.textContent = "Copied!";
setTimeout(() => {
button.textContent = "Copy Code";
}, 2000);
}
Explanation:
-
HTML:
- The code element inside the pre tag is used to format the code properly, so it appears neatly with proper indentation. The button triggers the JavaScript function to copy the code.
- A new span element with id="copyFeedback" is used to display the "Code copied!" message to users when they click the button.
-
CSS:
- The code-container is styled with a dark background and light text to mimic a real coding environment. It’s centered on the page with shadows to create a modern look.
- The copy-btn has a smooth transition effect on hover, which gives users a more interactive feel.
- The copy-feedback message will appear when the code is copied and disappear after 2 seconds, with a fade-out animation.
-
JavaScript:
- Copy Functionality: The code is copied by creating a temporary textarea element, which holds the code text and allows the user to select and copy it.
- Copy Feedback: After copying the code, the feedback message is displayed using setTimeout to show and hide it smoothly, which adds a nice UX touch.
Enhanced Features:
- Code Formatting: Using pre and code tags helps format the code, keeping indentation intact.
- User Feedback: Users receive a "Code copied!" message, which provides instant feedback that the action was successful.
- Smooth Animations: Button hover effects and feedback message fade-in/out animations make the interface more engaging.
This code box now looks professional and has a more modern interface, making it easier for visitors to copy code and enhancing the user experience.