added in-line comments for readability

class_registration_app/src/assets/main.css

@@ -137,6 +137,7 @@ a,
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   transition: transform 1s, box-shadow 1s;
+  color:#000
 }
 
 .course-list-item:hover{

class_registration_app/src/components/CourseSearch.vue

@@ -6,15 +6,16 @@ const AsyncComponent = defineAsyncComponent(() =>
   import('./CourseSearch.vue')
 );
 
-interface CourseInfo {
+
+interface CourseInfo { //enter all course info parameters here to prevent TypeScript errors
   CourseId: string;
   CourseLocation: string;
   OpenStatus: boolean;
   Professor: string;
   MaxStudents: number;
   StudentsEnrolled: number;
   Prerequisites: string[];
-  Section: string; // added for section
+  Section: string; 
   CourseScheduledDays: string[];
   Level: string;
 }
@@ -88,17 +89,17 @@ function applySelectedFilters(courses: CourseInfo[]): CourseInfo[] {
 }
 
 function handleSearch() {
+  // for multiple searches... delete all previous results to populate new ones
   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
+  //API Gateway link
   const apiUrl = 'https://5prodolbi7.execute-api.us-east-1.amazonaws.com/Beta';
 
-
+  //using fetch instead of axios
   let courseJson = fetch(`${apiUrl}/courses`)
     .then(response => {
       if (response.ok) {
@@ -107,10 +108,12 @@ function handleSearch() {
         throw "Error"
       }
     }).then(response => {
-      console.log(response.Items);
+      console.log(response.Items); //testing results
 
+      //must include type of element with typescript
       let searchbar = <HTMLInputElement>document.getElementById("search");
-
+      
+      //filter all courses retrieved from API with user input
       console.log(response);
       let filteredCourses = response.Items.filter(function (course: CourseInfo)
       { return course.CourseId.includes(searchbar.value.toUpperCase())} );
@@ -140,7 +143,7 @@ function handleSearch() {
         course_location.textContent = Course.CourseLocation;
 
         course_status.className = "course-status";
-        if(Course.OpenStatus){
+        if(Course.OpenStatus){ //course_status returns a bool
           course_status.textContent = "Enroll Status: Open";
         }else{
           course_status.textContent = "Enroll Status: Closed";
@@ -157,9 +160,10 @@ function handleSearch() {
 
         course_section.className = "course-section";
         course_section.textContent = "Section: " + Course.Section;
+        //*****IMPORTANT - all classes are found in main.css under "assets" 
+        //classes under style scoped are not reactive for some reason
 
-
-        // Append the div to the container
+        // Append the divs to the container
         if (container != null){
           container.appendChild(div);
           div.appendChild(course_name);

class_registration_app/src/components/DashBoard.vue

@@ -2,6 +2,7 @@
 </script>
 
 <template>
+    <!-- top bar for dashboard with logos -->
     <div class="top">
         <img class="logos" src="../assets/currentLogo.png">
         <img class="logos" src="https://logos-world.net/wp-content/uploads/2022/01/UConn-Huskies-Logo-1970.png">
@@ -12,22 +13,24 @@
     <div class="dashboard">
         <div class="head2">
             Class Registration Dashboard
+            <!-- router link will bring back to home page -->
             <RouterLink to="./">
                 <div class="signout">Sign Out</div>
             </RouterLink>
         </div>
         <div class="button-container">
+            <!--wrap buttons within router links to navigate site-->
             <RouterLink to="./schedule_viewer">
-            <button class="uconn-button">
-                Schedule Viewer
-                <img src="../assets/calenderimage.png" class="icon">
-            </button>
+                <button class="uconn-button">
+                    Schedule Viewer
+                    <img src="../assets/calenderimage.png" class="icon">
+                </button>
             </RouterLink>
             <RouterLink to="./courses">
-            <button class="uconn-button">
-                Course Search
-                <img src="../assets/magimage.png" class="icon">
-            </button>
+                <button class="uconn-button">
+                    Course Search
+                    <img src="../assets/magimage.png" class="icon">
+                </button>
             </RouterLink>
             <RouterLink to="./my_courses">
                 <button class="uconn-button">

class_registration_app/src/components/NotFound.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-
+//this page is routed to whenever user puts in wrong path
 </script>
 
 <template>

class_registration_app/src/components/StartUp.vue

@@ -3,11 +3,12 @@
     import LoginPage from './LoginPage.vue';
     import { ref } from 'vue';
 
-    let isVisible = ref(false);
+    //ref is for variables used directly in DOM
+    let isVisible = ref(false); //boolean for visibility of login div
     
-    let loginType = ref("");
+    let loginType = ref(""); //specifiy login for student or faculty
 
-    function openCloseLogin(type: string){
+    function openCloseLogin(type: string){ //opens popup for login
         isVisible.value = !isVisible.value;
         loginType.value = type;
     }
@@ -16,13 +17,18 @@
 
 <template>
 
-<div class="backdrop">
-
+<div class="backdrop"> 
+    <!-- v-if is controlled by isVisible. Login page will only render when isVisible is true -->
     <div v-if="isVisible" class="login-div">
         <label class="typeOfLogin">{{loginType}}</label>
+
+        <!-- v-on:click will call a function openCloseLogin **Very useful** -->
         <button v-on:click="openCloseLogin('Student Login')" style="float: right;" class="btn-97">X</button>
-        <LoginPage></LoginPage>
+
+        <LoginPage></LoginPage><!-- example of nesting a component in another -->
     </div>
+
+    <!--This is the top bar of the page with logos and uconn font-->
     <div class="top">
         <img class="logos" src="https://logos-world.net/wp-content/uploads/2022/01/UConn-Huskies-Logo-1970.png">
         <div>
@@ -35,19 +41,18 @@
 
     <div class="login">
 
+        <!--Opens the login div, specifys student or faculty-->
         <button v-on:click="openCloseLogin('Student Login')" class="btn-97" style="position: absolute;top:40%;left:50%;transform:translate(-50%,-50%)">
             Login as student
         </button>
         <button v-on:click="openCloseLogin('Faculty Login')" class="btn-97" style="background-color:black;position: absolute;top:80%;left:50%;transform:translate(-50%,-50%)">
             Login as faculty
         </button>
 
-
-
         <a class="forgot" style="">Forget your login?</a>
     </div>
 
-    <footer>
+    <footer> <!--bottom section of page-->
         <a href="https://uconn.edu/">Home Site</a>
         <a href="https://uconn.edu/about-us/">About Us</a>
         <a>Privacy Policy</a>
@@ -219,10 +224,6 @@ a{
           color:transparent;
         }
       }
-    
-    .logos {
-        
-    }
 
 }
 

class_registration_app/tsconfig.node.json

@@ -9,7 +9,8 @@
   ],
   "compilerOptions": {
     "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "Node",
     "types": ["node"]
+
   }
 }

class_registration_app/vite.config.ts

@@ -19,5 +19,6 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
-  }
+  },
+  base: ''
 })