eu não achei o link que o instrutor fala que esta nos exercicios eu procurei e não achei!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
eu não achei o link que o instrutor fala que esta nos exercicios eu procurei e não achei!
Oi, Geovane, tudo bem?
O link referente a essa aula está aqui: https://cursos.alura.com.br/course/javascript-programando-na-linguagem-web/task/24430
Espero ter te ajudado!
não o do projeto que tem as barras pra colocar as informações de Aparecida!
é que eu estou precisando desse link pra prosseguir no curso!
Oi, Geovane, tudo bem?
Você está falando da tabela do curso? A que o professor manipula os valores da tebela para calcular o imc? Se for isso, ela está dentro do arquivo index.html, que por sua vez está no link base do projeto. Caso não seja isso, você poderia ser mais específico? O professor menciona o projeto base do curso para dar continuidade aos estudos.
bom sabe aquelas barras que ficam de baixo da tabela de Aparecida? bom é essa que eu estou falando, bom vou te mandar o print pra vc ver que eu cliquei nele e não tem nada aqui, olha só! https://drive.google.com/file/d/1ddod16yfwg9wxMQ2zmeI4aFC7OOVnNNk/view?usp=sharing
Oi, Geovane.
Na descrição dessa aula o instrutor disponibiliza o código, é só clicar abaixo do vídeo, segue o código para adicionar no index.html
<!-- ... -->
<section class="container">
<h2 id="titulo-form">Adicionar novo paciente</h2>
<form>
<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" 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>Espero ter te ajudado!
eu peguei o código que você mandou e colei salvei e recarreguei a pagina e e não aconteceu nada!
<!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">
<h2 class="titulo">Aparecida Nutrição</h2>
</div>
</header>
<main>
<section class="container">
<h2>Meus pacientes</h2>
<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>
</section>
</main>
<section class="container">
<h2 id="titulo-form">Adicionar novo paciente</h2>
<form>
<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" 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>
<script src="js/principal.js" ></script>
</body>
</html>
java script
insira seu código aquivar titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista";
var pacientes = document.querySelectorAll(".paciente");
for (var i = 0; i < pacientes.length; i++) {
var paciente = pacientes[i];
var tdPeso = paciente.querySelector(".info-peso");
var peso = tdPeso.textContent;
var tdAltura = paciente.querySelector(".info-altura");
var altura = tdAltura.textContent;
var tdImc = paciente.querySelector(".info-imc");
var pesoEhValido = true;
var alturaEhValida = true;
if (peso <= 0 || peso >= 1000) {
console.log("Peso inválido!");
pesoEhValido = false;
tdImc.textContent = "Peso inválido";
paciente.classList.add("paciente-invalido");
}
if (altura <= 0 || altura >= 3.00) {
console.log("Altura inválida!");
alturaEhValida = false;
tdImc.textContent = "Altura inválida";
paciente.classList.add("paciente-invalido");
}
if (pesoEhValido && alturaEhValida) {
var imc = peso / (altura * altura);
tdImc.textContent = imc.toFixed(2);
}
}
Oi, Geovane, tudo bem?
O código css do projeto está na página correta? Eu testei aqui e apareceu corretamente o form para entrada de dados. Revise e compare o seu código com o do instrutor.
bom eu não consegui
olha ai o que aparece
*{ 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; }
*{
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;
}
Oi, Geovane.
Seu código está funcionando normalmente. O código javascript que você disponibilizou aqui, ele ainda só veririca se o peso e a altura dos pacientes que estão já inseridos na tabela está dentro da verificação é um peso válido ou uma altura válida.
Se você, por exemplo, mudar o peso do paciente Paulo para 100000 e abrir o console do navegador, verá a mensagem Peso inválido, ou seja, seu código está rodando mas ainda está somente apresentando dentro do console do navegador as mensagens.
meu código deveria estar assim e não está
Oi, Geovane, tudo bem?
Aqui pelo fórum nossa comunicação tá um pouco inviabilizada. Que tal fazermos uma call via Hangouts? Se topar, me fala que marcamos um dia e uma hora para te ajudar com esse problema.
bom depois de 1hr segunda a sábado e se puder domingo, não sei se você pode, depois das 3horas!
Oi, Geovane, tudo bem?
Pode ser amanhã. terça-feira, as 16h?
oi beleza e você? pode ser sim!
vai ser no hangouts?
Lais muito obrigado não precisa mais não eu consegui!