Responsive code snippet display box with a copy-to-clipboard button | source code
In this article, we'll make a code snippet display box with a copy-to-clipboard button and a filename. It is accessible to code and an excellent project to improve coding skills. From the perspective of designing, we will create this project with a dark theme. Don’t worry you’ll get the source code of this project.
If you want to customize the color according to your need. We use Vanilla JavaScript in this project to make code neat and clean. Also, you can use this script to display code snippets in your blog posts, websites, and so on.
Firstly, you will have to set up a coding environment and connect CSS and JavaScript files to HTML file to work with it properly. Otherwise, you will add styles and scripts directly to the HTML page.
Let’s get started!
Let’s set up our project
Let’s first create an HTML file named index.html. Then add an HTML boilerplate to our HTML file. After completing the HTML file, we also have to create a CSS file named style.css to style our elements. And a JavaScript file named main.js to add logic.
HTML source code of “index.html” file -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code snippet box</title>
<link rel="stylesheet" href="style.css">
</head>Don’t forget to add CSS and JavaScript files-
Adding HTML to our project
Now add the HTML source code given below to your index.html file inside the <body></body> tag. We will understand it later.
<div class="CodeSnippetBox">
<div class="CodeSnippetBoxHeader">
<pre class="CodeSnippetBoxFileName">index.html </pre>
<pre class="CodeSnippetBoxCopytoClipboard">Copy! </pre>
</div>
<div class="CodeSnippetBoxBody">
<pre class="CodeSnippetBoxBodyText"><code>
<div class='container'>
<span>HTML</span>
<button id='button' class='btn'>Click me
</button>
</div>
</code>
</pre>
</div>
</div>Understanding the source code
Here, <div class="CodeSnippetBox"> is the main box or container which contains two divs inside it-
- <div class="CodeSnippetBoxHeader">: This is a header div that contains two components first is a file name with the class ”CodeSnippetBoxFileName” and the second one is a copy-to-clipboard button with the class “CodeSnippetBoxCopytoClipboard”.
- <div class="CodeSnippetBoxBody">: This div is the body of the code snippet display box. It contains <pre></pre> tag with the class “CodeSnippetBoxBody”.
The <pre></pre> tag defines the preformatted text with the font “monospace” by default. <pre></pre> tag contains <code></code> which defines the piece of computer code.
We write our whole HTML-encoded source code inside the <code></code> tag. All code written inside the <code></code> tag will display on the browser.
Note- Encode the HTML code before pasting it into the <code></code> tag. There are various free HTML encoders available on the internet.
That’s it, we complete our HTML part. Now let’s jump to the CSS part to style our Code Snippet Display Box.
Adding Styles to our project
We created a style.css file to add CSS style properties to our project. Copy the CSS properties given below and paste them into the style.css file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background: rgb(33, 33, 46);
display: flex;
justify-content: center;
align-items: center;
}
.CodeSnippetBox {
width: 90%;
height: fit-content;
/* padding: 0.5rem; */
border-radius: 0.5rem;
border-left: 0.4rem solid rgb(108, 108, 187);
background: rgb(54, 54, 74);
color: aliceblue;
}
.CodeSnippetBoxHeader {
width: 100%;
height: fit-content;
padding: 0.4rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.CodeSnippetBoxFileName {
width: fit-content;
height: fit-content;
background: rgb(33, 33, 46);
padding: 0.3rem;
text-align: center;
border-radius: 0.3rem;
}
.CodeSnippetBoxCopytoClipboard {
width: fit-content;
height: fit-content;
text-align: center;
font-size: 0.7rem ;
color: rgba(255, 255, 255,0.4);
background: transparent;
cursor: copy;
}
.CodeSnippetBoxBody {
width: 100%;
height: fit-content;
padding: 0 0.4rem 0.4rem 0.4rem;
}
.CodeSnippetBoxBodyText {
width: 100%;
height: fit-content;
background: rgb(33, 33, 46);
border-radius: 0.3rem;
border: 0.2rem solid rgb(33, 33, 46);
padding-right: 0.3rem;
overflow: auto;
}
.CodeSnippetBoxBodyText::-webkit-scrollbar{
height: 0.3rem;
}
.CodeSnippetBoxBodyText::-webkit-scrollbar-track{
background-color: transparent;
}
.CodeSnippetBoxBodyText::-webkit-scrollbar-thumb{
background-color: rgb(108, 108, 187);
border-radius: 2rem;
background-clip: content-box;
}
@media (min-width:500px) {
.CodeSnippetBox {
width: 30rem;
}
}Understanding CSS properties
In the code shown above, properties written inside *{} will be applied to all elements because (*) is the universal selector which selects all elements inside the web page.
Using (.) before the text in CSS, We call the elements by their classes like “.CodeSnippetBox”.
- ::-WebKit-scrollbar is used to style the scrollbar. Here we make the custom scrollbar by overriding default properties.
- ::-WebKit-scrollbar-track: This property specifies the style of the scrollbar track.
- ::-WebKit-scrollbar-thumb: property specifies the style of the scrollbar thumb that will move on the scrolling page.
- @media is a media query used to make code responsive.
But we also have to add logic to our code project to make the display code accessible with one click. Let’s move on JavaScript part-
Adding logic to our project
We completed the style section of our project. It looks pretty much cool. But does not have a copy-to-clipboard feature. Let’s add some scripts to it and see what happens.
Copy the JavaSript source code mentioned below and paste it into your main.js file.
document.addEventListener("click", function (copyEvent) {
if (copyEvent.target.classList[0] === "CodeSnippetBoxCopytoClipboard") {
navigator.clipboard
.writeText(
copyEvent.target.parentElement.parentElement.children[1].children[0]
.children[0].innerText
)
.then(
() => {
console.log("clipboard text successfully copied!");
copyEvent.target.innerText = "copied!";
setTimeout(function () {
copyEvent.target.innerText = "copy!";
}, 1000);
},
(err) => {
console.log("failed to copied to clipboard dur to ", err);
}
);
}
});Understanding Javascript logic
The script mentioned above has a function. This function is triggered when the user clicks on the document. I used an “EventListener” which calls a function on performing an event such as the “click” event used in our case.
After calling the function, the “If” condition statement checks whether it is a copy-to-clipboard button or not. If the user clicked the copy button then this condition is fulfilled. navigator.clipboard.writeText():
This command is used to copy targeted text. In this case, it will copy text written in <code></code> tag. This command will return a promise. It means the text will copy or not. Here “.then()” method handles the promise and returns two functions. The first function calls when the promise will be fulfilled. And the second one calls when the promise will not be fulfilled.
When the promise is fulfilled the first function changes the “copy!” text into the “copied!”. This indicates to the user that the code is copied. Let’s run a “setInterval” which again changes the “copied!” text into the “copy!”. And we set its duration to 1000 milliseconds or 1 second.
Conclusion
Well, this project seems tough but believe me it is not tough. After all, this project improves your problem-solving skill and code understanding. Now, you learned how to create a code snippet box with a copy-to-clipboard button. It has its advantages and limits. This project can display your source code on your website, blog, and article.
I’m sure you learned something new from this article. For more articles and source codes like this keep visiting. Leave a comment to help us to improve our content. more articles and source codes like this keep visiting. Leave a comment to help us to improve our content. We do our best.
If you want the source code of any code project, JUST TELL.
Thank you!