feat: all css for create quiz

src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css

+.header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+    height: 10vh;
+}
+
+.header mat-icon {
+    width: auto;
+    height: auto;
+    margin: 0;
+    font-size: 8vmin;
+    padding-right: 5vw;
+    /* Your profile */
+    font-style: normal;
+    font-weight: 500;
+    color: #00B3F4;
+}
+
+.header h1 {
+    width: auto;
+    height: auto;
+    margin: 0;
+    font-size: 8vmin;
+    padding-left: 5vw;
+    /* Your profile */
+    font-style: normal;
+    font-weight: 500;
+    color: #00B3F4;
+}
+
+.header mat-icon:hover {
+    cursor: pointer;
+    color: #2B73FE;
+}
+
 .container {
     display: flex;
     flex-direction: column;
@@ -56,7 +96,7 @@ select {
     align-items: center;
 
     width: 100%;
-    margin-top: 1vmin;
+    /*margin-top: 1vmin;*/
 }
 
 .label-wrapper {

src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.html

 <div class="question-marks">
-    <h1>Create your own quiz</h1>
+    <div class="header">
+        <h1>Create your own quiz</h1>
+        <mat-icon (click)="createQuiz()">save</mat-icon>
+    </div>
     <div class="container">
-        <form (ngSubmit)="createQuiz()" [formGroup]="quizForm">
+        <form [formGroup]="quizForm">
             <div class="quiz-info">
                 <div class="quiz-info-wrapper">
                     <div class="label-wrapper">
@@ -78,10 +81,5 @@
                 </div>
             </div>
         </form>
-        <div class="center-button">
-            <button (click)="createQuiz()" class="btn btn-secondary btn-success" [disabled]="quizForm.invalid">
-                Add
-            </button>
-        </div>
     </div>
 </div>
\ No newline at end of file

src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts

 import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormArray, FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 import Swal from 'sweetalert2';
 
 @Component({
@@ -8,7 +9,11 @@ import Swal from 'sweetalert2';
 })
 export class CreateCustomQuizComponent implements OnInit {
     quizForm: FormGroup;
-    constructor(private fb: FormBuilder) {
+    router: any;
+    constructor(
+        private fb: FormBuilder,
+        router: Router
+    ) {
         this.quizForm = this.fb.group({
             title: this.fb.control('', [Validators.required, Validators.maxLength(255)]),
             difficulty: this.fb.control('medium', [Validators.required]),
@@ -38,7 +43,7 @@ export class CreateCustomQuizComponent implements OnInit {
     createAnswer() {
         return this.fb.group({
             answer: this.fb.control('', [Validators.required, Validators.maxLength(255)]),
-            right_answer: this.fb.control(false, [Validators.required]),
+            right_answer: this.fb.control(true, [Validators.required]),
         });
     }
     addAnswer(i: number) {
@@ -78,5 +83,17 @@ export class CreateCustomQuizComponent implements OnInit {
         return { duplicateAnswer: hasDuplicates, emptyAnswer: hasEmpty };
     }
 
-    createQuiz() { }
+    createQuiz() {
+        if (this.quizForm.valid) {
+            console.log(this.quizForm.value);
+            this.router.navigate(['profile/']);
+        } else {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                text: 'Please fill all the required fields!',
+            });
+            console.log(this.quizForm.value);
+        }
+    }
 }

src/styles.css

@@ -30,7 +30,7 @@ p {
 h1 {
     height: 10vh;
     margin: 0;
-    margin-left: 7vw;
+    margin-left: 5vw;
     font-size: 8vmin;
     /* Your profile */
     font-style: normal;