update

Hoocs151 · May 11, 2023 · 2e431c1 · 2e431c1
1 parent 3d4842c
commit 2e431c1
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 10 deletions.
diff --git a/script.js b/script.js
@@ -53,11 +53,12 @@ const generateColor = () => {
 
 const copyColor = () => {
     result.select()
-    // document.execCommand("copy")
     navigator.clipboard.writeText(result.value)
     copyBtn.innerHTML = "Copied"
+    copyBtn.classList.add("animate")
     setTimeout(() => {
         copyBtn.innerHTML = '<i class="far fa-copy"></i>Copy Color Code'
+        copyBtn.classList.remove("animate")
     }, 1000)
 }
 

diff --git a/style.css b/style.css
@@ -28,7 +28,6 @@ body,
     box-shadow: 0 2em 3em rgba(0, 0, 0, 0.2);
 }
 
-/* Set styles for color sliders */
 .wrapper {
     width: 100%;
     display: flex;
@@ -52,7 +51,6 @@ input[type="range"] {
     color: #0075ff;
 }
 
-/* Set styles for result section */
 .result {
     width: 100%;
     display: grid;
@@ -110,7 +108,6 @@ button:focus {
     box-shadow: 0 0 0 2px #0075ff;
 }
 
-/* Set styles for hex code */
 .hex-code {
     font-size: 1.2em;
     text-align: center;
@@ -124,10 +121,28 @@ button:focus {
 } 
 
 #random-btn:hover {
-    background-color: #d2d2d2;
-} 
+    background-color: #0055cc;
+    animation: shake 0.5s;
+  }
+
+  @keyframes shake {
+    0% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(-5px);
+    }
+    50% {
+      transform: translateX(0);
+    }
+    75% {
+      transform: translateX(5px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
 
-/* Set styles for color sliders */
 .wrapper {
     width: 100%;
     display: flex;
@@ -151,7 +166,6 @@ input[type="range"] {
     color: #0075ff;
 }
 
-/* Set styles for result section */
 .result {
     width: 100%;
     display: grid;
@@ -209,7 +223,6 @@ button:focus {
     box-shadow: 0 0 0 2px #0075ff;
 }
 
-/* Set styles for hex code */
 .hex-code {
     font-size: 1.2em;
     text-align: center;
@@ -220,8 +233,22 @@ button:focus {
 
 .hex-code:hover {
     background-color: #fff;
+    animation: highlight 0.5s;
+
 } 
 
+@keyframes highlight {
+    0% {
+      background-color: #fff;
+    }
+    50% {
+      background-color: #d2d2d2;
+    }
+    100% {
+      background-color: #fff;
+    }
+  }
+
 #random-btn:hover {
     background-color: #0055cc;
 } 
@@ -238,7 +265,7 @@ button:focus {
     align-items: center;
     justify-content: center;
     gap: 0.5em;
-    transition: all 0.3s ease;
+    transition: background-color 0.5s ease-in-out;
 }
 
 #copy-btn:hover {
@@ -248,6 +275,7 @@ button:focus {
 
 #copy-btn:active {
     background-color: #0055cc;
+    transition: background-color 0s;
 }
 
 #copy-btn:focus {
@@ -278,4 +306,20 @@ button:focus {
     -webkit-appearance: none;
     border-radius: 50%;
     cursor: pointer;
+}
+
+@keyframes buttonAnimation {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+#copy-btn.animate {
+    animation: buttonAnimation 0.5s;
 }