first JS

static/reservation.html

@@ -19,6 +19,9 @@
             max-width: 50%;
             height: auto;
         }
+        .red-text {
+            color: red;
+        }
     </style>
 
   </head>
@@ -78,14 +81,12 @@ <h1> Column4 </h1>
             </div>
         </div>
 
-
         <div class="row">
           <div class="col-md-6">
             <h1 class="text-center mt-4"> Search for Availability </h1>
             <p class="text-center"> Please enter your desired dates below to check for availability. </p>
-
 
-              <form action="" method="GET">
+              <form action="" method="GET" novalidate class="needs-validation">
               <div class="row">
                 <div class="col">
                   <div class="form-group">
@@ -110,6 +111,14 @@ <h1 class="text-center mt-4"> Search for Availability </h1>
             </div>
         </div>
 
+        <div class="row">
+          <div class="col">
+            <p id="myParagraph"> This is some TEXT. </p>
+            <p>
+              <buttion id="color" class="btn btn-secondary"> Click Me </button>
+            </p>
+          </div>
+
     </div>
   </div>
 
@@ -124,8 +133,42 @@ <h1 class="text-center mt-4"> Search for Availability </h1>
         right
         </div>
     </div>
-
-
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+
+<script>
+
+    (() => {
+      '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)
+      })
+    })()
+
+  document.getElementById("color").addEventListener("click", function() {
+    let myEL = document.querySelectorAll('#myParagraph');
+    Array.from(myEL).forEach(myEL => {
+    if (myEL.classList.contains("red-text")) {
+      myEL.classList.remove("red-text");
+      return;
+    } else {
+      myEL.classList.add("red-text");
+    }
+  })
+  });
+</script>
+
   </body>
 </html>