Descrição do exercício
Faça um programa que leia a idade e o sexo de 5 pessoas, mostrando no final:
a) Quantos homens foram cadastrados
b) Quantas mulheres foram cadastradas
c) A média de idade do grupo
d) A média de idade dos homens
e) Quantas mulheres tem mais de 20 anos
Explicação de como funciona
Para você visualizar o exercício funcionando no seu navegador, peço que siga os seguintes passos:
1 – Crie uma pasta no Visual Studio Code, você pode chamá-la de “exercicio-numero-aqui”.
2 – Crie 3 arquivos dentro dessa pasta, um vai ser para o código HTML, CSS e outro para JavaScript. Os nomes que dei para os meus arquivos foram:
- texto.html
- estilo.css
- codigo.js
3 – Depois de criar os 3 arquivos, basta copiar os códigos abaixo para ver funcionando no seu navegador.
Estrutura da página em HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercício de logica de programação</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<section class="design-section">
<h1>Analisador de idade e sexo</h1>
<p>Cadastre 5 pessoas abaixo:</p>
<p>Idade: <input type="number" name="idade" id="idade"> anos</p>
<p>Digite o número:</p>
<p>1 para "Sexo feminino" | 2 para "Sexo masculino"</p>
<p>Sexo: <input type="number" name="sexo" id="sexo"></p>
<button onclick="adicionar()">Adicionar</button>
<br>
<button onclick="analisar()">Analisar</button>
<br>
<button onclick="limpar()" class="btnLimpar">Limpar</button>
<div class="resposta"></div>
</section>
<script src="./codigo.js"></script>
</body>
</html>Estilização da página em CSS
* {
box-sizing: border-box;
}
body {
background: #F8F9FA;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.design-section {
width: 50%;
border: 1px solid #d2d2d2;
border-radius: 10px;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
input[type="button"] {
background: #F8F9FA;
border-radius: 50px;
border: 1px solid;
padding: 10px;
cursor: pointer;
}
input[type="number"] {
background: #F8F9FA;
border-radius: 50px;
border: 1px solid;
padding: 5px;
}
input[type="text"] {
background: #F8F9FA;
border-radius: 50px;
border: 1px solid;
padding: 5px;
}
button {
background: #F8F9FA;
border-radius: 50px;
border: 1px solid;
padding: 10px;
cursor: pointer;
}
.btnLimpar {
display: none;
}Resolução do exercício em JavaScript
const inputIdade = document.getElementById('idade')
const inputSexo = document.getElementById('sexo')
// Atalho: permitir Enter para adicionar
inputSexo.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
adicionar()
}
})
const btnLimpar = document.querySelector('button.btnLimpar')
const resposta = document.querySelector('div.resposta')
// Arrays para armazenar a idade e sexo
let listaIdades = []
let listaSexo = []
function adicionar() {
let idade = Number(inputIdade.value)
let sexo = Number(inputSexo.value)
if (isNaN(idade) || isNaN(sexo) || idade <= 0) {
alert('Insira números válidos.')
inputIdade.value = ''
inputIdade.focus()
return
}
if (sexo <= 0 || sexo >= 3) {
alert('Utilize: 1 - Sexo feminino | 2 - Sexo masculino')
inputSexo.value = ''
inputSexo.focus()
return
}
if (listaIdades.length >= 5 || listaSexo.length >= 5) {
alert('Você já adicionou 5 pessoas. Clique em "Analisar."')
return
}
// O "push()" adiciona os valores digitados ao final dos arrays
listaIdades.push(idade)
listaSexo.push(sexo)
resposta.innerHTML = `<p>Idade: ${listaIdades.join(' , ')}</p>
<p>Sexo: ${listaSexo.join(' , ')}</p>
`
inputIdade.value = ''
inputSexo.value = ''
inputIdade.focus()
}
function analisar() {
if (listaIdades.length < 5 || listaSexo.length < 5) {
alert('Primeiro adicione 5 pessoas para ver o resultado.')
return
}
let somaIdadeGrupo = 0
let quantidadeHomens = 0
let somaIdadeHomens = 0
let quantidadeMulheres = 0
let mulheresMais20 = 0
for (let contador = 0; contador < listaIdades.length; contador++) {
somaIdadeGrupo = somaIdadeGrupo + listaIdades[contador]
if (listaSexo[contador] === 1) {
quantidadeMulheres++ // quantidadeMulheres = quantidadeMulheres + 1
if (listaIdades[contador] > 20) {
mulheresMais20 = mulheresMais20 + 1
}
}
if (listaSexo[contador] === 2) {
quantidadeHomens++ // quantidadeHomens = quantidadeHomens + 1
somaIdadeHomens = somaIdadeHomens + listaIdades[contador]
}
}
let mediaIdadeGrupo = (somaIdadeGrupo / listaIdades.length).toFixed(1)
let mediaIdadeHomens = (somaIdadeHomens / quantidadeHomens).toFixed(1)
resposta.innerHTML = `<p>Idade média do grupo: ${mediaIdadeGrupo}</p>
<p>Mulheres: ${quantidadeMulheres} | Mulheres com +20 anos: ${mulheresMais20}</p>
<p>Homens: ${quantidadeHomens} | Idade média dos homens: ${mediaIdadeHomens}</p>`
// Mostra o botão "Limpar"
btnLimpar.style.display = 'inline-block'
}
function limpar() {
// Limpa o valores adicionados nos arrays
listaIdades.length = 0
listaSexo.length = 0
resposta.innerHTML = ''
inputIdade.value = ''
inputSexo.value = ''
inputIdade.focus()
// Esconde o botão "Limpar"
btnLimpar.style.display = 'none'
}Participe do Desafio de JavaScript
Este exercício faz parte do Desafio de JavaScript, um desafio composto por 100 exercícios para praticar lógica de programação com JavaScript.
Além disso, você poderá participar da nossa comunidade, tirando suas dúvidas, fazendo networking e aprendendo muito!
Caso tenha interesse em participar, basta clicar aqui neste link para saber mais detalhes!
