Respostas no Fórum
-
Posts
-
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>© 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) } }Olá, Jessica!
Segue como fica no computador https://streamable.com/6yocgv. O efeito parallax funciona no navegador no computador, mas no celular não.Segue o projeto no github https://dinodv.github.io/projeto-cordel/
Quase dois anos depois desse post e eu vim aqui buscar sobre a mesma coisa!
A página no computador o efeito parallax funciona normal, porém, quando abro a página pelo celular o efeito não funciona.
Segue o link do vídeo onde gravo minha tela do celular para melhor visualização sobre a questão: https://streamable.com/9q7f9r (infelizmente o link fica válido somente por dois dias, não sei se dará tempo de ter retorno)
