Add Restart Button

Author: Brenda-A-S

src/app/components/quizz/quizz.component.css

@@ -67,7 +67,7 @@
 
 .quizz_results {
     width: 100%;
-    height: 580px;
+    height: 550px;
     border-radius: 10px;
     padding: 20px auto;
     display: flex;
@@ -78,6 +78,41 @@
     filter: drop-shadow(5px 5px 26px #000);
 }
 
+.quizz_restart {
+    padding: 1rem;
+    text-align: center;
+    border-radius: 10px;
+    color: #fafaf5;
+    cursor: pointer;
+    border: 1px solid #644ed2;
+    background-color: transparent;
+    margin: 1rem 0;
+    filter: drop-shadow(5px 5px 26px #000);
+}
+
+.quizz_restart:hover{
+    opacity: .8;
+}
+
+:has(.sly) .quizz_restart {
+    background-color: rgba(25,60,20,1);
+    border: none;
+}
+:has(.griff) .quizz_restart {
+    background-color: rgba(147,30,25,1);
+    border: none;
+}
+:has(.rav) .quizz_restart {
+    background-color: rgba(14,60,130,1);
+    border: none;
+}
+:has(.huff) .quizz_restart {
+    color: #050505;
+    background-color: rgba(219,179,0,1);
+    border: none;
+}
+
+
 img {
     margin-top: 20px;
     width: 250px;

src/app/components/quizz/quizz.component.html

@@ -19,4 +19,6 @@ <h1>O seu resultado é: </h1>
         <p>{{ answerSelected }}</p>
         <img src="{{ photo }}" alt="">
     </div>
+
+    <button class="quizz_restart"  (click)="restartQuizz()">Reiniciar o Quizz</button>
 </div>

src/app/components/quizz/quizz.component.ts

@@ -55,21 +55,29 @@ export class QuizzComponent implements OnInit {
       this.answerSelected = quizz_questions.results[finalAnswer as keyof typeof quizz_questions.results]
 
       if(finalAnswer === "G"){
+
         this.photo = 'assets/imgs/Gryffindor.webp'  
         this.bgc = "griff"  
         document.body.classList.toggle('griffindor')
+
       }else if(finalAnswer === "S"){
+
         this.photo = "assets/imgs/Slytherin.webp"
         this.bgc = "sly" 
         document.body.classList.toggle('slytherin')
+
       }else if(finalAnswer === "H"){
+
         this.photo = "assets/imgs/Hufflepuff.webp"
         this.bgc = "huff" 
-        document.body.classList.toggle('hufflepuff')        
+        document.body.classList.toggle('hufflepuff')   
+
       }else{
+
         this.photo = "assets/imgs/Ravenclaw.webp"
         this.bgc = "rav" 
         document.body.classList.toggle('ravenclaw')
+
       }
     }
   }
@@ -87,4 +95,14 @@ export class QuizzComponent implements OnInit {
     })
     return result
   }
+
+  restartQuizz() {
+    this.finished = false;
+    this.answers = [];
+    this.questionIndex = 0;
+    this.questionSelected = this.questions[this.questionIndex];
+    this.photo = "";
+    this.bgc = "";
+    document.body.classList.remove('griffindor', 'slytherin', 'hufflepuff', 'ravenclaw');
+  }
 }