Skip to content

Commit 373f1fe

Browse files
Sln-GRSln-GR
authored
Commit Inicial
0 parents  commit 373f1fe

File tree

6 files changed

+230
-0
lines changed

6 files changed

+230
-0
lines changed

‎images/aprovado.png

7.68 KB
Loading

‎images/logo.png

7.76 KB
Loading

‎images/reprovado.png

5.14 KB
Loading

‎index.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Calculadora de Médias</title>
7+
<link rel="stylesheet" href="./main.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<header>
12+
<img src="./images/logo.png" alt="capelo e diploma">
13+
<h1>Calculadora de Médias</h1>
14+
</header>
15+
<form id="form-atividade">
16+
<input id="nome-atividade" type="text" required placeholder="Nome da Atividade">
17+
<input id="nota-atividade" type="number" required placeholder="Nota" min="0" max="10">
18+
<button id="btn-submit" type="submit">Adicionar +</button>
19+
</form>
20+
<table cellspacing="0">
21+
<thead>
22+
<tr>
23+
<th>Nome da Atividade</th>
24+
<th>Nota da Atividade</th>
25+
<th>Aprovado?</th>
26+
</tr>
27+
</thead>
28+
<tbody>
29+
</tbody>
30+
<tfoot>
31+
<tr>
32+
<td>Média Final</td>
33+
<td id="media-final-valor">---</td>
34+
<td id="media-final-resultado">---</td>
35+
</tr>
36+
</tfoot>
37+
</table>
38+
</div>
39+
<script src="./main.js"></script>
40+
</body>
41+
</html>

‎main.css

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
padding-top: 100px;
9+
background-color: #E7E7E7;
10+
}
11+
12+
.container {
13+
margin: 0 auto;
14+
max-width: 940px;
15+
width: 100%;
16+
}
17+
18+
header {
19+
display: flex;
20+
align-items: center;
21+
margin-bottom: 16px;
22+
}
23+
24+
header img {
25+
height: 36px;
26+
margin-right: 16px;
27+
}
28+
29+
header h1 {
30+
font-size: 40px;
31+
font-weight: bold;
32+
}
33+
34+
form {
35+
display: flex;
36+
max-width: 640px;
37+
width: 100%;
38+
justify-content: space-between;
39+
margin-bottom: 56px;
40+
}
41+
42+
form input {
43+
border: none;
44+
border-bottom: 2px solid black;
45+
font-size: 24px;
46+
padding: 8px;
47+
}
48+
49+
form button {
50+
background-color: green;
51+
color: #fff;
52+
font-size: 24px;
53+
font-weight: bold;
54+
border: none;
55+
cursor: pointer;
56+
padding: 8px;
57+
}
58+
59+
table {
60+
width: 100%;
61+
}
62+
63+
table th {
64+
border-bottom: 2px solid #000;
65+
padding: 16px;
66+
font-size: 24px;
67+
font-weight: bold;
68+
}
69+
70+
table td {
71+
padding: 16px 0;
72+
text-align: center;
73+
font-size: 18px;
74+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
75+
}
76+
77+
table td img {
78+
height: 30px;
79+
}
80+
81+
.resultado {
82+
padding: 8px;
83+
font-weight: bold;
84+
color: #fff;
85+
background-color: #000;
86+
border-radius: 3px;
87+
}
88+
89+
.aprovado {
90+
background-color: green;
91+
}
92+
93+
.reprovado {
94+
background-color: red;
95+
}

‎main.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
const form = document.querySelector('form#form-atividade')
2+
const imgAprovado = '<img src="./images/aprovado.png" alt="Emoji celebrando" />';
3+
const imgReprovado = '<img src="./images/reprovado.png" alt="Emoji celebrando" />';
4+
5+
//adiciona remos em um array todas as atividades que o usuário digitou
6+
// no outro array adicionaremos/armazenaremos todas as notas
7+
8+
const atividades = [];
9+
const notas = [];
10+
11+
const spanAprovado = '<span class="resultado aprovado">Aprovado</span>'
12+
const spanReprovado = '<span class = "resultado reprovado">Reprovado</span>'
13+
14+
const notaMinima = parseFloat(prompt("Digite a nota mínima para passar!"))
15+
16+
let linhas = '';
17+
18+
//foi movida para o escopo global, pois toda vez que o evento submit ocorre
19+
//as variáveis dentro dele são resetadas.
20+
21+
form.addEventListener('submit', function(e){
22+
e.preventDefault();
23+
24+
adicionaLinha();
25+
atualizaTabela();
26+
atualizaMediaFinal();
27+
28+
})
29+
30+
function adicionaLinha (){
31+
//capturando os campos
32+
33+
const inputNomeAtividade = document.querySelector('#nome-atividade');
34+
const inputNotaAtividade = document.querySelector('#nota-atividade');
35+
36+
// verificando se a atividade se repete
37+
38+
if (atividades.includes(inputNomeAtividade.value)){
39+
alert(`A atividade: ${inputNomeAtividade.value} já foi inserida`);
40+
} else {
41+
atividades.push(inputNomeAtividade.value);
42+
notas.push(parseFloat(inputNotaAtividade.value));
43+
44+
//criando uma linha
45+
46+
let linha = '<tr>';
47+
linha += `<td>${inputNomeAtividade.value}</td>`;
48+
linha += `<td>${inputNotaAtividade.value}</td>`;
49+
linha += `<td>${inputNotaAtividade.value >= notaMinima ? imgAprovado : imgReprovado} </td>`;
50+
linha += '</tr>'
51+
52+
//colocando esse conteúdo dentro do corpo da tabela
53+
54+
55+
linhas += linha;
56+
57+
//linha agora é linhas, entrou no espaço linhasm contem uma linha. Quando escrever mais uma
58+
//informação, ela vai virar linha, e então o linhas vai ser linha + linha + linha..
59+
}
60+
61+
62+
63+
64+
//Limpando os campos de input após enviar o formulário.
65+
66+
inputNomeAtividade.value = '';
67+
inputNotaAtividade.value = '';
68+
}
69+
70+
function atualizaTabela(){
71+
72+
const corpoTabela = document.querySelector('tbody');
73+
corpoTabela.innerHTML = linhas;
74+
75+
//de inicio era corpoTabela.innerHTML = linha; para testar se a linha iria ser adicionada.
76+
77+
}
78+
79+
function atualizaMediaFinal (){
80+
const mediaFinal = calculaMediaFinal();
81+
82+
document.querySelector('#media-final-valor').innerHTML = mediaFinal;
83+
document.querySelector('#media-final-resultado').innerHTML = mediaFinal >= notaMinima ? spanAprovado : spanReprovado;
84+
}
85+
86+
function calculaMediaFinal() {
87+
let somaDasNotas = 0;
88+
89+
for (let i = 0; i < notas.length; i++){
90+
somaDasNotas += notas[i];
91+
}
92+
93+
return somaDasNotas / notas.length;
94+
}

0 commit comments

Comments
 (0)