From 76f991a06620ae3dacaf73e57802c1ce5f811477 Mon Sep 17 00:00:00 2001 From: Jolene Kearse Date: Mon, 3 Oct 2022 15:02:56 -0400 Subject: [PATCH] added copy button --- copy-icon.png | Bin 0 -> 359 bytes css/darkaqua.css | 61 +++++++++++++++++++++++++++++++++++++++++++++++ index.html | 8 +++++-- js/script.js | 47 +++++++++++++++++++++++++----------- 4 files changed, 100 insertions(+), 16 deletions(-) create mode 100644 copy-icon.png diff --git a/copy-icon.png b/copy-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..93756c61eaa8ef3908da7454b4de048ccc5341bd GIT binary patch literal 359 zcmV-t0hs=YP)q+oq@>%`xvqC~7ptC?P}g+Z$_UFG5kHXT((B86^Z7V$NtG&=7Mm z-oLb~DQ5MVQ5}~zH2>Dxc>csF&;AE+Dg^n&%*IT8_FFN(*0YLHLhefqGHZRy;+QER zN9>rKksi_;ElFz}fGhc9miv6lAz;U3^)3N{dYIx6sDr5jf%2GY5GaeO3W0K%B9JZD z&De9&yJJLj#$q|K^qlnG3kt#Z1z9IxmYup_s|3Vb0^%(J@s@yiOF+COAl?!XZwZLE zsNN8*F~2d!j)-Ia2=O;N5)f|*h_|Gtmi+5q&HT-dyZ~=@3AA#^MNa?#002ovPDHLk FV1m@3n|S~L literal 0 HcmV?d00001 diff --git a/css/darkaqua.css b/css/darkaqua.css index eacef28..18d3f11 100644 --- a/css/darkaqua.css +++ b/css/darkaqua.css @@ -147,6 +147,17 @@ div.misc1 { opacity: 1; transition: 0.4s; } +.button3 { + background-color: transparent; + border: none; + cursor: pointer; + transform: scale(.7); + transition: 0.4s; +} +.button3 img { + height: 3em; + filter: invert(86%) sepia(42%) saturate(3730%) hue-rotate(122deg) brightness(97%) contrast(103%); +} .button1 {} .button2 {} .button1:hover { @@ -159,6 +170,50 @@ div.misc1 { transform: scale(1.1); color: #001717; } +.button3 img:hover, +.button3 img:focus { + filter: invert(94%) sepia(84%) saturate(2523%) hue-rotate(163deg) brightness(106%) contrast(105%); + transform: scale(1.1); +} +/* copy code tooltip */ +#copyTooltip { + position: relative; + display: inline-block; + bottom: 100%; + left: 10%; + color: #00f5f5; + cursor: auto; +} +/* animation to remove tooltip */ +.slide-out-bck-center { + -webkit-animation: slide-out-bck-center 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both; + animation: slide-out-bck-center 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both; +} +@-webkit-keyframes slide-out-bck-center { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0); + opacity: 1; + } + 100% { + -webkit-transform: translateZ(-1100px); + transform: translateZ(-1100px); + opacity: 0; + } + } + @keyframes slide-out-bck-center { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0); + opacity: 1; + } + 100% { + -webkit-transform: translateZ(-1100px); + transform: translateZ(-1100px); + opacity: 0; + } + } + .box1 { margin: 30px; border: 1px solid #00f5f5; @@ -174,6 +229,12 @@ div.misc1 { border-radius: 5px; background: #001717; } +.hex-info { + display: flex; + justify-content: center; + align-items: center; + height: 3em; +} label { text-transform: uppercase; margin: 20px 0px; diff --git a/index.html b/index.html index cf07d1e..4458441 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Hex© Color Code - + @@ -35,7 +35,10 @@ - +
+ + +
@@ -60,6 +63,7 @@ @github
-owned by Yashvardhan Baid + \ No newline at end of file diff --git a/js/script.js b/js/script.js index 73de48b..78497b5 100644 --- a/js/script.js +++ b/js/script.js @@ -1,21 +1,40 @@ -(function(window, document) {})(window, document); +(function (window, document) {})(window, document); function check1() { - var x = document.getElementsByClassName("input"); - var i; - for (i = 0; i < x.length; i++) { - x[i].style.borderColor = document.getElementById('color-box').value; - } + var x = document.getElementsByClassName("input"); + var i; + for (i = 0; i < x.length; i++) { + x[i].style.borderColor = document.getElementById("color-box").value; + } - document.getElementById('value-box').value = document.getElementById('color-box').value; + document.getElementById("value-box").value = + document.getElementById("color-box").value; } function check2() { - var x = document.getElementsByClassName("input"); - var i; - for (i = 0; i < x.length; i++) { - x[i].style.borderColor = document.getElementById('value-box').value; - } + var x = document.getElementsByClassName("input"); + var i; + for (i = 0; i < x.length; i++) { + x[i].style.borderColor = document.getElementById("value-box").value; + } - document.getElementById('color-box').value = document.getElementById('value-box').value; -} \ No newline at end of file + document.getElementById("color-box").value = + document.getElementById("value-box").value; +} + +function copyToClipboard() { + const copyHex = document.getElementById("value-box"); + copyHex.addEventListener("change", updateValue); + function updateValue(e) { + copyHex.setAttibute("value", e.target.value); + } + const copyCode = copyHex.value; + navigator.clipboard.writeText(copyCode); + + const tooltip = document.getElementById("copyTooltip"); + tooltip.textContent = "Copied!"; + tooltip.classList.add("slide-out-bck-center"); +} + +const copyButton = document.getElementById("copyButton"); +copyButton.addEventListener("click", copyToClipboard);