Merge pull request #45 from beavertronics/fix-cal-hiding

Author: SketchedDoughnut

landing/index.html

@@ -14,7 +14,7 @@
     <link rel="icon" type="image/png" href="/assets/header/ravioli.png"/>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <script src="/shared/JS/script.js"></script>
-    <script src="/index.js"></script>
+    <script src="index.js"></script>
     <script src="/shared/JS/slideshow.js"></script>
     <link rel="stylesheet" href="/shared/css/fonts.css"/>
     <link rel="stylesheet" href="/shared/css/style.css"/>

landing/index.js

@@ -3,14 +3,20 @@ const CALENDAR_MINIMUM_WIDTH = 850; // I found this number by shrinking the page
 
 // runs when the page is done loading
 // calls on the on_resize function for loading page
-window.addEventListener('load', function () {
+window.addEventListener('resize', showhide);
+window.addEventListener('load', showhide);
+
+function showhide() {
   let current_screen_width = window.innerWidth
 
   // if the windows width is less then the minimum calender width,
   // remove the calendar and display alternate text that the page is too small
   // and redirect them to the calendar externally 
   if (current_screen_width <= CALENDAR_MINIMUM_WIDTH) {
-    document.getElementById("google calendar").remove()
-    document.getElementById("alt calendar text").classList.toggle("hidden")
-  } 
-})
+    document.getElementById("google calendar").classList.add("hidden")
+    document.getElementById("alt calendar text").classList.remove("hidden")
+  } else {
+    document.getElementById("google calendar").classList.remove("hidden")
+    document.getElementById("alt calendar text").classList.add("hidden")
+  }
+}