stevenaeola · Twashi1 · Oct 20, 2023 · Oct 20, 2023 · Nov 10, 2023 · Nov 10, 2023
diff --git a/dom_manipulation/billy.jpg b/dom_manipulation/billy.jpg
diff --git a/dom_manipulation/button.html b/dom_manipulation/button.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html>
-    <head><title>JavaScript Button Example</title></head>
+    <head>
+        <title>JavaScript Button Example</title>
+
+        <link rel="stylesheet" href="styles.css">
+
+    </head>
 
     <body>
-    <button id='squeeze'>Squeeze me</button>
+        <img id="bill" class="billImg" src="billy.jpg" width=100% height=100%>
+        <button id='squeeze'>Squeeze me</button>
 
-    <script>
-     let button = document.getElementById("squeeze");
-     function shout(){
-	     alert("... and I squeak");
-     }
-     button.addEventListener("click", shout);
-    </script>
+        <script src="script.js"></script>
     </body>
 </html>
diff --git a/dom_manipulation/script.js b/dom_manipulation/script.js
@@ -0,0 +1,26 @@
+const DECAY_RATE = 0.9
+let intervalID = -1
+
+function decay() {
+    let root = document.querySelector(":root");
+    let styleSheet = getComputedStyle(root);
+
+    let value = parseFloat(styleSheet.getPropertyValue("--billOpacity")) * DECAY_RATE;
+    root.style.setProperty("--billOpacity", `${value}`);
+}
+
+function goodNamesAreHard() {
+    let root = document.querySelector(":root")
+
+    root.style.setProperty("--billOpacity", "1")
+}
+
+function onLoad() {
+    let button = document.getElementById("squeeze");
+    button.addEventListener("click", goodNamesAreHard);
+
+    // Every 50ms
+    intervalID = window.setInterval(decay, 50);
+}
+
+document.addEventListener("DOMContentLoaded", onLoad);
diff --git a/dom_manipulation/styles.css b/dom_manipulation/styles.css
@@ -0,0 +1,12 @@
+:root {
+    --billOpacity: 0;
+}
+
+.billImg {
+    opacity: var(--billOpacity);
+    position: fixed;
+}
+
+#squeeze {
+    position: absolute;
+}
diff --git a/html_css/styling-lists.html b/html_css/styling-lists.html