Api course search

class_registration_app/src/assets/main.css

@@ -38,6 +38,9 @@ a,
     padding: 0 auto;
   }
 }
+
+
+
 */
 .btn-97,
 .btn-97 *,
@@ -97,3 +100,23 @@ a,
   transform: translateY(-5px);
 }
 
+.course-list-item {
+  padding: 20px;
+  display: flex;
+  margin-top: 10px;
+  margin-bottom: 40px;
+  min-width: 80vw;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.course-name {
+  margin-left: 1vw;
+  font-weight: 500;
+}
+
+.course-location {
+  margin-left: 1vh;
+
+}

class_registration_app/src/components/CourseSearch.vue

@@ -1,67 +1,135 @@
 <script setup lang="ts">
-import axios from 'axios';
-//arn:aws:execute-api:us-east-1:671289147354:5prodolbi7/*/GET/courses
-const apiUrl = 'https://5prodolbi7.execute-api.us-east-1.amazonaws.com/Beta';
-
-// Make a GET request
-axios.get(`${apiUrl}/courses`, {
-  params: {
-    // Query parameters, if any
+import { defineAsyncComponent } from 'vue';
+const AsyncComponent = defineAsyncComponent(() =>
+  import('./CourseSearch.vue')
+);
+
+function handleSearch() {
+  const elementsToRemove = document.querySelectorAll(`.${"course-list-item"}`);
+      elementsToRemove.forEach(element => {
+        element.remove();
+      });
+
+
+  console.log("button clicked");
+  //arn:aws:execute-api:us-east-1:671289147354:5prodolbi7/*/GET/courses
+  const apiUrl = 'https://5prodolbi7.execute-api.us-east-1.amazonaws.com/Beta';
+
+  const response = fetch(`${apiUrl}/courses`);
+  let courseJson = fetch(`${apiUrl}/courses`)
+    .then(response => {
+      if (response.ok) {
+        return response.json()
+      } else{
+        throw "Error"
+      }
+    }).then(response => {
+      console.log(response.Items);
+
+      let searchbar = document.getElementById("search");
+      
+      let filteredCourses = response.Items.filter(function (str: string) { return str.CourseId.includes(searchbar.value.toUpperCase())} );
+      filteredCourses.forEach((Course: { CourseId: string; CourseLocation: string;}) => {
+        let container = document.getElementById("container");
+        let div = document.createElement("div");
+        let course_name = document.createElement('h2');
+        let course_location = document.createElement('h2');
+        // Set class or any other attributes for the div
+        div.className = "course-list-item"; // You can set class name here
+
+        // Set content or any other properties for the div
+        course_name.className = "course-name";
+        course_name.textContent = Course.CourseId + " -"; // You can set content here
+
+        course_location.className = "course-location";
+        course_location.textContent = Course.CourseLocation;
+
+        // Append the div to the container
+        if (container != null){
+          container.appendChild(div);
+          div.appendChild(course_name);
+          div.appendChild(course_location);
+        }
+        
+        return response;
+      })
+    })
+}
+document.addEventListener("DOMContentLoaded", function() {
+  // Get the button element by its ID
+  const button = document.getElementById("searchButton");
+
+
+// Check if the button element exists
+  if (button) {
+  // Assign the handleClick function to the button's onclick property
+    button.addEventListener("click", handleSearch);
   }
-})
-.then(response => {
-  // Handle the response
-  console.log(response.data);
-})
-.catch(error => {
-  // Handle errors
-  console.error(error);
 });
-</script>
 
 
-// Your API Gateway endpoint URL
+
+</script>
+
 
 
 <template>
-    <div class="container">
-        <h1>UConn Course Search</h1>
-        <input type="text" class="search-bar" placeholder="Enter course name or code">
+    <div class="container" id="container">
+        <h1 class="title">UConn Course Search</h1>
+        <div class="search">
+          <input type="text" id="search" class="search-bar" placeholder="Enter course name or code">
+          <button id="searchButton" class="btn-97">Search</button>
+        </div>
         <ul class="course-list">
-            <li class="course-list-item">CSE 101 - Introduction to Computer Science</li>
-            <li class="course-list-item">ENG 101 - English Composition</li>
-            <li class="course-list-item">MAT 115 - Calculus I</li>
-            <li class="course-list-item">CHEM 111 - General Chemistry</li>
-            <li class="course-list-item">HIST 200 - U.S. History</li>
+
         </ul>
     </div>
 </template>
 
 <style scoped>
 .container {
-    max-width: 600px;
-    margin: 0 auto;
+    min-width: 80vw;
+    left: 50%;
+    top: 5%;
+    position: absolute;
+    transform: translate(-50%);
     padding: 20px;
     background-color: #ffffff;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    overflow-y: auto;
+}
+
+.title {
+  position:relative;
+  font-weight: 700;  
+}
+
+.search {
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .search-bar {
-    width: 100%;
+    width: 30%;
     padding: 10px;
+    margin-right: 1vw;
     margin-bottom: 20px;
     border: none;
     border-radius: 5px;
     font-size: 16px;
+    border: solid 1px navy;
 }
 
 .course-list {
     list-style: none;
     padding: 0;
 }
 
-.course-list-item {
-    margin-bottom: 10px;
+button {
+  line-height: 0;
+  height: 30px;
 }
+
+
 </style>

class_registration_app/src/components/LoginPage.vue

@@ -73,17 +73,18 @@
             border: 1px solid #44c4e7;
           }
         }
-        button {
-          cursor: pointer;
-          background: #44c4e7;
-          width: 100%;
-          padding: 10px 15px;
-          border: 0;
-          color: #fff;
-          font-family: "Roboto";
-          font-size: 14px;
-          font-weight: 400;
-        }
+      }
+
+      button {
+        cursor: pointer;
+        background: #44c4e7;
+        width: 100%;
+        padding: 10px 15px;
+        border: 0;
+        color: #fff;
+        font-family: "Roboto";
+        font-size: 14px;
+        font-weight: 400;
       }
       
       .error, .valid{display:none;}