Почетна Преглед Помоћ
Регистрација Пријавите Се
Christian
/
Teste
Прати 1
Волим 0
Креирај огранак 0
Files Дискусије 0 Захтеви за спајање 0 Комити 5 Издања 0 Вики
Преглед изворни кода

criacao do teste

Christian Matheus Batista Macedo пре 6 година
комит
802b3cb8d8
10 измењених фајлова са 550 додато и 0 уклоњено
Подељен поглед Покажи статистику Diff
  1. BIN
      .DS_Store
  2. 157 0
      Teste/introducao-javascript/css/index.css
  3. 48 0
      Teste/introducao-javascript/css/reset.css
  4. BIN
      Teste/introducao-javascript/favicon.ico
  5. 113 0
      Teste/introducao-javascript/index.html
  6. 25 0
      Teste/introducao-javascript/js/buscar-pacientes.js
  7. 64 0
      Teste/introducao-javascript/js/calcula-imc.js
  8. 25 0
      Teste/introducao-javascript/js/filtra.js
  9. 106 0
      Teste/introducao-javascript/js/form.js
  10. 12 0
      Teste/introducao-javascript/js/remover-paciente.js

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
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 
+});