added lecture 51 and introduced JS in it

html-source/check-availability.html

@@ -17,6 +17,10 @@
             color: #fff;
             font-size: 80%;
         }
+
+        .simplyRed {
+	          color: red;
+        }
     </style>
 
 </head>
@@ -63,7 +67,7 @@
             <div class="col-md-3"></div>
             <div class="col-md-6">
                 <h1 class="text-center">Check Availability</h1>
-                <form class="row g-2" action="check-availability.html" method="POST">
+                <form class="row g-2 needs-validation" novalidate action="check-availability.html" method="POST">
                     <div class="col form-floating mb-3">
                         <input required type="date" class="form-control" name="startingDate" id="startingDate">
                         <label for="startingDate">Arrival Date (YYYY-MM-DD)</label>
@@ -81,6 +85,15 @@ <h1 class="text-center">Check Availability</h1>
                   </form>
             </div>
         </div>
+        <div class="row">
+          <div class="col">
+            <p id="forTestingOnly">This is just a test.</p>
+            <p>
+              <button id="toggleButton" class="btn btn-secondary">Toggle</button>
+            </p>
+          </div>
+        </div>
+
     </div>
 
     <div class="row sticky-bottom bb-footer">
@@ -97,6 +110,41 @@ <h1 class="text-center">Check Availability</h1>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
 
+    <script>
+      // Example starter JavaScript for disabling form submissions if there are invalid fields
+      (() => {
+        'use strict'
+
+        // Fetch all the forms we want to apply custom Bootstrap validation styles to
+        const forms = document.querySelectorAll('.needs-validation')
+
+        // Loop over them and prevent submission
+        Array.from(forms).forEach(form => {
+          form.addEventListener('submit', event => {
+            if (!form.checkValidity()) {
+              event.preventDefault()
+              event.stopPropagation()
+            }
+
+            form.classList.add('was-validated')
+          }, false)
+        })
+      })()
+
+      /* console.log("This is my javascript");
+      alert("ATTENTION");*/
+
+      let anElement = document.getElementById("forTestingOnly");
+
+      document.getElementById("toggleButton").addEventListener("click", function() {
+        if (anElement.classList.contains("simplyRed")) {
+          anElement.classList.remove("simplyRed")
+        } else { 
+          anElement.classList.add("simplyRed")
+        }
+      })
+    </script>
+
 </body>
 
 </html>