yipee

Tyler-Lentz · Jun 19, 2024 · 031ff3d · 031ff3d
1 parent cfdedc5
commit 031ff3d
Show file tree

Hide file tree

Showing 22 changed files with 81 additions and 0 deletions.
diff --git a/images/yipee/yipee-0.gif b/images/yipee/yipee-0.gif
diff --git a/images/yipee/yipee-1.gif b/images/yipee/yipee-1.gif
diff --git a/images/yipee/yipee-10.gif b/images/yipee/yipee-10.gif
diff --git a/images/yipee/yipee-11.gif b/images/yipee/yipee-11.gif
diff --git a/images/yipee/yipee-12.gif b/images/yipee/yipee-12.gif
diff --git a/images/yipee/yipee-13.gif b/images/yipee/yipee-13.gif
diff --git a/images/yipee/yipee-14.gif b/images/yipee/yipee-14.gif
diff --git a/images/yipee/yipee-15.gif b/images/yipee/yipee-15.gif
diff --git a/images/yipee/yipee-16.gif b/images/yipee/yipee-16.gif
diff --git a/images/yipee/yipee-17.gif b/images/yipee/yipee-17.gif
diff --git a/images/yipee/yipee-18.gif b/images/yipee/yipee-18.gif
diff --git a/images/yipee/yipee-19.gif b/images/yipee/yipee-19.gif
diff --git a/images/yipee/yipee-2.gif b/images/yipee/yipee-2.gif
diff --git a/images/yipee/yipee-3.gif b/images/yipee/yipee-3.gif
diff --git a/images/yipee/yipee-4.gif b/images/yipee/yipee-4.gif
diff --git a/images/yipee/yipee-5.gif b/images/yipee/yipee-5.gif
diff --git a/images/yipee/yipee-6.gif b/images/yipee/yipee-6.gif
diff --git a/images/yipee/yipee-7.gif b/images/yipee/yipee-7.gif
diff --git a/images/yipee/yipee-8.gif b/images/yipee/yipee-8.gif
diff --git a/images/yipee/yipee-9.gif b/images/yipee/yipee-9.gif
diff --git a/images/yipee/yippee.mp3 b/images/yipee/yippee.mp3
diff --git a/yipee.html b/yipee.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Yipee!</title>
+    <link rel="stylesheet" href="css/global.css">
+    <style>
+        .yipee {
+            position: absolute;
+            top: 20vh;
+            animation-name: move;
+            animation-duration: 2.2s;
+            animation-timing-function: ease-in-out;
+            animation-iteration-count: 1;
+        }
+
+        @keyframes move {
+            from {
+                left: 0vw;
+            } 
+            to {
+                left: 60vw;
+            }
+        }
+
+        @media (max-width: 1250px) {
+            @keyframes move {
+                from {
+                    left: 0vw;
+                } 
+                to {
+                    left: 0vw;
+                }
+            }
+        }
+
+        #btn-container {
+            display: flex;
+            height: 100vh;
+            flex-direction: column;
+            justify-content: flex-end;
+            align-items: center;
+        }
+
+        #btn {
+            width: fit-content;
+            margin-bottom: 10rem;
+            font-size: 2rem;
+        }
+
+    </style>
+    <script>
+        var counter = 0;
+        document.addEventListener("DOMContentLoaded", () => {
+            let btn = document.getElementById('btn');
+            btn.addEventListener("click", () => {
+                btn.insertAdjacentHTML("afterend", `
+                    <img class="yipee" style="left: 0vw" id="yippee-${counter}"src="./images/yipee/yipee-${counter % 20}.gif"></img> 
+                `);
+                setTimeout(() => {
+                    let sound = new Audio('./images/yipee/yippee.mp3');
+                    sound.play();
+                }, 300);
+                const curr_val = counter;
+                setTimeout(() => {
+                    document.getElementById(`yippee-${curr_val}`).remove();
+                }, 2200);
+                counter++;
+            });
+        });
+    </script>
+
+<body>
+    <div id="btn-container">
+        <button id="btn">Click me</button>
+    </div>
+</body>
+
+</html>