- Este tópico contém 11 respostas, 3 vozes e foi atualizado pela última vez 7 meses, 1 semana atrás por
.
-
Posts
-
-
-
-
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)}
} -
Boa tarde Everton,
Vamos por partes.
O atributo de centralização seria otextAlign. 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; } -
-
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> -
`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> -
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> -
-
-
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?
-
-
-
- Você deve fazer login para responder a este tópico.