feat: Popup

static/index.css

@@ -5,6 +5,7 @@
 
 
 #popup-overlay {
+  top: 0;
   position: absolute;
   width: 100%;
   height: 100%;
@@ -180,7 +181,7 @@
     flex-wrap: wrap;
 }
 
-.helpimg {
+#help {
     max-width: 100%;
     width: 3vw;
     height: auto;
@@ -195,7 +196,7 @@
 
 }
 
-.helpimg:hover {
+#help:hover {
     box-shadow: 0.7em 0.7em 0em 0px rgba(0, 0, 0, 0.8);
     transform: translate(0, 0.2em);
 }

static/scripts/popup.js

@@ -1,14 +1,26 @@
+(function(window, document, undefined) {
 
-const popupOverlay = document.getElementById("popup-overlay");
-const popup = document.getElementById("popup");
+  // code that should be taken care of right away
 
-function showPopup() {
+  window.onload = init;
+
+  function init(){
+    const popupOverlay = document.getElementById("popup-overlay");
+    const popup = document.getElementById("popup");
+    const help = document.getElementById("help");
+
+    function showPopup() {
       popupOverlay.style.display = "block";
-}
+    }
 
-function hidePopup() {
+    function hidePopup() {
       popupOverlay.style.display = "none";
-}
+    }
+
+    help.addEventListener("click", showPopup);
+    popupOverlay.addEventListener("click", hidePopup);
+    popup.addEventListener("click", (event) => event.stopPropagation());
+  }
+
+})(window, document, undefined);
 
-popupOverlay.addEventListener("click", hidePopup);
-popup.addEventListener("click", (event) => event.stopPropagation());

templates/decode.html

@@ -25,5 +25,5 @@
 
         </div>
     </div>
-    <img class="helpimg" src="{{ url_for('static', filename='imgs/icon.png') }}">
+    <img id="help" src="{{ url_for('static', filename='imgs/icon.png') }}">
 </body>