Started SearchTool

src/App.vue

@@ -18,6 +18,7 @@ export default {
         { path: '/fetch', label: 'Create an Account' },
         { path: { name: 'form' }, label: 'Form Example' },
         { path: '/schedule', label: 'Schedule View' },
+        { path: '/searchtool', label: 'Search'},
         { path: '/admin/createcourse', label: 'Create Course' },
         { path: '/login', label: 'Login' },
       ]

src/router/index.js

@@ -8,6 +8,8 @@ import AdminCreateCourseView from "../views/AdminCreateCourseView.vue";
 import LoginPage from "../views/LoginPage.vue";
 import SignUp from "../views/SignUp.vue";
 import ScheduleView from "../views/ScheduleView.vue";
+import ForgotPassword from "../views/ForgotPassword.vue";
+import SearchTool from "../views/SearchTool.vue";
 
 const router = createRouter({
   // the history mode determines how vue router interacts with the url.
@@ -53,6 +55,16 @@ const router = createRouter({
       name: "schedule",
       component: ScheduleView,
     },
+    {
+      path: "/forgot-password",
+      name: "forgotpassword",
+      component: ForgotPassword,
+    },
+    {
+      path:"/searchtool",
+      name: "searchtool",
+      component: SearchTool,
+    },
   ],
 });
 

src/views/ForgotPassword.vue

@@ -0,0 +1,90 @@
+<template>
+    <h1>Reset Password</h1>
+    <p>Enter email associated with your account to reset your password.</p>
+    <div class = "forgotpassword">
+        <form @submit.prevent="forgotpassword">
+            <div class="form-group">
+                <label for = "email">Email:</label>
+                <input type="email" id="email" v-model="email" required>
+            <div>
+                <button type="sumbit">
+                    Submit
+                </button>   
+            </div>
+            </div>
+        </form>
+
+    </div>
+</template>
+
+<script>
+export default{
+    name: "Forgot Password",
+    data(){
+        return {
+            email: ""
+        };
+    },
+    methods: {
+        forgotpassword(){
+            //IDK
+        },
+    },
+};
+</script>
+
+<style scoped>
+
+h1 {
+    font-size: x-large;
+    background-color: #007BFF;
+    color:#fff;
+    padding: 20px;
+    margin-bottom: 75px;
+    border-color: black;
+    border-width: 2px;
+}
+
+p {
+    text-align: center;
+}
+.forgotpassword {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f5f5f5;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.form-group{
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+                                                                                                                                               
+input[type="text"],
+input[type="email"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    margin-bottom: 10px;
+}
+
+button{
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    cursor: pointer;
+    display: block;
+    margin: 0 auto;
+}
+
+</style>

src/views/SearchTool.vue

@@ -0,0 +1,70 @@
+<template>
+    <h2>Search Tool</h2>
+    <form class = "search" @submit.prevent = "search">
+        <div class="label1">
+            <div>
+                <label for="department">Department</label>
+            <input type="text" id="department" v-model="department">
+            </div>
+            <div>
+                <label for="course_id">Course #</label>
+                <input type="text" id="course_id" v-model="course_id">
+            </div>
+            <label for="course_name">Course Name</label>
+            <label for="professor">Professor</label>
+        </div>
+        <div>
+
+
+            <input type="text" id="course_name" v-model="course_name">
+            <input type="text" id="professor" v-model="professor">
+        </div>
+
+
+        <!-- <input type="text" id="course_id" v-model="course_id"> -->
+
+    </form>
+</template>
+
+<script>
+    export default {
+        data(){
+            return {
+                department: ''
+            };
+        },
+    methods: {
+        search(){
+
+        },
+    },
+};
+</script>
+
+<style scoped>
+
+h2 {
+    background-color: aqua;
+    font-size: xx-large;
+}
+.search{
+    max-width: 1000px;
+    margin: 0 auto;
+    background-color: #f5f5f5;
+    border: 1px solid #ddd;
+}
+.label1 {
+    display: inline-block;
+    font-weight: bold;
+}
+/* label{
+    padding: 10px;
+} */
+
+/* input[type="text"]{
+    border: 1px solid #ccc;
+    border-radius: 3px;
+} */
+
+</style>
+