Created more intuitive buttons leading up to the OverviewQuizView.vue

a11ec963 · Maddy · 44977453 · a11ec963 · a11ec963 · a11ec963
Commit a11ec963 authored 1 year ago by Maddy
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -16,7 +16,7 @@ body {
 }
 .course-col{
    flex-basis: 31%;
-    background: #E5E5E5;
+    background: #d7d7d7;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px;
@@ -61,6 +61,14 @@ body {
    border-color: transparent;
    margin-top: 10px;
 }
+.add-Btn:hover{
+    cursor: pointer;
+    background-color: #2f3d54;
+}
+.add-Btn:active{
+    background-color: #425575;
+    transition: 0.2s ;
+}
 .save-Btn{
    background-color: #CCA43B;
    font-size: 24px;

--- a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
+++ b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
@@ -18,7 +18,7 @@ export default {
 			<img id="logo" src="../components/icons/brain.png"/>
 			<h1 class="heading">BrainStormer</h1>
 			<p> An easy way to learn and share quizzes. <br> Make your own quiz now! </p>
-			<router-link to="/overviewQuiz" class="hero-btn">CREATE QUIZ </router-link>
+			<router-link to="/dashboard" class="hero-btn">LOOK AT QUIZZES</router-link>
 		</div>
 	</section>


--- a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
@@ -9,7 +9,7 @@
 			<input class="searchBox" placeholder="Search for category...">
 		</div> <br>
 		<div class="create-container">
-			<router-link to="/overviewQuiz" class="create-btn">CREATE QUIZ</router-link>
+			<router-link to="/overviewQuiz" class="create-btn">YOUR QUIZES</router-link>
 		</div>

 	</div>

--- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
-<script>
-
-import {defineComponent} from "vue";
-import Svg from "@/assets/Svg.vue";
-
-export default defineComponent({
-	components: {Svg}
-})
-</script>
-
-
 <template>
 	<body>
 	<div class="overViewQuestion-page">
@@ -21,7 +10,7 @@ export default defineComponent({

 				<div class="quiz-header">
 					<h3>Quiz 1</h3>
-				<Svg name="computer-category"/>
+					<Svg :name="selectedIcon" />
 				</div>

 				<div class="quiz-body">
@@ -29,7 +18,7 @@ export default defineComponent({
 					<p>Category:</p>
 					<div id="form-box">
 						<form>
-							<select id="quiz-category">
+							<select id="quiz-category-1" @change="changeCategory">
 								<option value="Animal">Animals</option>
 								<option value="Athletic">Athletic/Sport</option>
 								<option value="Computer" selected="selected">Computer Science</option>
@@ -50,13 +39,52 @@ export default defineComponent({
 					<button class="delete-btn">Delete</button>
 				</div>
 			</div>
+
+			<div>
+				<button class="add-Btn">Create Quiz</button>
 			</div>

 		</div>
+	</div>
 	</body>
-
 </template>

+<script>
+import { defineComponent } from "vue";
+import Svg from "@/assets/Svg.vue";
+
+export default defineComponent({
+	components: { Svg },
+	data() {
+		return {
+			selectedCategory: 'Computer',
+			categoryIcons: {
+				'Animal': 'animal-category',
+				'Athletic': 'athletic-category',
+				'Computer': 'computer-category',
+				'Drama': 'drama-category',
+				'Music': 'music-category',
+				'Religion': 'religion-category',
+				'Science': 'science-category',
+				'Society': 'society-category',
+				'Other': 'other-category'
+			}
+		};
+	},
+	computed: {
+		selectedIcon() {
+			return this.categoryIcons[this.selectedCategory];
+		}
+	},
+	methods: {
+		changeCategory(event) {
+			this.selectedCategory = event.target.value;
+		}
+	}
+});
+</script>
+
+
 <style>
 .overViewQuestion-page{
 	padding: 50px;