├── .github
├── logo.png
└── preview.png
├── README.md
├── index.html
├── index.js
└── style.css
/.github/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-education/nlw-expert-html-css-js/b84307d525e191002244f947fa6fcad8fe12bfbe/.github/logo.png
--------------------------------------------------------------------------------
/.github/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-education/nlw-expert-html-css-js/b84307d525e191002244f947fa6fcad8fe12bfbe/.github/preview.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
5 |
6 | Aplicação desenvolvida no NLW Expert da Rocketseat na trilha HTML+CSS+JS.
7 |
8 |
9 |
10 | Tecnologias |
11 | Projeto |
12 | Licença
13 |
14 |
15 |
16 | 
17 |
18 |
19 |
20 |
21 |
22 | 
23 |
24 |
25 | ## 🚀 Tecnologias
26 |
27 | Esse projeto foi desenvolvido com as seguintes tecnologias:
28 |
29 | - HTML
30 | - CSS
31 | - JavaScript
32 |
33 |
34 | ## 💻 Projeto
35 |
36 | Nesse projeto você vai desenvolver um quiz pra testar os seus conhecimentos técnicos e ter um retorno sobre a quantidade de questões que você acertou.
37 |
38 |
39 | ## 📝 Licença
40 |
41 | Esse projeto está sob a licença MIT.
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | NLW Expert
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | 
17 | Teste seus conhecimentos
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | Pergunta 01
26 |
27 |
28 | -
29 |
30 |
31 | Resposta A
32 |
33 |
34 |
35 |
39 | Acertos
40 | 0 de 10
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const perguntas = [
2 | {
3 | pergunta: "Qual é a finalidade do comando 'console.log()' em JavaScript?",
4 | respostas: [
5 | "Exibir uma mensagem de erro",
6 | "Imprimir dados no console",
7 | "Criar uma variável"
8 | ],
9 | correta: 1
10 | },
11 | {
12 | pergunta: "Qual é a função do operador '===' em comparações em JavaScript?",
13 | respostas: [
14 | "Comparação de valores sem considerar o tipo",
15 | "Atribuição de valores",
16 | "Comparação estrita de valores e tipos"
17 | ],
18 | correta: 2
19 | },
20 | {
21 | pergunta: "Como se declara uma variável em JavaScript?",
22 | respostas: [
23 | "let myVar;",
24 | "const myVar = 10;",
25 | "ambas as opções acima estão corretas"
26 | ],
27 | correta: 2
28 | },
29 | {
30 | pergunta: "O que é uma função em JavaScript?",
31 | respostas: [
32 | "Um tipo de dado",
33 | "Um bloco de código reutilizável",
34 | "Uma variável global"
35 | ],
36 | correta: 1
37 | },
38 | {
39 | pergunta: "Qual é a diferença entre 'let' e 'const' na declaração de variáveis?",
40 | respostas: [
41 | "Nenhuma, são sinônimos",
42 | "let é usado para valores constantes, const para variáveis",
43 | "let permite reatribuição, const cria variáveis imutáveis"
44 | ],
45 | correta: 2
46 | },
47 | {
48 | pergunta: "O que é o DOM em JavaScript?",
49 | respostas: [
50 | "Um método de criptografia",
51 | "Um modelo de objeto para manipular documentos HTML",
52 | "Uma linguagem de programação"
53 | ],
54 | correta: 1
55 | },
56 | {
57 | pergunta: "Como se realiza uma iteração sobre os elementos de um array em JavaScript?",
58 | respostas: [
59 | "Usando a estrutura 'if-else'",
60 | "Com a declaração 'switch'",
61 | "Utilizando loops como 'for' ou 'forEach'"
62 | ],
63 | correta: 2
64 | },
65 | {
66 | pergunta: "O que é o JSON em JavaScript?",
67 | respostas: [
68 | "Um método de formatação de texto",
69 | "Uma linguagem de estilização",
70 | "Um formato de dados leve e intercambiável"
71 | ],
72 | correta: 2
73 | },
74 | {
75 | pergunta: "Qual é a diferença entre 'null' e 'undefined' em JavaScript?",
76 | respostas: [
77 | "São iguais, usados de forma intercambiável",
78 | "'null' representa a ausência de valor, 'undefined' é atribuído explicitamente",
79 | "Ambos representam valores vazios"
80 | ],
81 | correta: 1
82 | },
83 | {
84 | pergunta: "Como se adiciona um evento a um elemento HTML usando JavaScript?",
85 | respostas: [
86 | "Apenas com CSS",
87 | "Usando o atributo 'event'",
88 | "Através do método 'addEventListener'"
89 | ],
90 | correta: 2
91 | },
92 | ];
93 |
94 | const quiz = document.querySelector('#quiz')
95 | const template = document.querySelector('template')
96 |
97 | const corretas = new Set()
98 | const totalDePerguntas = perguntas.length
99 | const mostrarTotal = document.querySelector('#acertos span')
100 | mostrarTotal.textContent = corretas.size + ' de ' + totalDePerguntas
101 |
102 | // loop ou laço de repetição
103 | for (const item of perguntas) {
104 | const quizItem = template.content.cloneNode(true)
105 | quizItem.querySelector('h3').textContent = item.pergunta
106 |
107 | for (let resposta of item.respostas) {
108 | const dt = quizItem.querySelector('dl dt').cloneNode(true)
109 | dt.querySelector('span').textContent = resposta
110 | dt.querySelector('input').setAttribute('name', 'pergunta-' + perguntas.indexOf(item))
111 | dt.querySelector('input').value = item.respostas.indexOf(resposta)
112 | dt.querySelector('input').onchange = (event) => {
113 | const estaCorreta = event.target.value == item.correta
114 |
115 | corretas.delete(item)
116 | if (estaCorreta) {
117 | corretas.add(item)
118 | }
119 |
120 | mostrarTotal.textContent = corretas.size + ' de ' + totalDePerguntas
121 | }
122 | quizItem.querySelector('dl').appendChild(dt)
123 | }
124 |
125 |
126 | quizItem.querySelector('dl dt').remove()
127 |
128 |
129 | // coloca a pergunta na tela
130 | quiz.appendChild(quizItem)
131 | }
132 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
2 |
3 | *,
4 | :root {
5 | margin: 0;
6 | padding: 0;
7 | box-sizing: border-box;
8 |
9 | font-family: 'Inter', sans-serif;
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | -webkit-text-size-adjust: 100%;
15 | }
16 |
17 | body {
18 | background-color: #0F172A;
19 | }
20 |
21 | main {
22 | padding: 20px;
23 | max-width: 640px;
24 | margin: 0 auto 64px;
25 | }
26 |
27 | header {
28 | margin-top: 64px;
29 | padding-bottom: 24px;
30 | border-bottom: 1px solid #334155;
31 | }
32 |
33 | header h1 {
34 | margin-top: 24px;
35 | font-size: 30px;
36 | color: #f1f5f9;
37 | }
38 |
39 | #quiz {
40 | counter-reset: quiz-item;
41 | }
42 |
43 |
44 | .quiz-item {
45 | margin-top: 24px;
46 | border: 1px solid #475569;
47 | border-radius: 6px;
48 |
49 | overflow: hidden;
50 | }
51 |
52 | .quiz-item h3 {
53 | padding: 16px 20px;
54 | color: #E2E8F0;
55 |
56 | display: flex;
57 | align-items: center;
58 | gap: 12px;
59 |
60 | background-color: #1e293B;
61 | }
62 |
63 | .quiz-item h3:before {
64 | counter-increment: quiz-item;
65 | content: counter(quiz-item);
66 |
67 | background-color: #475569;
68 | width: 28px;
69 | height: 28px;
70 | font-size: 12px;
71 | border-radius: 50%;
72 |
73 | display: flex;
74 | align-items: center;
75 | justify-content: center;
76 | flex-shrink: 0;
77 | }
78 |
79 | .quiz-item dl {
80 | padding: 20px 24px;
81 |
82 | display: grid;
83 | gap: 8px;
84 | }
85 |
86 | .quiz-item dl dt {
87 | font-size: 14px;
88 | line-height: 24px;
89 | letter-spacing: 0;
90 |
91 | display: flex;
92 | align-items: center;
93 | gap: 8px;
94 |
95 | color: #E2E8F0;
96 | }
97 |
98 | input {
99 | all: unset;
100 | border: 1px solid #94a3b8;
101 | width: 16px;
102 | height: 16px;
103 |
104 | border-radius: 50%;
105 |
106 | display: flex;
107 | align-items: center;
108 | justify-content: center;
109 |
110 | flex-shrink: 0;
111 | }
112 |
113 | input:checked {
114 | border: 1px solid #A3E635;
115 | }
116 |
117 | input:checked:before {
118 | content: "";
119 | width: 10px;
120 | height: 10px;
121 |
122 | background-color: #A3E635;
123 | border-radius: 50%;
124 | }
125 |
126 |
127 | #acertos {
128 | text-align: center;
129 | background-color: #A3E635;
130 |
131 | position: fixed;
132 | bottom: 0;
133 | left: 0;
134 |
135 | width: 100%;
136 | padding: 12px;
137 | }
--------------------------------------------------------------------------------