-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
86f3685
commit 17bc3ae
Showing
11 changed files
with
656 additions
and
0 deletions.
There are no files selected for viewing
157 changes: 157 additions & 0 deletions
157
...Ensino Médio/JavaScript/introducao-javascript-inicial/introducao-javascript/css/index.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| *{ | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body{ | ||
| font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| header{ | ||
| background-color: #333; | ||
| height: 3em; | ||
| color: #FFF; | ||
| margin-bottom: 1em; | ||
| } | ||
|
|
||
| header h1{ | ||
| font-size: 2em; | ||
| display:inline-block; | ||
| vertical-align: middle; | ||
| } | ||
| header h2{ | ||
| font-size: 2em; | ||
| display:inline-block; | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| header .container:before{ | ||
| content: ''; | ||
| display:inline-block; | ||
| height: 100%; | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| .container{ | ||
| width: 60%; | ||
| height: 100%; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| section{ | ||
| margin: 2em 0; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| section h2{ | ||
| font-size: 3em; | ||
| display: block; | ||
| padding-bottom: .5em; | ||
| border-bottom: 1px solid #ccc; | ||
| margin-bottom: .5em; | ||
| } | ||
|
|
||
| table{ | ||
| width: 100%; | ||
| margin-bottom : .5em; | ||
| table-layout: fixed; | ||
|
|
||
| } | ||
|
|
||
| td, th { | ||
| padding: .7em; | ||
| margin: 0; | ||
| border: 1px solid #ccc; | ||
| text-align: center; | ||
| } | ||
|
|
||
| th{ | ||
| font-weight: bold; | ||
| background-color: #EEE; | ||
| } | ||
|
|
||
| label{ | ||
| color: #555; | ||
| display: block; | ||
| margin-bottom: .2em; | ||
| } | ||
|
|
||
| .campo{ | ||
| margin: 0; | ||
| padding-bottom: 1em; | ||
| width: 100%; | ||
| border: 1px solid #ccc; | ||
| padding: .7em; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .campo-medio{ | ||
| display: inline-block; | ||
| padding-right: .5em; | ||
| } | ||
|
|
||
| .grupo{ | ||
| width: 32%; | ||
| display: inline-block; | ||
| padding: 10px 0px; | ||
| } | ||
|
|
||
| button{ | ||
| padding: .5em 2em; | ||
| border: 0; | ||
| border-bottom: 3px solid; | ||
| font-size: 1.2em; | ||
| cursor: pointer; | ||
| margin: 0; | ||
| margin-top: -3px; | ||
| color: #fff; | ||
| background-color:#0c8cd3; | ||
| border-color: #04324c; | ||
| width: 20%; | ||
| display: block; | ||
| clear: both; | ||
| margin: 10px 0px; | ||
|
|
||
| } | ||
|
|
||
| button:active{ | ||
| margin-top:0px; | ||
| border: 0; | ||
| } | ||
|
|
||
| button[disabled=disabled], button:disabled { | ||
| background-color: gray; | ||
| border-color: darkgray; | ||
|
|
||
| } | ||
|
|
||
| .adicionar-paciente{ | ||
| margin-top: 30px; | ||
| } | ||
|
|
||
| .campo-invalido{ | ||
| border: 1px solid red; | ||
| } | ||
|
|
||
| .paciente-invalido { | ||
| background-color: lightcoral | ||
| } | ||
|
|
||
| #mensagem-erro { | ||
| color: red; | ||
| } | ||
|
|
||
| .fadeOut { | ||
| opacity: 0; | ||
| transition: 0.5s; | ||
| } | ||
|
|
||
| #filtrar-tabela { | ||
| width: 200px; | ||
| height: 35px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .invisivel { | ||
| display: none; | ||
| } |
48 changes: 48 additions & 0 deletions
48
...Ensino Médio/JavaScript/introducao-javascript-inicial/introducao-javascript/css/reset.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /* http://meyerweb.com/eric/tools/css/reset/ | ||
| v2.0 | 20110126 | ||
| License: none (public domain) | ||
| */ | ||
|
|
||
| html, body, div, span, applet, object, iframe, | ||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
| a, abbr, acronym, address, big, cite, code, | ||
| del, dfn, em, img, ins, kbd, q, s, samp, | ||
| small, strike, strong, sub, sup, tt, var, | ||
| b, u, i, center, | ||
| dl, dt, dd, ol, ul, li, | ||
| fieldset, form, label, legend, | ||
| table, caption, tbody, tfoot, thead, tr, th, td, | ||
| article, aside, canvas, details, embed, | ||
| figure, figcaption, footer, header, hgroup, | ||
| menu, nav, output, ruby, section, summary, | ||
| time, mark, audio, video { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| font: inherit; | ||
| vertical-align: baseline; | ||
| } | ||
| /* HTML5 display-role reset for older browsers */ | ||
| article, aside, details, figcaption, figure, | ||
| footer, header, hgroup, menu, nav, section { | ||
| display: block; | ||
| } | ||
| body { | ||
| line-height: 1; | ||
| } | ||
| ol, ul { | ||
| list-style: none; | ||
| } | ||
| blockquote, q { | ||
| quotes: none; | ||
| } | ||
| blockquote:before, blockquote:after, | ||
| q:before, q:after { | ||
| content: ''; | ||
| content: none; | ||
| } | ||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } |
Binary file added
BIN
+1.12 KB
...o Ensino Médio/JavaScript/introducao-javascript-inicial/introducao-javascript/favicon.ico
Binary file not shown.
109 changes: 109 additions & 0 deletions
109
...do Ensino Médio/JavaScript/introducao-javascript-inicial/introducao-javascript/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="pt-br"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Aparecida Nutrição</title> | ||
| <link rel="icon" href="favicon.ico" type="image/x-icon"> | ||
| <link rel="stylesheet" type="text/css" href="css/reset.css"> | ||
| <link rel="stylesheet" type="text/css" href="css/index.css"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <div class="container"> | ||
| <h1>Aparecida Nutrição</h1> | ||
| </div> | ||
| </header> | ||
| <main> | ||
|
|
||
| </main> | ||
| <section class="container"> | ||
| <h2>Meus pacientes</h2> | ||
| <label for="filtrar-tabela">Filtre:</label> | ||
| <input type="text" name="filtro" id="filtrar-tabela" placeholder="Digite o nome do paciente"> | ||
|
|
||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Nome</th> | ||
| <th>Peso(kg)</th> | ||
| <th>Altura(m)</th> | ||
| <th>Gordura Corporal(%)</th> | ||
| <th>IMC</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody id="tabela-pacientes"> | ||
| <tr class="paciente" id="primeiro-paciente"> | ||
| <td class="info-nome">Paulo</td> | ||
| <td class="info-peso">100</td> | ||
| <td class="info-altura">2.00</td> | ||
| <td class="info-gordura">10</td> | ||
| <td class="info-imc">0</td> | ||
| </tr> | ||
| <tr class="paciente"> | ||
| <td class="info-nome">João</td> | ||
| <td class="info-peso">80</td> | ||
| <td class="info-altura">1.72</td> | ||
| <td class="info-gordura">40</td> | ||
| <td class="info-imc">0</td> | ||
| </tr> | ||
| <tr class="paciente"> | ||
| <td class="info-nome">Erica</td> | ||
| <td class="info-peso">54</td> | ||
| <td class="info-altura">1.64</td> | ||
| <td class="info-gordura">14</td> | ||
| <td class="info-imc">0</td> | ||
| </tr> | ||
| <tr class="paciente"> | ||
| <td class="info-nome">Douglas</td> | ||
| <td class="info-peso">85</td> | ||
| <td class="info-altura">1.73</td> | ||
| <td class="info-gordura">24</td> | ||
| <td class="info-imc">0</td> | ||
| </tr> | ||
| <tr class="paciente"> | ||
| <td class="info-nome">Tatiana</td> | ||
| <td class="info-peso">46</td> | ||
| <td class="info-altura">1.55</td> | ||
| <td class="info-gordura">19</td> | ||
| <td class="info-imc">0</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <span id="erro-ajax" class="invisivel">Erro ao buscar os pacientes</span> | ||
| <button id="buscar-pacientes" class="botao bto-principal">Buscar Paciente</button> | ||
| </section> | ||
| </main> | ||
|
|
||
| <section class="container"> | ||
| <h2 id="titulo-form">Adicionar novo paciente</h2> | ||
| <ul id="mensagem-erro"></ul> | ||
| <form id="form-adicionar"> | ||
| <div class="grupo"> | ||
| <label for="nome">Nome:</label> | ||
| <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo"> | ||
| </div> | ||
| <div class="grupo"> | ||
| <label for="peso">Peso:</label> | ||
| <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio"> | ||
| </div> | ||
| <div class="grupo"> | ||
| <label for="altura">Altura:</label> | ||
| <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio"> | ||
| </div> | ||
| <div class="grupo"> | ||
| <label for="gordura">% de Gordura:</label> | ||
| <input id="gordura" name="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio"> | ||
| </div> | ||
|
|
||
| <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button> | ||
| </form> | ||
| </section> | ||
|
|
||
| <!-- Importação dos Javascripts AQUI --> | ||
| <script src="js/calcula-imc.js"></script> | ||
| <script src="js/filtra.js" ></script> | ||
| <script src="js/form.js"></script> | ||
| <script src="js/remover-paciente.js"></script> | ||
| <script src="js/buscar-paciente.js"></script> | ||
| </body> | ||
| </html> |
25 changes: 25 additions & 0 deletions
25
...édio/JavaScript/introducao-javascript-inicial/introducao-javascript/js/buscar-paciente.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| var botaoAdicionar = document.querySelector("#buscar-pacientes"); | ||
|
|
||
| botaoAdicionar.addEventListener("click", function() { | ||
| var xhr = new XMLHttpRequest(); | ||
| console.log("Buscando pacientes..."); | ||
|
|
||
| xhr.open("GET", "https://api-pacientes.herokuapp.com/pacientes"); | ||
|
|
||
| xhr.addEventListener("load", function() { | ||
| var erroAjax = document.querySelector("#erro-ajax"); | ||
|
|
||
| if (xhr.status == 200) { | ||
| var resposta = xhr.responseText; | ||
| var pacientes = JSON.parse(resposta); | ||
|
|
||
| pacientes.forEach(function(paciente) { | ||
| adicionaPacientesNaTabela(paciente); | ||
| }); | ||
| } else { | ||
| erroAjax.classList.remove("invisivel"); | ||
| } | ||
| }); | ||
|
|
||
| xhr.send(); | ||
| }); |
Oops, something went wrong.