![Copy code to clipboard using html css and JavaScript [free source code]](https://i.pinimg.com/736x/3b/c5/b4/3bc5b453e80e8b3b6036cf92e6f84f4d.jpg "Copy code to clipboard using html css and JavaScript [free source code]")
|
Hello everyone! In this article, we'll be exploring how to copy code to clipboard using HTML, CSS, and JavaScript. Whether you're a developer looking to make your code snippets easily shareable or a blogger wanting to provide code examples to your readers.
let's discuss why copying code to clipboard is important. When you're sharing code snippets, you want to make it as easy as possible for your readers to use them. Without a copy-to-clipboard feature, users would have to manually select and copy the code themselves, which can be time-consuming and prone to errors. With a copy-to-clipboard feature, you can streamline the process and make it much easier for your users to use and share your code. First, we need to create a container for our code snippet. We'll use a <pre> tag to preserve whitespace and a <code> tag to indicate that it's code. Next, we'll add some styling to our container to make it look like a code block. Finally, we'll add a click event listener to our container that copies the code to the clipboard when the user clicks on it.
Copy code to clipboard using html css and javascript
Consider creating a copy code to clipboard using HTML, CSS, and JavaScript. Let's start with the project files. You will need three files: index.html, style.css, and script.js. The index.html file contains the static content that your users will read, while the style.css file contains the CSS stylesheet to enhance the appearance of the static files. Finally, the script.js file contains the JavaScript code that brings the project to life.
To get started, create a new HTML file and name it index.html. Copy and paste the given codes into your new HTML file. Remember to save the file with a .html extension. Next, download the necessary files by clicking on the download button provided. This will include the project folder with all the necessary source code files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css" />
<link rel="stylesheet" href="./highlightjs/dracula.css" />
<link rel="stylesheet" href="style.css" />
<script src="main.js" defer></script>
<title>Copy highlight code to the clipboard</title>
</head>
<body>
<div class="container">
<p class="language" id="language-copy">Html</p>
<div class="code-wrapper">
<pre>
<code id="html-code">
<!--Enter Your html Code-->
</code>
</pre>
<button id="copy-html">Copy</button>
</div>
<span id="html-copy-success">Html Code copied!</span>
</div>
<div class="container">
<p class="language" id="language-copy">Css</p>
<div class="code-wrapper">
<pre>
<code id="css-code">
<!--Enter Your css Codr-->
</code>
</pre>
<button id="copy-css">Copy</button>
</div>
<span id="css-copy-success">Css Code copied!</span>
</div>
<div class="container">
<p class="language" id="language-copy">JavaScript</p>
<div class="code-wrapper">
<pre>
<code id="js-code">
<!--Entet Your js Code-->
</code>
</pre>
<button id="copy-js">Copy</button>
</div>
<span id="js-copy-success">Js Code copied!</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
</body>
</html>
Create a new CSS file and name it style.css. Copy and paste the provided code into your new CSS file. Be sure to save the file with a .css extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ADADAD;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
width: 350px;
margin: 60px 10px;
}
.language {
color: white;
font: 30px bolder;
text-transform: uppercase;
font-family: sans-serif;
background-color: #0D19A6;
padding: 10px 16px;
border-radius: 5px 5px 0 0;
text-align: right;
}
.code-wrapper {
position: relative;
}
.code-wrapper pre {
height: 450px;
width: 350px;
overflow: scroll;
background-color: #C5C7E7;
color: white;
padding: 8px 20px;
border-radius: 3px 5px 3px 5px;
}
button {
position: absolute;
top: 8px;
right: 8px;
padding: 7px;
background-color: #0D19A6;
border: none;
outline: none;
color: white;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s ease-in;
opacity: 0;
}
button:hover {
background-color: #1f428790;
}
.code-wrapper:hover button {
opacity: 1;
}
#html-copy-success,
#css-copy-success,
#js-copy-success{
position: absolute;
bottom: 12px;
left: 50%;
background-color: #0D19A6;
color: white;
padding: 16px 32px;
font-size: 24px;
border-radius: 5px;
display: none;
}
#html-copy-success,
#css-copy-success,
#js-copy-success.show-message {
display: inline-block;
}
.hljs {
background-color: transparent;
}
@media screen and (max-width: 980px) {
body {
display: grid;
height: 100%;
}
.container {
width: 450px;
margin: 5px;
}
.code-wrapper pre {
width: 450px;
height: 550px;
}
}
Finally, create a new JavaScript file and name it app.js. Copy and paste the provided code into your new JavaScript file. Remember to save the file with a .js extension.
document.addEventListener('DOMContentLoaded', () => {
hljs.initHighlightingOnLoad();
const htmlcodeBlock = document.getElementById('html-code');
const csscodeBlock = document.getElementById('css-code');
const jscodeBlock = document.getElementById('js-code');
const copyhtml = document.getElementById('copy-html');
const copycss = document.getElementById('copy-css');
const copyjs = document.getElementById('copy-js');
const htmlcopySuccess = document.getElementById('html-copy-success');
const csscopySuccess = document.getElementById('css-copy-success');
const jscopySuccess = document.getElementById('js-copy-success');
const copyTextHtml = () => {
const text = htmlcodeBlock.innerText;
var element = document.createElement('textarea');
document.body.appendChild(element);
element.value = text;
element.select();
document.execCommand('copy');
document.body.removeChild(element);
htmlcopySuccess.classList.add('show-message');
setTimeout(() => {
htmlcopySuccess.classList.remove('show-message');
}, 2500);
navigator.clipboard.writeText(text).then(
() => {
htmlcopySuccess.classList.add('show-message');
setTimeout(() => {
htmlcopySuccess.classList.remove('show-message');
}, 2500);
},
() => {
console.log('Error writing to the clipboard');
}
);
};
copyhtml.addEventListener('click', copyTextHtml);
const copyTextCss = () => {
const text = csscodeBlock.innerText;
var element = document.createElement('textarea');
document.body.appendChild(element);
element.value = text;
element.select();
document.execCommand('copy');
document.body.removeChild(element);
csscopySuccess.classList.add('show-message');
setTimeout(() => {
csscopySuccess.classList.remove('show-message');
}, 2500);
navigator.clipboard.writeText(text).then(
() => {
csscopySuccess.classList.add('show-message');
setTimeout(() => {
csscopySuccess.classList.remove('show-message');
}, 2500);
},
() => {
console.log('Error writing to the clipboard');
}
);
};
copycss.addEventListener('click', copyTextCss);
const copyTextJs = () => {
const text = jscodeBlock.innerText;
var element = document.createElement('textarea');
document.body.appendChild(element);
element.value = text;
element.select();
document.execCommand('copy');
document.body.removeChild(element);
jscopySuccess.classList.add('show-message');
setTimeout(() => {
jscopySuccess.classList.remove('show-message');
}, 2500);
navigator.clipboard.writeText(text).then(
() => {
jscopySuccess.classList.add('show-message');
setTimeout(() => {
jscopySuccess.classList.remove('show-message');
}, 2500);
},
() => {
console.log('Error writing to the clipboard');
}
);
};
copyjs.addEventListener('click', copyTextJs);
});
With the necessary files in place, you can now create the copy code to clipboard feature using HTML, CSS, and JavaScript. This fun and rewarding project can be used in a variety of different contexts. By following these steps, you can easily create a unique and useful feature for your website that will enhance the user experience. And the best part? You can obtain all the necessary source code files completely free of charge.