Respostas no Fórum
-
Posts
-
body {
background: rgb(70, 142, 236);
font: normal 15pt Arial;
}
header {
color: white;
text-align: center;
}
section {
background: white;
border-radius: 10px;
padding: 15px;
width: 500px;
margin: auto;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.363);
}footer {
color: white;
text-align: center;
font-style: italic;
}function Verificar() {
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] Verifique os dados e tente 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’)
img.setAttribute(‘id’, ‘foto’)
if (fsex[0].checked) {
gênero = ‘Homem’
if (idade >= 0 && idade < 10) {
//Criança
img.setAttribute(‘src’, ‘bebe H.png’)
} else if (idade < 21) {
//Jovem
img.setAttribute(‘src’, ‘menino.png’)
} else if (idade < 50) {
//Adulto
img.setAttribute(‘src’, ‘homem.png’)
} else {
//idoso
img.setAttribute(‘src’, ‘idoso h.png’)
}
} else if (fsex[1].checked) {
gênero = ‘Mulher’
if (idade >= 0 && idade < 10) {
//Criança
img.setAttribute(‘src’, ‘bebe m.png’)
} else if (idade < 21) {
//Jovem
img.setAttribute(‘src’, ‘menina.png’)
} else if (idade < 50) {
//Adulto
img.setAttribute(‘src’, ‘mulher.png’)
} else {
//idoso
img.setAttribute(‘src’, ‘idosa m.png’)
}
}
res.style.textAlign = ‘center’
res.innerHTML =Detectamos ${gênero} com ${idade} anos.
res.appendChild(img)
}
}<!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” />
</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=”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>© CursoemVídeo</p>
</footer>
<script src=”script.js”></script>
</body>
</html>
