Skip to content

Commit d619452

Browse files
ThanksUniverseThanksUniverse
committed
Aula04
1 parent 249806a commit d619452

6 files changed

Lines changed: 167 additions & 67 deletions

File tree

‎css/calc.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,3 +174,29 @@ footer a {
174174
text-decoration: none;
175175
color: orangered;
176176
}
177+
178+
.form-container1 {
179+
width: 300px;
180+
background-color: #ffffff;
181+
border-radius: 10px;
182+
box-shadow: 1px 1px 5px 1px black;
183+
margin: 5px auto;
184+
padding: 10px;
185+
text-align: center;
186+
display: block;
187+
}
188+
189+
.mensagem {
190+
width: 300px;
191+
background-color: transparent;
192+
border-radius: 10px;
193+
box-shadow: 1px 1px 5px 1px black;
194+
margin: 5px auto;
195+
padding: 10px;
196+
text-align: center;
197+
display: block;
198+
}
199+
200+
.erro {
201+
border-color: red;
202+
}

‎css/funcoes.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.erro {
2+
border: 1px solid red;
3+
}
4+
5+
.mensagem {
6+
background-color: green;
7+
}

‎html/code-together0.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<iframe src="../README.md" title="Homework"></iframe>
1919
<div class="form-container">
2020
<h4>Calcular Média</h4>
21-
<form>
21+
<form id="form0">
2222
<div class="notas">
2323
<label for="nota01">Nota 1</label>
2424
<input type="number" class="ninput" id="nota01" name="n1" min="0" step="0.1" max="10">
@@ -51,6 +51,14 @@ <h4>Calcular Média</h4>
5151
</div>
5252
</form>
5353
</div>
54+
<div class="form-container1">
55+
<form id="form1" method="post">
56+
<h5>Faça seu cadastro</h5>
57+
<input type="text" placeholder="Digite o seu nome" name="name">
58+
<button type="submit">Enviar</button>
59+
</form>
60+
</div>
61+
<div class="mensagem"></div>
5462
</section>
5563
<footer>
5664
<p>Desenvolvido por: <em><a href="https://github.com/ThanksUniverse/" target="_blank">Pedro</a></em></p>

‎html/funcoes.html‎

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>JavaScript</title>
8-
</head>
9-
<body>
10-
11-
<div class="container">
12-
13-
<form id="form-01">
14-
<input type="text" placeholder="digite um número" name="n1">
15-
<input type="text" placeholder="digite um número" name="n2">
16-
<input type="text" placeholder="digite um número" name="n3">
17-
<input type="text" placeholder="digite um número" name="n4">
18-
<input type="submit" value="Enviar">
19-
<div id="resultado"></div>
20-
</form>
21-
22-
23-
24-
</div>
25-
26-
27-
28-
29-
30-
31-
<script type="text/javascript" src="../js/script.js"></script>
32-
33-
</body>
34-
</html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="../css/funcoes.css" />
8+
<title>JavaScript</title>
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<form id="form-01">
14+
<h2>Cálculo de Média</h2>
15+
<p>Preencha as notas de 0 a 10</p>
16+
<input type="text" placeholder="digite um número" name="n1" min="0" step="0.1" max="10" class="numero" />
17+
<input type="text" placeholder="digite um número" name="n2" min="0" step="0.1" max="10" class="numero" />
18+
<input type="text" placeholder="digite um número" name="n3" min="0" step="0.1" max="10" class="numero" />
19+
<input type="text" placeholder="digite um número" name="n4" min="0" step="0.1" max="10" class="numero" />
20+
<input type="submit" value="Enviar" />
21+
</form>
22+
23+
<form id="form-02">
24+
<h5>Faça seu cadastro</h5>
25+
<input type="text" placeholder="digite seu nome" name="nome" class="obrigatorio" />
26+
<input type="text" placeholder="digite seu email" name="email" class="obrigatorio" />
27+
<button type="submit">Enviar</button>
28+
</form>
29+
30+
<div id="resultado"></div>
31+
</div>
32+
33+
<div class="mensagem"></div>
34+
35+
<script type="text/javascript" src="../js/script.js"></script>
36+
</body>
37+
</html>

‎js/code-together0.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
//Change Form submit type
2-
3-
document.addEventListener('submit', function(evento){
2+
document.getElementById('form0').addEventListener('submit', function(evento){
43
evento.preventDefault();
54
evento.stopPropagation();
65
});
@@ -46,4 +45,4 @@ function MediaCalc() { //Calcular média
4645

4746
console.log(media);
4847
console.log(a + b + c + d)
49-
}
48+
}

‎js/script.js‎

Lines changed: 88 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,102 @@
1-
document.addEventListener('submit', function( evento ) {
1+
/*
2+
Formulário envio de dados para cálculo da Média
3+
*/
24

3-
evento.preventDefault(); //Formulário para de ter o comportamento padrão do html
4-
evento.stopPropagation(); //Faz com que todo submit de form caia nessa função
5+
document.getElementById("form-01").addEventListener("submit", function (evento) {
6+
evento.preventDefault(); //Formulário para de ter o comportamento padrão do html
7+
evento.stopPropagation(); //Faz com que todo submit de form caia nessa função
58

6-
let form = document.getElementById('form-01');
9+
if (this.getAttribute("class").match(/erro/)) {
10+
return false;
11+
}
712

8-
let dados = new FormData(form)
13+
let dados = new FormData(this);
914

10-
let objeto = {}; //Assim como array, string, número também é um tipo de variável
15+
let notas = [];
1116

12-
let notas = [];
17+
for (let key of dados.keys()) {
18+
let numero = dados.get(key).match(/\d*/) ? Number(dados.get(key)) : 0; // ParseFloat - Número com ponto depois do decimal
19+
// .match(/\d/) verifica se contem um digito se sim transforma em um número se não transforma em 0
20+
console.log(typeof numero);
1321

14-
for(let key of dados.keys()) {
15-
objeto[key] = dados.get(key);
22+
if (!isNaN(numero)) {
23+
notas.push(numero);
24+
}
25+
}
26+
27+
console.log(notas);
28+
29+
function calcularMedia(notas) {
30+
var soma = 0;
31+
for (c = 0; c < notas.length; c++) {
32+
soma += notas[c];
33+
}
34+
35+
media = soma / notas.length; //Utilizar notas.length para que ele calcule dinamicamente a quantidade que ela recebeu
1636

17-
//Adicionar itens o array
18-
notas.push (parseInt(dados.get(key) ) );
19-
}
37+
return media;
38+
}
2039

21-
console.log(notas);
22-
console.log(objeto);
40+
function aprovacao(notas) {
41+
let media = calcularMedia(notas);
2342

24-
function calcularMedia( notas ) {
43+
if (media >= 7) {
44+
condicao = "Aprovado";
45+
document.getElementById("resultado").style.backgroundColor = "Green";
46+
} else if (media >= 4) {
47+
condicao = "Recuperação";
48+
document.getElementById("resultado").style.backgroundColor = "Yellow";
49+
} else {
50+
condicao = "Reprovado";
51+
document.getElementById("resultado").style.backgroundColor = "Red";
52+
}
53+
return "Média: " + media + " - Resultado: " + condicao;
54+
}
55+
56+
document.getElementById("resultado").innerHTML = aprovacao(notas);
57+
aprovacao(notas);
58+
});
2559

26-
var soma = 0
27-
for( c = 0; c < notas.length; c++ ) {
28-
soma += notas[c]
29-
}
30-
31-
media = soma / notas.length //Utilizar notas.length para que ele calcule dinamicamente a quantidade que ela recebeu
32-
33-
return media;
34-
}
60+
function Validation(elemento) {
61+
elemento.addEventListener("focusout", function (event) {
62+
event.preventDefault();
3563

36-
function aprovacao( notas ) {
37-
let media = calcularMedia(notas); // escopo da função
38-
let condicao = media >= 7 ? "aprovado" : "reprovado";
39-
return 'Média: ' + media + ' - Resultado: ' + condicao;
64+
if (this.value == "") {
65+
document.querySelector(".mensagem").innerHTML = "Verifique o preenchimento dos campos em vermelho";
66+
this.classList.add("erro");
67+
this.parentNode.classList.add("erro"); //Adiciona Classe no ParerntNode(Pai) no caso no formulário, impedindo que envie o formulário
68+
return false;
69+
} else {
70+
document.querySelector(".mensagem").innerHTML = "";
71+
this.classList.remove("erro");
72+
this.parentNode.classList.remove("erro");
4073
}
74+
});
75+
}
76+
77+
function NumericValidation(elemento) {
78+
elemento.addEventListener("focusout", function (event) {
79+
event.preventDefault();
80+
if (this.value != "" && this.value.match(/[0-9]*/) && this.value >= 0 && this.value <= 10) {
81+
document.querySelector(".mensagem").innerHTML = "";
82+
this.classList.remove("erro");
83+
this.parentNode.classList.remove("erro");
84+
} else {
85+
document.querySelector(".mensagem").innerHTML = "O campo é apenas numérico";
86+
this.classList.add("erro");
87+
this.parentNode.classList.add("erro"); //Adiciona Classe no ParerntNode(Pai) no caso no formulário, impedindo que envie o formulário
88+
return false;
89+
}
90+
});
91+
}
92+
93+
let Necessary = document.querySelectorAll("input.obrigatorio");
94+
let Numeric = document.querySelectorAll("input.numero");
4195

42-
document.getElementById('resultado').innerHTML = aprovacao(notas);
43-
aprovacao(notas);
96+
for (let Focused of Necessary) {
97+
Validation(Focused);
98+
}
4499

45-
});
100+
for (let Focused of Numeric) {
101+
NumericValidation(Focused);
102+
}

0 commit comments

Comments
 (0)