paragraph added about changes

Author: b00kworm4lyf3

CSS/wa12.css

@@ -13,17 +13,24 @@ html {
   body {
     font-family: 'Courier New', Courier, monospace;
     background-color: #000000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
   }
 
   .app {
-    position: absolute;
+    /* position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%); */
     width: 600px;
     background-color: white;
     border-radius: 5px;
     box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+    margin-bottom: 30px;
+    margin-top: 50px;
   }
 
   header {
@@ -87,6 +94,20 @@ html {
     color: #666666;
     cursor: not-allowed;
   }
+
+footer{
+  width: 900px;
+  font-size: 0.9em;
+  padding: 10px;
+  text-align: center;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 5px;
+}
+
+p{
+  text-align: center;
+  margin: 0;
+}
 
   @media screen and (max-width: 600px) {
     .app {

js/wa12.js

@@ -100,6 +100,10 @@ function updateUIColors(hex){
     quotes.style.backgroundColor = `#${hex}` + "65";
     document.querySelector("#js-quote-text").style.color = textColor;
     controls.style.backgroundColor = `#${hex}` + "95";
+    document.querySelector("footer").style.color = textColor;
+    document.querySelectorAll("a").forEach((e) => {
+        e.style.color = textColor;
+    });
 
     btn.style.backgroundColor = `#${hex}`;
     btn.style.color = textColor;

wa/wa12.html

@@ -24,6 +24,14 @@
           </button>
           <!-- <a class="answer button" id="js-tweet" target="_blank" rel="noreferrer">Show me the answer!</a> -->
         </section>
-      </div>
-</body>
+    </div>
+    <footer>
+      <p>I made this app my own using <a href = "https://v2.jokeapi.dev">JokeAPI</a> to generate nerdy jokes
+      and <a href = "https://php-noise.com/">PHP Noise</a> to generate the background images. Getting the background
+      to work was weird because I was trying to treat it the same as the json from JokeAPI, but it turned out I 
+      could just treat it as an image link, pretty cool!<br><br></p>
+      <p>Using the same random hex code I generated for the background to update the colors of the UI was a fun
+        challenge too, and I think it really brought the whole thing together.</p>
+    </footer>
+  </body>
 </html>