Differences

This shows you the differences between two versions of the page.

--- dad_jokes [2025/03/01 06:34] – created Scott Larson
+++ dad_jokes [2025/06/26 01:44] (current) – removed Scott Larson
@@ Line 1: / Line 1: @@
-====== Dad Joke Generator ======
-<html>
-<head>
-    <title>Slider with Rotating Arrow on Grid</title>
-    <style>
-        body {
-            text-align: center;
-            font-family: Arial, sans-serif;
-        }
-        #grid-container {
-            position: relative;
-            width: 200px;
-            height: 200px;
-            background-image: linear-gradient(to right, lightgray 1px, transparent 1px),
-                              linear-gradient(to bottom, lightgray 1px, transparent 1px);
-            background-size: 20px 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 20px auto;
-        }
-        #arrow {
-            position: absolute;
-            width: 0;
-            height: 0;
-            border-left: 20px solid transparent;
-            border-right: 20px solid transparent;
-            border-bottom: 60px solid black;
-            transform-origin: bottom center;
-            transform: rotate(1deg);
-            transition: transform 0.1s ease-in-out;
-        }
-    </style>
-    <script>
-        function updateValue(val) {
-            document.getElementById("sliderValue").innerText = val;
-            document.getElementById("arrow").style.transform = `rotate(${val}deg)`;
-        }
-    </script>
-</head>
-<body>
-    <label for="slider">Select an angle (1-90 degrees):</label>
-    <input type="range" id="slider" min="1" max="90" step="1" value="1" oninput="updateValue(this.value)">
-    <span id="sliderValue">1</span>°
-    <div id="grid-container">
-        <div id="arrow"></div>
-    </div>
-</body>
-</html>