+ 
+
-
+
diff --git a/dom_manipulation/script.js b/dom_manipulation/script.js
new file mode 100644
index 0000000..8ff5e2f
--- /dev/null
+++ 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);
\ No newline at end of file
diff --git a/dom_manipulation/styles.css b/dom_manipulation/styles.css
new file mode 100644
index 0000000..ed19093
--- /dev/null
+++ b/dom_manipulation/styles.css
@@ -0,0 +1,12 @@
+:root {
+ --billOpacity: 0;
+}
+
+.billImg {
+ opacity: var(--billOpacity);
+ position: fixed;
+}
+
+#squeeze {
+ position: absolute;
+}
\ No newline at end of file
diff --git a/html_css/styling-lists.html b/html_css/styling-lists.html
index 5efcc09..cd0fed0 100644
--- a/html_css/styling-lists.html
+++ b/html_css/styling-lists.html
@@ -24,6 +24,12 @@
line-height: 1.5;
}
+ .img_style {
+ padding-left: 4rem;
+ width: 20rem;
+ height: 20rem;
+ }
+
/* Unordered list styles */
ul {
@@ -63,10 +69,10 @@ Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.
Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.
+