Code copy to Clipboard made with Html,CSS and JAVASCRIPT it is made by Coding Vlogs youtube Channel. you can download the source code or copy source code and use it for free. if you have not subscribe our youtube channel so subscribe now we are creating beautiful coding project and provide source code for free. For Download Source Code Scroll Down ↓
HTML
<!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://unicons.iconscout.com/release/v4.0.0/css/line.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css">
<!-- Default Highlight.js css -->
<!-- <link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css"
/> -->
<!-- Custom Highlight.js theme Dracula -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<title>Coding Vlogs®</title>
</head>
<body>
<div class="container fixed-top">
<h1 class="language" id="language-copy">css:</h1>
<div class="code-wrapper">
<pre>
<code id="code">
.textarea {
height: 28px;
width: 400px;
}
#textarea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 28px;
overflow: auto;
padding: 2px;
resize: both;
width: 400px;
}
.input {
margin-top: 5px;
width: 400px;
}
#input {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 398px;
}</code>
</pre>
<button id="copy-button"><i class="uil uil-copy"></i></button>
</div>
<span id="copy-success">Code copied!</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/src/highlightjs-line-numbers.min.js"></script>
<script>hljs.initHighlightingOnLoad()
hljs.initLineNumbersOnLoad();</script>
</body>
</html>
Style (CSS)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
width: 500px;
overflow-x: auto;
}
.language {
color: white;
background-color: #1f4287;
padding: 12px 16px;
border-radius: 5px 5px 0 0;
text-align: right;
}
.code-wrapper {
position: relative;
}
.code-wrapper pre {
background-color: #071e3d;
color: white;
padding: 8px 20px;
border-radius: 0 0 5px 5px;
}
#copy-button {
position: absolute;
top: 8px;
right: 8px;
padding: 7px;
background-color: #1f4287;
border: none;
outline: none;
color: white;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s ease-in;
opacity: 0;
}
#copy-button:hover {
background-color: #1f428790;
}
.code-wrapper:hover #copy-button {
opacity: 1;
}
#copy-success {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
background-color: #1f4287;
color: white;
padding: 16px 32px;
font-size: 24px;
border-radius: 5px;
display: none;
}
#copy-success.show-message {
display: inline-block;
}
.hljs {
background-color: transparent;
}
JavaScript
document.addEventListener('DOMContentLoaded', () => {
hljs.initHighlightingOnLoad();
const codeBlock = document.getElementById('code');
const copyButton = document.getElementById('copy-button');
const copySuccess = document.getElementById('copy-success');
const copyTextHandler = () => {
const text = codeBlock.innerText;
navigator.clipboard.writeText(text).then(
() => {
copySuccess.classList.add('show-message');
setTimeout(() => {
copySuccess.classList.remove('show-message');
}, 2500);
},
() => {
console.log('Error writing to the clipboard');
}
);
};
copyButton.addEventListener('click', copyTextHandler);
});
Back-To-Top.html
Code
1.15KB
.html
All