Displayed all class names

zjf19002 · Nov 1, 2023 · 699e68c · 699e68c
1 parent 393138d
commit 699e68c
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 29 deletions.
diff --git a/class_registration_app/src/assets/main.css b/class_registration_app/src/assets/main.css
@@ -97,3 +97,10 @@ a,
   transform: translateY(-5px);
 }
 
+.course-list-item {
+  margin-bottom: 40px;
+  min-width: 80vw;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
diff --git a/class_registration_app/src/components/CourseSearch.vue b/class_registration_app/src/components/CourseSearch.vue
@@ -1,50 +1,72 @@
 <script setup lang="ts">
-import axios from 'axios';
+import { defineAsyncComponent } from 'vue';
+const AsyncComponent = defineAsyncComponent(() =>
+  import('./CourseSearch.vue')
+);
 //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
-  }
-})
-.then(response => {
-  // Handle the response
-  console.log(response.data);
-})
-.catch(error => {
-  // Handle errors
-  console.error(error);
-});
-</script>
+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);
+    response.Items.forEach((Course: { CourseId: string; }) => {
+      let container = document.getElementById("container");
+      let div = document.createElement("div");
+      let class_name = 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
+      class_name.textContent = Course.CourseId; // You can set content here
 
+      // Append the div to the container
+      if (container != null){
+        container.appendChild(div);
+        div.appendChild(class_name);
+      }
+      return response;
+    })
+  })
+</script>
 
-// Your API Gateway endpoint URL
 
 
 <template>
-    <div class="container">
-        <h1>UConn Course Search</h1>
+    <div class="container" id="container">
+        <h1 class="title">UConn Course Search</h1>
         <input type="text" class="search-bar" placeholder="Enter course name or code">
         <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 {
+  align-self: center;
+  position:relative;
+  
+  
 }
 
 .search-bar {
@@ -61,7 +83,5 @@ axios.get(`${apiUrl}/courses`, {
     padding: 0;
 }
 
-.course-list-item {
-    margin-bottom: 10px;
-}
+
 </style>