Explorar o código

criacao do teste

Christian Matheus Batista Macedo %!s(int64=6) %!d(string=hai) anos
achega
802b3cb8d8

BIN=BIN
.DS_Store


+ 157 - 0
Teste/introducao-javascript/css/index.css

@@ -0,0 +1,157 @@
1
+*{
2
+	box-sizing: border-box;
3
+ }
4
+
5
+body{
6
+	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
7
+	font-size: 14px;
8
+}
9
+
10
+header{
11
+	background-color: #333;
12
+	height: 3em;
13
+	color: #FFF;
14
+	margin-bottom: 1em;
15
+}
16
+
17
+header h1{
18
+	font-size: 2em;
19
+	display:inline-block;
20
+	vertical-align:	middle;
21
+}
22
+header h2{
23
+	font-size: 2em;
24
+	display:inline-block;
25
+	vertical-align:	middle;
26
+}
27
+
28
+header .container:before{
29
+	content: '';
30
+	display:inline-block;
31
+	height: 100%;
32
+	vertical-align:	middle;
33
+}
34
+
35
+.container{
36
+	width: 60%;
37
+	height: 100%;
38
+	margin: 0 auto;
39
+}
40
+
41
+section{
42
+	margin: 2em 0;
43
+	overflow: hidden;
44
+}
45
+
46
+section h2{
47
+	font-size: 3em;
48
+	display: block;
49
+	padding-bottom: .5em;
50
+	border-bottom: 1px solid #ccc;
51
+	margin-bottom: .5em;
52
+}
53
+
54
+table{
55
+	width: 100%;
56
+	margin-bottom : .5em;
57
+    table-layout: fixed;
58
+
59
+}
60
+
61
+td, th {
62
+	padding: .7em;
63
+	margin: 0;
64
+	border: 1px solid #ccc;
65
+	text-align: center;
66
+}
67
+
68
+th{
69
+	font-weight: bold;
70
+	background-color: #EEE;
71
+}
72
+
73
+label{
74
+	color: #555;
75
+	display: block;
76
+	margin-bottom: .2em;
77
+}
78
+
79
+.campo{
80
+	margin: 0;
81
+	padding-bottom: 1em;
82
+	width: 100%;
83
+	border: 1px solid #ccc;
84
+	padding: .7em;
85
+	width: 100%;
86
+}
87
+
88
+.campo-medio{
89
+	display: inline-block;
90
+	padding-right: .5em;
91
+}
92
+
93
+.grupo{
94
+	width: 32%;
95
+	display: inline-block;
96
+	padding: 10px 0px;
97
+}
98
+
99
+button{
100
+	padding: .5em 2em;
101
+	border: 0;
102
+	border-bottom: 3px solid;
103
+	font-size: 1.2em;
104
+	cursor: pointer;
105
+	margin: 0;
106
+	margin-top: -3px;
107
+	color: #fff;
108
+	background-color:#0c8cd3;
109
+	border-color: #04324c;
110
+	width: 20%;
111
+    display: block;
112
+    clear: both;
113
+    margin: 10px 0px;
114
+
115
+}
116
+
117
+button:active{
118
+	margin-top:0px;
119
+	border: 0;
120
+}
121
+
122
+button[disabled=disabled], button:disabled {
123
+    background-color: gray;
124
+	border-color: darkgray;
125
+
126
+}
127
+
128
+.adicionar-paciente{
129
+    margin-top: 30px;
130
+}
131
+
132
+.campo-invalido{
133
+	border: 1px solid red;
134
+}
135
+
136
+.paciente-invalido {
137
+	background-color: lightcoral;
138
+}
139
+
140
+#mensagens-erro {
141
+	color: red;
142
+}
143
+
144
+.fadeOut {
145
+	opacity: 0;
146
+	transition: 0.5s;
147
+}
148
+
149
+#filtrar-tabela {
150
+	width: 200px;
151
+	height: 35px;
152
+	margin-bottom: 10px;
153
+}
154
+
155
+.invisivel {
156
+	display: none;
157
+}

+ 48 - 0
Teste/introducao-javascript/css/reset.css

@@ -0,0 +1,48 @@
1
+/* http://meyerweb.com/eric/tools/css/reset/ 
2
+   v2.0 | 20110126
3
+   License: none (public domain)
4
+*/
5
+
6
+html, body, div, span, applet, object, iframe,
7
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8
+a, abbr, acronym, address, big, cite, code,
9
+del, dfn, em, img, ins, kbd, q, s, samp,
10
+small, strike, strong, sub, sup, tt, var,
11
+b, u, i, center,
12
+dl, dt, dd, ol, ul, li,
13
+fieldset, form, label, legend,
14
+table, caption, tbody, tfoot, thead, tr, th, td,
15
+article, aside, canvas, details, embed, 
16
+figure, figcaption, footer, header, hgroup, 
17
+menu, nav, output, ruby, section, summary,
18
+time, mark, audio, video {
19
+	margin: 0;
20
+	padding: 0;
21
+	border: 0;
22
+	font-size: 100%;
23
+	font: inherit;
24
+	vertical-align: baseline;
25
+}
26
+/* HTML5 display-role reset for older browsers */
27
+article, aside, details, figcaption, figure, 
28
+footer, header, hgroup, menu, nav, section {
29
+	display: block;
30
+}
31
+body {
32
+	line-height: 1;
33
+}
34
+ol, ul {
35
+	list-style: none;
36
+}
37
+blockquote, q {
38
+	quotes: none;
39
+}
40
+blockquote:before, blockquote:after,
41
+q:before, q:after {
42
+	content: '';
43
+	content: none;
44
+}
45
+table {
46
+	border-collapse: collapse;
47
+	border-spacing: 0;
48
+}

BIN=BIN
Teste/introducao-javascript/favicon.ico


+ 113 - 0
Teste/introducao-javascript/index.html

@@ -0,0 +1,113 @@
1
+<!DOCTYPE html>
2
+<html lang="pt-br">
3
+	<head>
4
+		<meta charset="UTF-8">
5
+		<title>Aparecida Nutrição</title>
6
+		<link rel="icon" href="favicon.ico" type="image/x-icon">
7
+		<link rel="stylesheet" type="text/css" href="css/reset.css">
8
+		<link rel="stylesheet" type="text/css" href="css/index.css">
9
+
10
+	</head>
11
+	<body>
12
+
13
+		<header>
14
+			<div class="container">
15
+				<h2 class="titulo">Aparecida Nutrição</h2>
16
+			</div>
17
+		</header>
18
+		<main>
19
+			<section class="container">
20
+				<h2>Meus pacientes</h2>
21
+				<label for="filtrar-tabela">Filtre:</label>
22
+				<input type="text" name="filtro" id="filtrar-tabela" placeholder="Digite o nome do paciente">
23
+				<table>
24
+					<thead>
25
+						<tr>
26
+							<th>Nome</th>
27
+							<th>Peso(kg)</th>
28
+							<th>Altura(m)</th>
29
+							<th>Gordura Corporal(%)</th>
30
+							<th>IMC</th>
31
+						</tr>
32
+					</thead>
33
+					<tbody id="tabela-pacientes">
34
+						<tr class="paciente" id="primeiro-paciente">
35
+							<td class="info-nome">Paulo</td>
36
+							<td class="info-peso">100</td>
37
+							<td class="info-altura">2.00</td>
38
+							<td class="info-gordura">10</td>
39
+							<td class="info-imc">0</td>
40
+						</tr>
41
+
42
+						<tr class="paciente" >
43
+							<td class="info-nome">João</td>
44
+							<td class="info-peso">80</td>
45
+							<td class="info-altura">1.72</td>
46
+							<td class="info-gordura">40</td>
47
+							<td class="info-imc">0</td>
48
+						</tr>
49
+
50
+						<tr class="paciente" >
51
+							<td class="info-nome">Erica</td>
52
+							<td class="info-peso">54</td>
53
+							<td class="info-altura">1.64</td>
54
+							<td class="info-gordura">14</td>
55
+							<td class="info-imc">0</td>
56
+						</tr>
57
+
58
+						<tr class="paciente">
59
+							<td class="info-nome">Douglas</td>
60
+							<td class="info-peso">85</td>
61
+							<td class="info-altura">1.73</td>
62
+							<td class="info-gordura">24</td>
63
+							<td class="info-imc">0</td>
64
+						</tr>
65
+						<tr class="paciente" >
66
+							<td class="info-nome">Tatiana</td>
67
+							<td class="info-peso">46</td>
68
+							<td class="info-altura">1.55</td>
69
+							<td class="info-gordura">19</td>
70
+							<td class="info-imc">0</td>
71
+						</tr>
72
+					</tbody>
73
+				</table>
74
+				<span id="erro-ajax" class="invisivel">Erro ao buscar os pacientes</span>
75
+
76
+				<button id="buscar-pacientes" class="botao bto-principal">Buscar Pacientes</button>
77
+
78
+			</section>
79
+		</main>
80
+
81
+		<section class="container">
82
+		    <h2 id="titulo-form">Adicionar novo paciente</h2>
83
+			<ul id="mensagens-erro"></ul>
84
+		    <form id="form-adiciona">
85
+		        <div class="">
86
+		            <label for="nome">Nome:</label>
87
+		            <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
88
+		        </div>
89
+		        <div class="grupo">
90
+		            <label for="peso">Peso:</label>
91
+		            <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
92
+		        </div>
93
+		        <div class="grupo">
94
+		            <label for="altura">Altura:</label>
95
+		            <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
96
+		        </div>
97
+		        <div class="grupo">
98
+		            <label for="gordura">% de Gordura:</label>
99
+		            <input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
100
+		        </div>
101
+
102
+		        <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
103
+		    </form>
104
+		</section>
105
+
106
+		<script src="js/calcula-imc.js" ></script>
107
+		<script src="js/form.js" ></script>
108
+		<script src="js/remover-paciente.js" ></script>
109
+		<script src="js/filtra.js" ></script>
110
+		<script src="js/buscar-pacientes.js" ></script>
111
+
112
+	</body>
113
+</html>

+ 25 - 0
Teste/introducao-javascript/js/buscar-pacientes.js

@@ -0,0 +1,25 @@
1
+var botaoAdicionar = document.querySelector("#buscar-pacientes");
2
+
3
+botaoAdicionar.addEventListener("click", function() {
4
+    var xhr = new XMLHttpRequest();
5
+
6
+    xhr.open("GET", "https://api-pacientes.herokuapp.com/pacientes");
7
+
8
+    xhr.addEventListener("load", function() {
9
+        var erroAjax = document.querySelector("#erro-ajax");
10
+
11
+        if (xhr.status == 200) {
12
+            erroAjax.classList.add("invisivel");
13
+            var resposta = xhr.responseText;
14
+            var pacientes = JSON.parse(resposta);
15
+
16
+            pacientes.forEach(function(paciente) {
17
+                adicionaPacienteNaTabela(paciente);
18
+            });
19
+        } else {
20
+            erroAjax.classList.remove("invisivel");
21
+        }
22
+    });
23
+
24
+    xhr.send();
25
+});

+ 64 - 0
Teste/introducao-javascript/js/calcula-imc.js

@@ -0,0 +1,64 @@
1
+var titulo = document.querySelector(".titulo");
2
+titulo.textContent = "Aparecida Nutricionista";
3
+
4
+var pacientes = document.querySelectorAll(".paciente");
5
+
6
+for (var i = 0; i < pacientes.length; i++) {
7
+
8
+    var paciente = pacientes[i];
9
+
10
+    var tdPeso = paciente.querySelector(".info-peso");
11
+    var peso = tdPeso.textContent;
12
+
13
+    var tdAltura = paciente.querySelector(".info-altura");
14
+    var altura = tdAltura.textContent;
15
+
16
+    var tdImc = paciente.querySelector(".info-imc");
17
+
18
+    var pesoEhValido = validaPeso(peso);
19
+    var alturaEhValida = validaAltura(altura);
20
+
21
+    if (!pesoEhValido) {
22
+        console.log("Peso inválido!");
23
+        pesoEhValido = false;
24
+        tdImc.textContent = "Peso inválido";
25
+        paciente.classList.add("paciente-invalido");
26
+    }
27
+
28
+    if (!alturaEhValida) {
29
+        console.log("Altura inválida!");
30
+        alturaEhValida = false;
31
+        tdImc.textContent = "Altura inválida";
32
+        paciente.classList.add("paciente-invalido");
33
+    }
34
+
35
+    if (pesoEhValido && alturaEhValida) {
36
+        var imc = calculaImc(peso, altura);
37
+        tdImc.textContent = imc;
38
+    }
39
+}
40
+
41
+function calculaImc(peso, altura) {
42
+    var imc = 0;
43
+    imc = peso / (altura * altura);
44
+
45
+    return imc.toFixed(2);
46
+}
47
+
48
+function validaPeso(peso) {
49
+
50
+    if (peso >= 0 && peso <= 1000) {
51
+        return true;
52
+    } else {
53
+        return false;
54
+    }
55
+}
56
+
57
+function validaAltura(altura) {
58
+
59
+    if (altura >= 0 && altura <= 3.00) {
60
+        return true;
61
+    } else {
62
+        return false;
63
+    }
64
+}

+ 25 - 0
Teste/introducao-javascript/js/filtra.js

@@ -0,0 +1,25 @@
1
+var campoFiltro = document.querySelector("#filtrar-tabela");
2
+
3
+campoFiltro.addEventListener("input", function() {
4
+    var pacientes = document.querySelectorAll(".paciente");
5
+
6
+    if (this.value.length > 0) {
7
+        for (var i = 0; i < pacientes.length; i++) {
8
+            var paciente = pacientes[i];
9
+            var tdNome = paciente.querySelector(".info-nome");
10
+            var nome = tdNome.textContent;
11
+            var expressao = new RegExp(this.value, "i");
12
+
13
+            if (!expressao.test(nome)) {
14
+                paciente.classList.add("invisivel");
15
+            } else {
16
+                paciente.classList.remove("invisivel");
17
+            }
18
+        }
19
+    } else {
20
+        for (var i = 0; i < pacientes.length; i++) {
21
+            var paciente = pacientes[i];
22
+            paciente.classList.remove("invisivel");
23
+        }
24
+    }
25
+});

+ 106 - 0
Teste/introducao-javascript/js/form.js

@@ -0,0 +1,106 @@
1
+var botaoAdicionar = document.querySelector("#adicionar-paciente");
2
+botaoAdicionar.addEventListener("click", function(event) {
3
+    event.preventDefault();
4
+
5
+    var form = document.querySelector("#form-adiciona");
6
+
7
+    var paciente = obtemPacienteDoFormulario(form);
8
+
9
+    var erros = validaPaciente(paciente);
10
+
11
+    if (erros.length > 0) {
12
+        exibeMensagensDeErro(erros);
13
+
14
+        return;
15
+    }
16
+
17
+    adicionaPacienteNaTabela(paciente);
18
+
19
+    form.reset();
20
+
21
+    var mensagensErro = document.querySelector("#mensagens-erro");
22
+    mensagensErro.innerHTML = "";
23
+
24
+});
25
+
26
+function obtemPacienteDoFormulario(form) {
27
+
28
+    var paciente = {
29
+        nome: form.nome.value,
30
+        peso: form.peso.value,
31
+        altura: form.altura.value,
32
+        gordura: form.gordura.value,
33
+        imc: calculaImc(form.peso.value, form.altura.value)
34
+    }
35
+
36
+    return paciente;
37
+}
38
+
39
+function montaTr(paciente) {
40
+    var pacienteTr = document.createElement("tr");
41
+    pacienteTr.classList.add("paciente");
42
+
43
+    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
44
+    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
45
+    pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
46
+    pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
47
+    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));
48
+
49
+    return pacienteTr;
50
+}
51
+
52
+function montaTd(dado, classe) {
53
+    var td = document.createElement("td");
54
+    td.classList.add(classe);
55
+    td.textContent = dado;
56
+
57
+    return td;
58
+}
59
+
60
+function validaPaciente(paciente) {
61
+
62
+    var erros = [];
63
+
64
+    if (paciente.nome.length == 0) {
65
+        erros.push("O nome não pode ser em branco");
66
+    }
67
+
68
+    if (paciente.gordura.length == 0) {
69
+        erros.push("A gordura não pode ser em branco");
70
+    }
71
+
72
+    if (paciente.peso.length == 0) {
73
+        erros.push("O peso não pode ser em branco");
74
+    }
75
+
76
+    if (paciente.altura.length == 0) {
77
+        erros.push("A altura não pode ser em branco");
78
+    }
79
+
80
+    if (!validaPeso(paciente.peso)) {
81
+        erros.push("Peso é inválido");
82
+    }
83
+
84
+    if (!validaAltura(paciente.altura)) {
85
+        erros.push("Altura é inválida");
86
+    }
87
+
88
+    return erros;
89
+}
90
+
91
+function exibeMensagensDeErro(erros) {
92
+    var ul = document.querySelector("#mensagens-erro");
93
+    ul.innerHTML = "";
94
+
95
+    erros.forEach(function(erro) {
96
+        var li = document.createElement("li");
97
+        li.textContent = erro;
98
+        ul.appendChild(li);
99
+    });
100
+}
101
+
102
+function adicionaPacienteNaTabela(paciente) {
103
+    var pacienteTr = montaTr(paciente);
104
+    var tabela = document.querySelector("#tabela-pacientes");
105
+    tabela.appendChild(pacienteTr);
106
+}

+ 12 - 0
Teste/introducao-javascript/js/remover-paciente.js

@@ -0,0 +1,12 @@
1
+var pacientes = document.querySelectorAll(".paciente");
2
+
3
+var tabela = document.querySelector("#tabela-pacientes");
4
+
5
+tabela.addEventListener("dblclick", function(event) {
6
+    event.target.parentNode.classList.add("fadeOut");
7
+
8
+    setTimeout(function() {
9
+        event.target.parentNode.remove();
10
+    }, 500);
11
+
12
+});