Added test js

css/general.css

@@ -133,12 +133,6 @@ nav li a:focus::after{
 }
 
 /* Responsive Functions */
-@media (max-width: 880px) {
-  #photo-release-container {
-    transform: scale(0.8);
-    font-size: 20px;
-  }
-}
 @media (max-width: 800px) {
     .checkbtn {
         display: inline-block;
@@ -486,7 +480,7 @@ section {
   text-align: center;
   border-radius: 10px;
   background-color: #202329;
-  padding: 20px 0;
+  padding: 15px 10px;
   margin: auto;
 }
 
@@ -610,7 +604,7 @@ section {
   margin-top: 70px;
   font-size: 22px;
   font-weight: 400;
-  margin-bottom: 300px;
+  margin-bottom: 250px;
   text-align: left;
 }
 #timeline-descriptions-wrapper div {
@@ -1043,9 +1037,9 @@ section {
   border: 1px solid white;
   background-color: #272b1f;
   margin: 10px auto;
-  width: 100%;
+  width: 90%;
   max-width: 850px;
-
+  min-width: 200px;
   padding: 10px;
 }
 

index.html

@@ -19,6 +19,19 @@
     <meta name="description" content="The official webiste for the Gilroy Hacks Hackathon. Strengthen your skills and collaborate with others to create something useful.">
     <meta name="keywords" content="Gilroy Hacks, GilroyHacks, Gilroy, hackathon, Bay Area, GECA, Dr. TJ Owens Gilroy Early College Academy">
 
+    <script src="js/jquery-3.6.0.min.js"></script>
+    <!-- <script src="js/filldata_checkbox.js"></script>
+    <script type="text/javascript">
+        document.onload = function loadData()
+        {
+            function loadData() {
+            if (localStorage.getItem('checked') == 'true') {
+                document.getElementById("01").checked = true;
+            }
+            console.log("test");
+            }
+        }
+    </script> -->
     <style>
         @font-face {
             font-family: "Glacial Indifference";
@@ -84,9 +97,8 @@
                 <article id="event-description">
                     <h2 id="description-heading">Our Mission Statement</h2>
                     <div id="event-main-box">
-                        <br>
                         <div id="description-content">Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure to local high school students.</div>
-                        <br><hr class="line"><br>
+                        <hr class="line">
                         <ul class="list">
                             <li>Even if you're not an expert at coding, this hackathon offers an opportunity for you to strengthen your skills and collaborate with others to create something useful. Below are important dates to keep in mind:
                                 <ul style="margin-left: 25px">
@@ -135,6 +147,7 @@
                                         <p class="timeline-description">The official start of the hackathon where we deliver the opening presentation along with the finalized teams, prompts, rules, and timeline.<br>
                                             <ul class="timeline-description-list">
                                                 <li>It is highly recommended you attend this portion of the hackathon (at least half of your team must attend to participate)</li>
+                                                <li>Along with the in-person event held at the Community Room at the Gilroy Library, we will be streaming the event on zoom</li>
                                                 <li><span class="important-text">=IMPORTANT=</span> DO NOT START CODING during this period</li>
                                             </ul>
                                         </p>
@@ -169,7 +182,7 @@
                                                 <li>Be Creative! Make your product stand out by including a demo or showing its function across multiple sources</li>
                                                 <li>Presentations will occur in order of team number (i.e. Team 1 will go first)</li>
                                                 <li>It is advised you have your camera on and that you ensure your microphone and tech work before presenting</li>
-                                                <li><span class="important-text">=IMPORTANT=</span> 5 minutes max per team. Your team is not allowed to go ABOVE those 5 minutes... Use your time wisely.</li>
+                                                <li><span class="important-text">=IMPORTANT=</span> Your team's presentation is not allowed to go ABOVE 5 minutes... Use your time wisely.</li>
                                                 <li>Your team will be graded on both the product and presentation as per the rubric</li>
                                             </ul>
                                         </p>
@@ -190,8 +203,10 @@
                     </div>
                 </article>
                 <article id="signup-article">
-                    <h2 id="signup-header">Signup Checklist</h2>
-                    <span class="caption">Click each step to cross it out!</span>
+                    <div id="signup-title">
+                        <h2 id="signup-header">Signup Checklist</h2>
+                        <span class="caption">Click each step to cross it out!</span>
+                    </div>
                     <div id="steps-card">
                         <div id="signup-container">
                             <div class="outer">
@@ -199,7 +214,7 @@
                                 <div class="info">
                                     <!-- Checklist src: https://codepen.io/milanraring/pen/QWbqBGo -->
                                     <div id="checklist">
-                                        <input id="01" type="checkbox" name="r" value="1">
+                                        <input id="01" onclick="saveData()" type="checkbox" name="r" value="1">
                                         <label for="01">
                                             <p class="title">1. Sign up w/ this <a class="link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7" title="Signup Form">form</a></p>
                                         </label>
@@ -258,8 +273,10 @@
                             </div>
                         </div>
                     </div>
-                    <h2 id="sponsor-heading">Sponsors</h2>
-                    <span class="caption">Thank you to all these amazing sponsors!</span>
+                    <div id="sponsor-title">
+                        <h2 id="sponsor-heading">Sponsors</h2>
+                        <span class="caption">Thank you to all these amazing sponsors!</span>
+                    </div>
                     <div id="sponsor-container">
                         <a href="https://sccld.org/" target="_blank">
                             <img id="gilroy-library-logo" src="img/SCCLD_logo.png" alt="gilroy library logo">
@@ -516,5 +533,6 @@
 </footer>
 <script src="js/scroll_nav.js"></script>
 <script src="js/scroll_element.js"></script>
+<script src="js/data_checkbox.js"></script>
 </body>
 </html>

js/data_checkbox.js

@@ -0,0 +1,11 @@
+function saveData() {
+    var checkBox = document.getElementById("01");
+
+    if (checkBox.checked == true){
+        localStorage.setItem('checked', 'true')
+    }
+    else {
+        localStorage.setItem('checked', 'false')
+    }
+    console.log(localStorage);
+}

js/filldata_checkbox.js

@@ -0,0 +1,6 @@
+function loadData() {
+    if (localStorage.getItem('checked') == 'true') {
+        document.getElementById("01").checked = true;
+    }
+    console.log("test");
+}

js/scroll_element.js

@@ -77,7 +77,10 @@ const observer = new IntersectionObserver(entries => {
   observer.observe(document.querySelector('#description-heading'));
   observer.observe(document.querySelector('#event-main-box'));
   observer.observe(document.querySelector('#timeline'));
-  observer.observe(document.querySelector('#signup-article'));
+  observer.observe(document.querySelector('#signup-title'));
+  observer.observe(document.querySelector('#steps-card'));
+  observer.observe(document.querySelector('#sponsor-title'));
+  observer.observe(document.querySelector('#sponsor-container'));
   observer.observe(document.querySelector('#map-article'));
   observer.observe(document.querySelector('#rules-description'));
   observer.observe(document.querySelector('#guidelines'));