JavaScript 12 – Exercícios (Parte 3)

Marcado: javascript, javascript12, parte3

Este tópico contém 17 respostas, 7 vozes e foi atualizado pela última vez 3 meses, 1 semana atrás por Tutora Jessica.

Visualizando 13 respostas da discussão

Autor

Posts
- 1 de junho de 2022 às 17:27 #123610
  
  Everton Cerqueira
  Participante
  
  Olá, tudo bem? Estou com um probleminha na hora de centralizar a minha mensagem pelo JavaScript.
  A minha frase não fica centralizada e não fica acima da imagem:
  
  res.style.txtAlign=’center’;
  res.innerHTML=Detectamos ${gênero} com ${idade} anos
  res.appendChild(img)
- 1 de junho de 2022 às 17:27 #94606
  Guilherme Santos Moreira
  Participante
  Boa Tarde estou com problema na aula ele não executa o comando quando coloco o fano.value.length == 0, já quando tiro o lenght ele executa mas ignora o o if e sempre cai o else, mandar print e video do erro pra ver se entendam melhor segue o codigo HTML e JS
  
  Link para o video mostrando erro
  
  HTML
```
<!DOCTYPE html>
<html lang="pt=BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verificador de Idade</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <header>
        <h1>Verificador de Idade</h1>

    </header>
    <section>
        <div>
           <p>Ano Nascimento:
                <input type="number" name="txtano" id="0">
            </p>
            <p>Sexo:
                <input type="radio" name="radsex" id="mas" checked>
                <label for="mas">Masculino</label>
                <input type="radio" name="radsex" id="fem">
                <label for="fem">Feminino</label>
            </p>
            <p>
                <input type="button" value="Verificar" onclick="verificar()">
            </p>
        </div>

        <div id="res">
           Preencha os dados acima para ver o resultado

        </div>
    </section>
    <footer>
        <p>&copy; Infinity Education </p>

    </footer>
    
</body>
</html>
```
  JS
  
  `function verificar(){
  var data = new Date()
  var ano = data.getFullYear()
  var fano = window.document.querySelector(‘div#res’)
  var res = window.document.querySelector(‘div#res’)
  
  if (fano.value.length == 0 || fano.value > ano ){
  window.alert(‘Verifique os dados e tente novamente’)
  }else {
  window.alert(‘TUDO OK’)
  }
  }
- 20 de junho de 2022 às 15:49 #96050
  Tutora Tainá
  Mestre
  Guilherme, pedimos desculpas na demora da resposta.
  
  Você poderia nos explicar o que está ocorrendo com o seu código? Se possível, nos mande um print do erro na aba Ajuda com o link da sua dúvida.
  
  Você já tentou usar o console do navegador pra tentar identificar o erro?
  - Esta resposta foi modificada 2 anos, 5 meses atrás por Tutora Tainá.
- 20 de junho de 2022 às 17:34 #96055
  
  Felipe Medina Marques
  Participante
  
  Guilherme, boa tarde…
  
  Verifique esse trecho do código:
  
  var fano = window.document.querySelector(‘div#res’)
  
  essa variável deve receber o elemento do txtano da Div anterior. Essa parte fica desse jeito:
  
  var fano = document.getElementById(‘txtano’)
  
  obs:
  cuidado com essa crase aqui:
  >>>> `function verificar(){
  não sei se foi um erro ao copiar mas apenas informando aqui, para ajudar.
  
  Abraço!!!
- 22 de junho de 2022 às 15:58 #96172
  
  Tutora Jessica
  Moderador
  
  Olá Guilherme , como foi dito pelo Felipe Medina, precisa fazer somente a substituição do elemento "div#res" por "txtano" na variável fano;
  
  Encontrei algumas partes do seu código que precisam ser verificadas, em alguns trechos
  No HTML :
  
  <input type="number" name="txtano" id="0">
  
  precisamos substituir o id=”0″ para id=”txtano” e incluir o min=”0″, da seguinte forma:
  
  <input type="number" name="txtano" id="txtano" min="0">
  
  E nessa parte do JS:
  
  if (fano.value.length == 0 || fano.value > ano ){
  
  Faltaram algumas informações, dê uma olhadinha novamente no vídeo dessa aula, você vai tirar de letra !!
  
  Ficamos felizes pela interação dos alunos!!
  Se puder nos envie um feedback se foi resolvido ou não..
  Caso fique alguma dúvida só retornar ao fórum, beleza?
  Felipe te agradecemos muito pela interação, continue assim.
  Bons estudos meninos 🙂
- 19 de setembro de 2023 às 16:02 #123621
  
  Tutora Jessica
  Moderador
  
  Ola Everton, nos envie seu código por completo por favor, mas lembre de enviar formatado, para isso cole seu código aqui, selecione por completo e clique em CODE.
  Ah, no fórum também tem outras dúvidas sobre esse mesmo exercício , caso queira dar uma olhada. 🖖🏼
- 19 de setembro de 2023 às 18:36 #123630
  
  Everton Cerqueira
  Participante
  
  Segue o código completo como solicitado.
  
  function verificar() {
  //window.alert(‘funcionou’) somente para testar o código aos poucos para ver se vai dar erro
  var data = new Date()
  var ano = data.getFullYear()
  var fano = document.getElementById(‘txtano’)
  var res = document.querySelector(‘div#res’)
  if (fano.value.length == 0 || Number(fano.value)> ano) {
  window.alert([ERRO] Verificar os dados e tentar novamente!)
  }else{
  var fsex = document.getElementsByName(‘radsex’)
  var idade = ano – Number(fano.value)
  var gênero = ”
  var img = document.createElement(‘img’)
  img.setAttribute(‘id’,’foto’)
  if (fsex[0].checked) {
  gênero=’Homem’
  if (idade >= 0 && idade < 10) {
  //Criança
  img.setAttribute(‘src’, ‘foto-bebe-m.png’)
  }else if (idade < 21) {
  //Jovem
  img.setAttribute(‘src’, ‘foto-jovem-m.png’)
  }else if (idade < 50) {
  // Adulto
  img.setAttribute(‘src’,’foto-adulto-m.png’)
  }else{
  //Idoso
  img.setAttribute(‘src’,’foto-idoso-m.png’)
  }
  }else if (fsex[1].checked) {
  gênero=’Mulher’
  if (idade >=0 && idade < 10) {
  //Criança
  img.setAttribute(‘src’,’foto-bebe-f.png’)
  }else if (idade < 21) {
  //Jovem
  img.setAttribute(‘src’,’foto-jovem-f.png’)
  }else if (idade < 50) {
  //Adulto
  img.setAttribute(‘src’, ‘foto-adulto-f.png’)
  }else{
  //Idoso
  img.setAttribute(‘src’,’foto-idoso-f.png’)
  }
  }
  res.style.txtAlign=’center’;
  res.innerHTML=Detectamos ${gênero} com ${idade} anos
  res.appendChild(img)
  
  }
  }
- 20 de setembro de 2023 às 14:21 #123676
  IcaroFilho
  Moderador
  Boa tarde Everton,
  Vamos por partes.
  O atributo de centralização seria o textAlign. Você esqueceu o e do text.
  Lembrando que o container deve estar ocupando uma largura maior que o texto para que tenha um resultado visual.
  
  Agora quanto a imagem. poderia fornecer o código html ?
  
  Vou montar um aqui um exemplo para você:
  
  // HTML
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    
    <h1 id="header"></h1>
    <img id="image"/>

    <script src="src/script.js"></script>
  </body>
</html>
```
  // JAVASCRIPT
```
const message = 'Hello world' 
// texto
const h1 = document.querySelector('#header')
h1.style.width = '100%'
h1.style.textAlign = 'center'
h1.innerHTML = message
// imagem
const imageUrl = 'https://img.freepik.com/vetores-premium/hello-world-e-uma-palavra-simples-para-a-primeira-programacao-do-programador_48644-298.jpg?w=996'

const image = document.querySelector("#image")
image.src = imageUrl
```
  // CSS
```
body {
  background: transparent; 
  color: #fcbe24;
  padding: 0 24px;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
```
  - 20 de setembro de 2023 às 16:56 #123685
    
    Everton Cerqueira
    Participante
    
    Nossa! Um pequeno detalhe, uma letra. Muito obrigado!
- 20 de setembro de 2023 às 17:00 #123686
  
  Everton Cerqueira
  Participante
  
  Segue o código HTML como solicitado.
  O texto consegui centralizar, só não consegui colocar acima da imagem como Guanabara fez.
  
  <!DOCTYPE html>
  <html lang=”pt-br”>
  <head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <title>Verificador de Idade</title>
  <link rel=”stylesheet” href=”stilo.css”>
  </head>
  <body>
  <header>
  <h1>Verificador de Idade</h1>
  </header>
  <section>
  <div>
  <p>Ano de Nascimento:
  <input type=”number” name=”txtano” id=”txtano” min=”0″>
  </p>
  <p>
  Sexo:
  <input type=”radio” name=”radsex” id=”masc” checked>
  <label for=”masc”>Masculino</label>
  <input type=”radio” name=”radsex” id=”fem”>
  <label for=”fem”>Feminino</label>
  </p>
  <p>
  <input type=”button” value=”Verificar” onclick=”verificar()”>
  </p>
  </div>
  <div id=”res”>
  Preencha os dados acima para ver o resultado!
  </div>
  </section>
  <footer>
  <p>©CursoemVideo</p>
  </footer>
  <script src=”script.js”></script>
  </body>
  </html>
- 21 de setembro de 2023 às 15:38 #123736
  
  Everton Cerqueira
  Participante
  
  `Segue o código HTML como solicitado.
  O texto consegui centralizar, só não consegui colocar acima da imagem como Guanabara fez.
  Poderiam me informar onde errei ?
  
  <!DOCTYPE html>
  <html lang=”pt-br”>
  <head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <title>Verificador de Idade</title>
  <link rel=”stylesheet” href=”stilo.css”>
  </head>
  <body>
  <header>
  <h1>Verificador de Idade</h1>
  </header>
  <section>
  <div>
  <p>Ano de Nascimento:
  <input type=”number” name=”txtano” id=”txtano” min=”0″>
  </p>
  <p>
  Sexo:
  <input type=”radio” name=”radsex” id=”masc” checked>
  <label for=”masc”>Masculino</label>
  <input type=”radio” name=”radsex” id=”fem”>
  <label for=”fem”>Feminino</label>
  </p>
  <p>
  <input type=”button” value=”Verificar” onclick=”verificar()”>
  </p>
  </div>
  <div id=”res”>
  Preencha os dados acima para ver o resultado!
  </div>
  </section>
  <footer>
  <p>©CursoemVideo</p>
  </footer>
  <script src=”script.js”></script>
  </body>
  </html>
- 25 de setembro de 2023 às 14:44 #123879
  
  Everton Cerqueira
  Participante
  
  Olá, vocês poderiam me ajudar? O texto consegui centralizar, só não consegui colocar acima da imagem como Guanabara fez.
  Poderiam me informar onde errei? Segue o código:
  
  <!DOCTYPE html>
  <html lang=”pt-br”>
  <head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <title>Verificador de Idade</title>
  <link rel=”stylesheet” href=”stilo.css”>
  </head>
  <body>
  <header>
  <h1>Verificador de Idade</h1>
  </header>
  <section>
  <div>
  <p>Ano de Nascimento:
  <input type=”number” name=”txtano” id=”txtano” min=”0″>
  </p>
  <p>
  Sexo:
  <input type=”radio” name=”radsex” id=”masc” checked>
  <label for=”masc”>Masculino</label>
  <input type=”radio” name=”radsex” id=”fem”>
  <label for=”fem”>Feminino</label>
  </p>
  <p>
  <input type=”button” value=”Verificar” onclick=”verificar()”>
  </p>
  </div>
  <div id=”res”>
  Preencha os dados acima para ver o resultado!
  </div>
  </section>
  <footer>
  <p>©CursoemVideo</p>
  </footer>
  <script src=”script.js”></script>
  </body>
  </html>
- 28 de setembro de 2023 às 16:01 #124036
  
  Tutora Jessica
  Moderador
  
  Ola Everton, nos desculpe a demora, conseguiu concluir seu exercício?
  - 30 de setembro de 2023 às 09:30 #124117
    
    Everton Cerqueira
    Participante
    
    Olá, Jessica! Consegui concluir o exercício, só não consegui colocar o texto acima da imagem como Guanabara fez.
    Queria saber onde errei.
  - 2 de outubro de 2023 às 16:27 #124225
    
    Tutora Jessica
    Moderador
    
    Ola Everton, se você seguiu todo o passo a passo do curso esta tudo correto como o Icaro falou acima, o que pode ocorrer as vezes é que a versão que você baixou de algum programa pode não ser mais compatível com a função colocada no código, você já consegui passar desse exercício e mesmo assim não centralizou?
- 4 de outubro de 2023 às 14:39 #124333
  
  Everton Cerqueira
  Participante
  
  Olá, Jessica! Exatamente, consegui passar desse exercício e mesmo assim não centralizou. Desde já agradeço a atenção.
- 18 de agosto de 2024 às 11:56 #141772
  dinomanu
  Participante
  Estou com uma duvida por aqui: aparentemente o codigo roda normalmente, porem, quando coloco o “res.style.textAlign = ‘center'” indicado pelo professor, nada acontece. Meu texto e foto nao centralizam e, meu texto esta aparecendo abaixo da foto e nao acima como proposto. Se alterado no CSS pelo ‘text-align: center;’ chamando a div pelo ID o paragrafo centraliza, porem quando a imagem ‘e gerada ele desconfigura novamente. Envio abaixo o codigo:
  
  HTML
```
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Verificador de Idade</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Verificador de Idade</h1>
    </header>
    <section>
        <div>
            <p>Ano de Nascimento
                <input type="number" name="txtano" id="txtano" min="0">
            </p>
            <p>Gênero: 
                <input type="radio" name="radsex" id="masc" checked>
                <label for="masc">Masculino</label>
                <input type="radio" name="radsex" id="fem">
                <label for="fem">Feminino</label>
            </p>
            <p>
                <input type="button" value="Verificar" onclick="verificar()">
            </p>
        </div>
        <div id="res">
            Preencha os dados acima para ver o resultado!
        </div>
    </section>
    <footer>
        <p>&copy; CursoemVideo</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>
```
  JavaScript:
```
function verificar() {
    var data = new Date()
    var ano = data.getFullYear()
    var fano = document.getElementById('txtano')
    var res = document.getElementById('res')
    if (fano.value.length == 0 || Number(fano.value) > ano) {
        window.alert('[ERRO] Verifique os dados e tente novamente!')
    } else {
        var fsex = document.getElementsByName('radsex')
        var idade = ano - Number(fano.value)
        var genero = ''
        var img = document.createElement('img')
        img.setAttribute('id', 'foto')
        if (fsex[0].checked) {
            genero = 'Homem'
            if (idade >= 0 && idade < 10) {
                // criança
                img.setAttribute('src', 'foto-bebe-m.png')
            } else if (idade < 21) {
                //jovem 
                img.setAttribute('src', 'foto-jovem-m.png')
            } else if (idade < 50) {
                // adulto
                img.setAttribute('src', 'foto-adulto-m.png')
            } else {
                // idoso
                img.setAttribute('src', 'foto-idoso-m.png')
            }
        } else if (fsex[1].checked) {
            genero = 'Mulher'
            if (idade >= 0 && idade < 10) {
                // criança
                img.setAttribute('src', 'foto-bebe-f.png')
            } else if (idade < 21) {
                // jovem
                img.setAttribute('src','foto-jovem-f.png')
            } else if (idade < 50) {
                // adulto
                img.setAttribute('src','foto-adulto-f.png')
            } else  {
                // idoso
                img.setAttribute('src','foto-idoso-f.png')
            }
        }
        res.innerHTML = <code>Detectamos ${genero} com ${idade} anos.</code>
        res.appendChild(img)
    }
}
```
  - Esta resposta foi modificada 3 meses, 1 semana atrás por dinomanu.
  - Esta resposta foi modificada 3 meses, 1 semana atrás por Tutora Jessica.
  - 19 de agosto de 2024 às 10:11 #141826
    
    Tutora Jessica
    Moderador
    
    Ola Dinomanu, trouxe a sua dúvida para um tópico já existente no fórum do mesmo exercício.
    Acima você encontra algumas boas explicações para resolver o seu problema, peço para que leia com atenção os itens acima, mas caso não consiga resolver retorne ao fórum que vamos tentar lhe ajudar da melhor forma. 🖖🏼
Autor

Posts

Visualizando 13 respostas da discussão

Você deve fazer login para responder a este tópico.

JavaScript 12 – Exercícios (Parte 3)

QUER UM SITE IGUAL A ESTE? ACESSE HOSTNET INTERNET