Skip to content

Commit 73e8ceb

Browse files
Brenda-A-SBrenda-A-S
committed
first commit
1 parent ca16a09 commit 73e8ceb

20 files changed

+351
-521
lines changed

‎src/app/app.component.html

+2-483
Large diffs are not rendered by default.

‎src/app/app.component.spec.ts

-35
This file was deleted.

‎src/app/app.module.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@ import { BrowserModule } from '@angular/platform-browser';
33

44
import { AppRoutingModule } from './app-routing.module';
55
import { AppComponent } from './app.component';
6+
import { QuizzComponent } from './components/quizz/quizz.component';
7+
import { HomeComponent } from './pages/home/home.component';
68

79
@NgModule({
810
declarations: [
9-
AppComponent
11+
AppComponent,
12+
QuizzComponent,
13+
HomeComponent
1014
],
1115
imports: [
1216
BrowserModule,

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

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
.quizz__container {
2+
width: 80%;
3+
margin: auto;
4+
margin-top: 20px;
5+
}
6+
7+
.quizz_logo {
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: center;
11+
align-items: center;
12+
margin-bottom: 30px;
13+
}
14+
15+
.quizz_logo h3 {
16+
margin-top: 20px;
17+
}
18+
19+
.quizz_questions {
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
border: 1px solid #4224d9;
24+
border-radius: 8px;
25+
background-color: #644ed2;
26+
width: 100%;
27+
height: 200px;
28+
font-size: 20px;
29+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
30+
margin-bottom: 20px;
31+
padding: 20px;
32+
}
33+
34+
.quizz_options {
35+
display: flex;
36+
flex-wrap: wrap;
37+
justify-content: center;
38+
margin: center;
39+
margin-bottom: 20px;
40+
}
41+
42+
.btn-option {
43+
background-color: transparent;
44+
border-radius: 8px;
45+
border: 1px solid #18ab29;
46+
width: 50%;
47+
display: inline-block;
48+
cursor: pointer;
49+
color: #fff;
50+
font-family: Arial, Helvetica, sans-serif;
51+
font-size: 17px;
52+
padding: 16px 31px;
53+
text-decoration: none;
54+
text-shadow: 0px 1px 0px #2f6627;
55+
transition: .5s;
56+
}
57+
58+
.btn-option:hover {
59+
background-color: #5cbf2a;
60+
}
61+
62+
.btn-option:active {
63+
background-color: #2abf8d;
64+
position: relative;
65+
top: 1px;
66+
}
67+
68+
.quizz_results {
69+
width: 100%;
70+
height: 580px;
71+
border-radius: 10px;
72+
padding: 20px auto;
73+
display: flex;
74+
flex-direction: column;
75+
justify-content: center;
76+
align-items: center;
77+
transition: 5s;
78+
filter: drop-shadow(5px 5px 26px #000);
79+
}
80+
81+
img {
82+
margin-top: 20px;
83+
width: 250px;
84+
}
85+
86+
.sly {
87+
background: linear-gradient(90deg, rgb(33, 2, 57,1) 0%, rgba(25,60,20,1) 26%, rgba(21,48,18,1) 54%, rgba(25,60,20,1) 78%, rgba(47,102,39,1) 100%);
88+
background-size: 400% 400%;
89+
animation: gradient 15s ease infinite alternate;
90+
}
91+
92+
.griff {
93+
background: linear-gradient(90deg, rgb(33, 2, 57,1) 0%, rgba(147,30,25,1) 26%, rgba(121,20,16,1) 54%, rgba(147,30,25,1) 78%, rgba(203,31,25,1) 100%);
94+
background-size: 400% 400%;
95+
animation: gradient 15s ease infinite alternate;
96+
}
97+
98+
.rav {
99+
background: linear-gradient(90deg, rgb(33, 2, 57,1) 0%, rgba(14,60,130,1) 26%, rgba(11,43,92,1) 54%, rgba(14,60,130,1) 78%, rgba(11,48,105,1) 100%);
100+
background-size: 400% 400%;
101+
animation: gradient 15s ease infinite alternate;
102+
}
103+
104+
.huff {
105+
background: linear-gradient(90deg, rgb(33, 2, 57,1) 0%, rgba(219,179,0,1) 26%, rgba(210,160,1,1) 54%, rgba(219,179,0,1) 78%, rgba(255,225,99,1) 100%);
106+
background-size: 400% 400%;
107+
animation: gradient 15s ease infinite alternate;
108+
}
109+
110+
111+
@keyframes gradient {
112+
0% {
113+
background-position: 0% 50%;
114+
}
115+
50% {
116+
background-position: 100% 50%;
117+
}
118+
100% {
119+
background-position: 0% 50%;
120+
}
121+
}

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

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="quizz__container">
2+
<div class="quizz_logo">
3+
<img src="assets/imgs/logo.png" alt="">
4+
<h3>{{ title }}</h3>
5+
</div>
6+
7+
<div *ngIf=!finished class="quizz_questions">
8+
<h3>{{ questionSelected.question }}</h3>
9+
</div>
10+
<div *ngIf=!finished class="quizz_options">
11+
<button *ngFor="let option of questionSelected.options; let i = index"
12+
(click)="playerChoose(option.alias)"
13+
class="btn-option">
14+
{{ option.name }}
15+
</button>
16+
</div>
17+
<div *ngIf=finished class="quizz_results" ngClass="{{ bgc }}">
18+
<h1>O seu resultado é: </h1>
19+
<p>{{ answerSelected }}</p>
20+
<img src="{{ photo }}" alt="">
21+
</div>
22+
</div>

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

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import quizz_questions from "../../../assets/data/quizz_questions-sorting-hat.json"
3+
4+
@Component({
5+
selector: 'app-quizz',
6+
templateUrl: './quizz.component.html',
7+
styleUrls: ['./quizz.component.css']
8+
})
9+
export class QuizzComponent implements OnInit {
10+
11+
title: string = ""
12+
13+
questions: any
14+
questionSelected: any
15+
16+
answers: string[] = []
17+
answerSelected: string = ""
18+
19+
questionIndex: number = 0
20+
questionMaxIndex: number = 0
21+
22+
finished: boolean = false
23+
24+
photo:string = ""
25+
26+
bgc:string = ""
27+
28+
constructor() { }
29+
30+
ngOnInit(): void {
31+
this.finished = false
32+
this.title = quizz_questions.title
33+
34+
this.questions = quizz_questions.questions
35+
this.questionSelected = this.questions[this.questionIndex]
36+
37+
this.questionIndex = 0
38+
this.questionMaxIndex = this.questions.length
39+
40+
}
41+
42+
playerChoose(value: string) {
43+
this.answers.push(value)
44+
this.nextStep()
45+
}
46+
47+
async nextStep() {
48+
this.questionIndex += 1
49+
50+
if (this.questionMaxIndex > this.questionIndex) {
51+
this.questionSelected = this.questions[this.questionIndex]
52+
} else {
53+
const finalAnswer:string = await this.checkResult(this.answers)
54+
this.finished = true
55+
this.answerSelected = quizz_questions.results[finalAnswer as keyof typeof quizz_questions.results]
56+
57+
if(finalAnswer === "G"){
58+
this.photo = '../../../assets/imgs/Gryffindor.webp'
59+
this.bgc = "griff"
60+
document.body.classList.toggle('griffindor')
61+
}else if(finalAnswer === "S"){
62+
this.photo = "../../../assets/imgs/Slytherin.webp"
63+
this.bgc = "sly"
64+
document.body.classList.toggle('slytherin')
65+
}else if(finalAnswer === "H"){
66+
this.photo = "../../../assets/imgs/Hufflepuff.webp"
67+
this.bgc = "huff"
68+
document.body.classList.toggle('hufflepuff')
69+
}else{
70+
this.photo = "../../../assets/imgs/Ravenclaw.webp"
71+
this.bgc = "rav"
72+
document.body.classList.toggle('ravenclaw')
73+
}
74+
}
75+
}
76+
77+
async checkResult(answers: string[]) {
78+
const result = answers.reduce((previous, current, i, arr)=> {
79+
if(
80+
arr.filter(item => item=== previous).length >
81+
arr.filter(item => item=== current).length
82+
){
83+
return previous
84+
}else{
85+
return current
86+
}
87+
})
88+
return result
89+
}
90+
}

‎src/app/pages/home/home.component.css

Whitespace-only changes.

‎src/app/pages/home/home.component.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="home__container">
2+
<app-quizz></app-quizz>
3+
</div>

‎src/app/pages/home/home.component.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-home',
5+
templateUrl: './home.component.html',
6+
styleUrls: ['./home.component.css']
7+
})
8+
export class HomeComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit(): void {
13+
}
14+
15+
}

‎src/assets/data/quizz_questions-sorting-hat.json

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"title":"Qual a sua casa em Hogwarts?",
3+
"questions":[
4+
{
5+
"id":1,
6+
"question": "Você está indo para Hogwarts e precisa levar um pet, qual seria ele?",
7+
"options":[
8+
{"id": 1, "name":"Sapo", "alias":"H"},
9+
{"id": 2, "name":"Coruja", "alias":"G"},
10+
{"id": 3, "name":"Pufoso", "alias":"R"},
11+
{"id": 4, "name":"Gato", "alias":"S"}
12+
]
13+
},
14+
{
15+
"id":2,
16+
"question": "Pensando em tudo que você pode aprender, quais são as matérias que tem mais interesse?",
17+
"options":[
18+
{"id": 1, "name":"Defesa Contra as Artes das Trevas e Vôo com vassouras", "alias":"G"},
19+
{"id": 2, "name":"Herbologia e Trato das Criaturas Mágicas", "alias":"H"},
20+
{"id": 3, "name":"Poções e Feitiços", "alias":"S"},
21+
{"id": 4, "name":"Transfiguração e Adivinhação", "alias":"R"}
22+
]
23+
},
24+
{
25+
"id":3,
26+
"question": "Pense rápido!!! Alguém acabou de lançar um feitiço em você, qual contra-feitiço você grita de volta?",
27+
"options":[
28+
{"id": 1, "name":"PROTEGO!", "alias":"H"},
29+
{"id": 2, "name":"EXPELLIARMUS!", "alias":"G"},
30+
{"id": 3, "name":"ESTUPEFAÇA!", "alias":"R"},
31+
{"id": 4, "name":"CRUCIO!", "alias":"S"}
32+
]
33+
},
34+
{
35+
"id":4,
36+
"question": "Pensando em sua personalidade, qual seria dessas seria uma de suas características?",
37+
"options":[
38+
{"id": 1, "name":"Sinceridade", "alias":"H"},
39+
{"id": 2, "name":"Sagacidade", "alias":"R"},
40+
{"id": 3, "name":"Bravura", "alias":"G"},
41+
{"id": 4, "name":"Astúcia", "alias":"S"}
42+
]
43+
},
44+
{
45+
"id":5,
46+
"question": "ATENÇÃO! Sabendo que o Chapéu Seletor leva sua vontade em consideração, qual casa você escolheria?",
47+
"options":[
48+
{"id": 1, "name":"Grifinória", "alias":"G"},
49+
{"id": 2, "name":"Lufa-lufa", "alias":"H"},
50+
{"id": 3, "name":"Corvinal", "alias":"R"},
51+
{"id": 4, "name":"Sonserina", "alias":"S"}
52+
]
53+
}
54+
],
55+
"results":{
56+
"G": "GRIFINÓRIA!",
57+
"S": "SONSERINA!",
58+
"R": "CORVINAL!",
59+
"H": "LUFA-LUFA!"
60+
}
61+
}

‎src/assets/imgs/Gryffindor.webp

46.1 KB
Binary file not shown.

‎src/assets/imgs/Hufflepuff.webp

41.3 KB
Binary file not shown.

‎src/assets/imgs/Ravenclaw.webp

29.8 KB
Binary file not shown.

‎src/assets/imgs/Slytherin.webp

111 KB
Binary file not shown.

‎src/assets/imgs/logo.png

5.77 KB
Loading

‎src/favicon.ico

-948 Bytes
Binary file not shown.

‎src/favicon.png

46.1 KB
Loading

‎src/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>BuzzfeedProject</title>
5+
<title>Buzzfeed Clone Project</title>
66
<base href="/">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<link rel="icon" type="image/x-icon" href="favicon.ico">
8+
<link rel="icon" type="image/x-icon" href="favicon.png">
99
</head>
1010
<body>
1111
<app-root></app-root>

0 commit comments

Comments
 (0)