Learn how to create a code snippet box with a copy button using HTML, CSS, and JavaScript. Improve your user experience with this easy-to-follow tutorial.
Table of Contents
Welcome to our tutorial on creating a code box with a copy button using HTML, CSS, and JavaScript. Code snippet boxes are an essential element on developer websites and blogs, allowing users to share and present code examples. Adding a copy button to the code box can significantly enhance the user experience by providing a convenient way for users to copy code snippets with a single click.
Whether you're a developer showcasing your work or a blogger explaining coding concepts, a code box with copy functionality offers several benefits. It allows users to easily copy code snippets without the hassle of manually selecting and copying text. This feature saves time and effort for both the website visitors and the content creators.
In this tutorial, we will guide you through the step-by-step process of implementing a code box with a copy button using HTML, CSS, and JavaScript. You don't need to have advanced coding skills to follow along; basic knowledge of HTML, CSS, and JavaScript will suffice.
By the end of this tutorial, you'll have a solid understanding of how to structure a code box in HTML, style it with CSS, and implement copy functionality using JavaScript. You'll be able to apply this knowledge to your own projects, enhancing the readability and usability of your code examples.
So, let's dive in and learn how to create a visually appealing code box with a convenient copy button feature using the power of HTML, CSS, and JavaScript.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our code snippet box.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break it down step by step:
1. <!DOCTYPE html>: This is a declaration that specifies the HTML version of the document. In this case, it indicates that the document is written in HTML5.
2. <html>: This tag represents the root element of an HTML document. It encapsulates all the content of the document.
3. <head>: This is the head section of the HTML document. It contains meta-information about the document, such as the title and external resources.
4. <title>Code Snippets with Copy Button</title>: This tag specifies the title of the HTML document, which is displayed in the browser's title bar or tab.
5. <link rel="stylesheet" href="styles.css">: This tag is used to include an external CSS file called "styles.css". The CSS file contains styling rules that define the appearance of the HTML elements.
6. </head>: This closing tag marks the end of the head section.
7. <body>: This tag represents the body section of the HTML document. It contains the visible content that is displayed in the browser window.
8. <pre id="myPreTag">This is some text.<br>This is some text.<br>This is some text.</pre>: This is a <pre> (preformatted text) element with the id attribute set to "myPreTag". The content inside the <pre> element is displayed as it is, preserving whitespace and line breaks. In this case, the text "This is some text." is repeated three times, with line breaks (<br>) between each repetition.
9. <script src="script.js"></script>: This tag is used to include an external JavaScript file called "script.js". The JavaScript file contains code that will be executed by the browser. It is placed at the end of the body section to ensure that the HTML elements are loaded before the JavaScript code is executed.
10. </body>: This closing tag marks the end of the body section.
11. </html>: This closing tag marks the end of the HTML document.
This is the basic structure of our code snippet box using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the code snippet box is in place, the next step is to add styling to the code snippet box using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our code snippet box.
Let's break it down and explain each part:
1. body: This selector targets the <body> element. It sets the background color to #ffe4c4, which is a light peach color.
2. pre: This selector targets the <pre> (preformatted text) element. It sets several properties:
- position: relative;: Positions the <pre> element relative to its normal position.
- background: #d3d6db;: Sets the background color of the <pre> element to a light gray shade.
- padding: 10px;: Adds 10 pixels of padding inside the <pre> element, creating space between the content and the border.
- font-size: 15px;: Sets the font size of the text inside the <pre> element to 15 pixels.
- word-wrap: break-word;: Wraps long words to the next line to prevent horizontal overflow.
- white-space: pre-wrap;: Preserves the line breaks and spaces within the text, wrapping the text when necessary.
- border: 1px solid #e6e7e9;: Adds a 1-pixel solid border around the <pre> element with a light gray color.
- max-width: 500px;: Sets the maximum width of the <pre> element to 500 pixels.
3. .copy-button: This selector targets elements with the class name copy-button. It sets several properties:
- position: absolute;: Positions the elements with the copy-button class absolutely within their containing element.
- top: 2px;: Sets the distance between the top edge of the element and its containing element to 2 pixels.
- right: 10px;: Sets the distance between the right edge of the element and its containing element to 10 pixels.
- cursor: pointer;: Changes the cursor to a pointer when hovering over the element, indicating it is clickable.
- color: #fff;: Sets the text color of the element to white.
- background: gray;: Sets the background color of the element to gray.
- border-radius: 0.5em;: Rounds the corners of the element to 0.5em, giving it a slightly rounded appearance.
- padding: 2px 7px;: Adds 2 pixels of padding at the top and bottom and 7 pixels of padding on the left and right.
4. .copy-button:hover: This selector targets elements with the class name copy-button when they are being hovered over. It sets the text color to black (#000), providing a visual change when the button is hovered over.
This will give our code snippet box an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body {
background: #ffe4c4;
}
pre {
position: relative;
background: #d3d6db;
padding: 10px;
font-size: 15px;
word-wrap: break-word;
white-space: pre-wrap;
border: 1px solid #e6e7e9;
max-width: 500px;
}
.copy-button {
position: absolute;
top: 2px;
right: 10px;
cursor: pointer;
color: #fff;
background: gray;
border-radius: 0.5em;
padding: 2px 7px;
}
.copy-button:hover {
color: #000;
} Step 3 (JavaScript Code):
Finally, we need to create a copy to clipboard functionality in JavaScript.
Here's a step-by-step explanation of how the code works:
1. The first line of code retrieves the <pre> element from the HTML document using its ID. The ID used here is "myPreTag". The retrieved element is stored in the variable preTag.
2. The next few lines of code create a copy button element using the createElement method. It creates a <span> element and assigns the text "Copy" to its inner text content. Additionally, the class "copy-button" is added to the element using the classList.add method. The created copy button element is stored in the variable copyButton.
3. The appendChild method is used to append the copy button element as a child of the <pre> element (preTag). This ensures that the copy button appears within the <pre> tag in the rendered HTML.
4. An event listener is added to the copy button using the addEventListener method. The event being listened to is the "click" event. When the copy button is clicked, the code inside the event listener function will be executed.
5. Inside the click event listener function, the first action is to temporarily hide the copy button by setting its display CSS property to "none". This is done using the style property of the copyButton element.
6. The code then creates a range using the createRange method. A range represents a portion of the document that can be selected. In this case, the range is created to encompass the entire contents of the <pre> element (preTag). The selectNode method is used to select the contents of preTag and assign it to the range.
7. The code removes any existing ranges from the selection using removeAllRanges, and then adds the newly created range to the selection using addRange. This effectively selects the text inside the <pre> element.
8. A try-catch block is used to handle any errors that may occur when attempting to copy the selected text to the clipboard. Inside the try block, the execCommand method with the argument "copy" is called on the document object. This command is used to copy the selected text to the clipboard.
9. If the copying is successful, the code updates the text content of the copy button to "Copied!" to provide feedback to the user. After a delay of 2000 milliseconds (2 seconds), the text is reset back to "Copy" using a setTimeout function.
10. In case an error occurs during copying, the catch block will be executed, and an error message will be logged to the console using console.error.
11. Finally, regardless of whether the copying was successful or not, the copy button is displayed again by setting its display CSS property to "inline". Additionally, the selected text is deselected by removing all ranges from the selection using removeAllRanges.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
// Get the <pre> element
const preTag = document.getElementById("myPreTag");
// Create a copy button element
const copyButton = document.createElement("span");
copyButton.innerText = "Copy";
copyButton.classList.add("copy-button");
// Append the copy button to the <pre> tag
preTag.appendChild(copyButton);
// Add click event listener to the copy button
copyButton.addEventListener("click", () => {
// Hide the copy button temporarily
copyButton.style.display = "none";
// Create a range and select the text inside the <pre> tag
const range = document.createRange();
range.selectNode(preTag);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
try {
// Copy the selected text to the clipboard
document.execCommand("copy");
// Alert the user that the text has been copied
copyButton.innerText = "Copied!";
setTimeout(function(){
copyButton.innerText = "Copy";
}, 2000);
} catch (err) {
console.error("Unable to copy text:", err);
} finally {
// Show the copy button again
copyButton.style.display = "inline";
// Deselect the text
window.getSelection().removeAllRanges();
}
});Final Output:
See the Pen Code Snippets with Copy Button by Faraz (@codewithfaraz) on CodePen.
Conclusion:
Congratulations! You've successfully learned how to create a code snippet box with a copy button using HTML, CSS, and JavaScript. By implementing this feature, you can enhance the user experience on your website or blog, making it easier for visitors to copy and use your code snippets.
This tutorial covered the necessary steps to build a code box with copy functionality. We started by setting up the HTML structure, using <div> and<pre> elements to encapsulate the code snippet. Then, we explored CSS styling techniques to customize the appearance of the code box, allowing you to match it with your website's design.
The highlight of our tutorial was the implementation of the copy functionality using JavaScript. We walked through the logic of selecting and copying the code, providing you with a clear understanding of how it works. With just a few lines of JavaScript code, you enabled visitors to copy the code snippet with ease.
By following this tutorial, you have gained valuable skills that you can apply to other projects. Consider incorporating code boxes with copy functionality on your personal website, blog, or any platform where you share code examples. Not only will it improve the user experience, but it will also make your content more accessible and user-friendly.
Remember, the code box is just a starting point. Feel free to experiment and expand upon it to suit your specific needs. You can add features like line numbering, and syntax highlighting, or even integrate it with code editors for live editing.
We hope this tutorial has empowered you to create engaging and interactive code snippets that your users will appreciate. Keep exploring and pushing the boundaries of your web development skills. Happy coding!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
