course search- no courses were returned

class_registration_app/src/assets/main.css

@@ -203,3 +203,4 @@ a,
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   overflow-y: auto;
 }
+

class_registration_app/src/components/CourseSearch.vue

@@ -88,10 +88,14 @@ function applySelectedFilters(courses: CourseInfo[]): CourseInfo[] {
 }
 
 function handleSearch() {
-  const elementsToRemove = document.querySelectorAll(`.${"course-list-item"}`);
+  const elementsToRemove = document.querySelectorAll(`.${"course-list-item"}` );
+  const test = document.getElementById('noCourses')
       elementsToRemove.forEach(element => {
         element.remove();
       });
+      if(test!=null){
+        test.remove()
+      }
 
 
   console.log("button clicked");
@@ -107,6 +111,12 @@ function handleSearch() {
         throw "Error"
       }
     }).then(response => {
+      let test = document.getElementById("noCourses")
+      if(test!=null && test.parentNode!=null){
+        test.parentNode.removeChild(test);
+      }
+
+
       console.log(response.Items);
 
       let searchbar = <HTMLInputElement>document.getElementById("search");
@@ -117,7 +127,18 @@ function handleSearch() {
 
       let newFilteredCourses = applySelectedFilters(filteredCourses);
       console.log(filteredCourses);
+      
+      if(newFilteredCourses.length == 0){
+        let container = document.getElementById("container");
+        let div = document.createElement('div');
+        div.id = ("noCourses");
 
+        div.innerHTML = "<h1>No courses were returned</h1>";
+        if(container!=null){
+          container.appendChild(div)
+        }
+      }
+    
       newFilteredCourses.forEach((Course: CourseInfo) => {
         let container = document.getElementById("container");
         let div = document.createElement("div");