Descrição do exercício
Crie um programa que leia o sexo e a idade de várias pessoas. O programa vai
perguntar se o usuário quer continuar ou não a cada pessoa. No final, mostre:
a) qual é a maior idade lida
b) quantos homens foram cadastrados
c) qual é a idade da mulher mais jovem
d) qual é a média de idade entre os homens
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>Cadastro de pessoas</h1>
<p>Digite o número "0" no campo "Sexo" e "Idade" para finalizar o cadastro.</p>
<p>Digite: "F" para "Sexo feminino" | "M" para "Sexo masculino"</p>
<p>Sexo: <input type="text" name="sexo" id="sexo"></p>
<p>Idade: <input type="number" name="idade" id="idade"></p>
<button onclick="adicionar()" class="btnAdicionar">Adicionar</button>
<br>
<button onclick="cadastrar()" class="btnCadastrar">Cadastrar mais pessoas</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;
}
.btnCadastrar {
display: none;
}Resolução do exercício em JavaScript
const inputSexo = document.getElementById('sexo')
const inputIdade = document.getElementById('idade')
// Atalho para adicionar valores pressionando o 'ENTER'
inputIdade.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
adicionar()
}
})
const btnAdicionar = document.querySelector('button.btnAdicionar')
const btnCadastrar = document.querySelector('button.btnCadastrar')
const resposta = document.querySelector('div.resposta')
// Arrays para armazenar o sexo e a idade
let listaSexo = []
let listaIdade = []
// Variável para sinalizar FLAG
let parar = false
let quantidadeHomens = 0
let somaIdadeHomens = 0
let idadeMediaHomens = 0
function adicionar() {
const sexo = inputSexo.value
const idade = Number(inputIdade.value)
if (sexo.trim() === '' || sexo !== 'F' && sexo !== 'f' && sexo !== 'M' && sexo !== 'm' && sexo !== '0') {
alert('Digite "F" para "Sexo feminino" | "M" para "Sexo masculino"')
inputSexo.value = ''
inputSexo.focus()
return
}
if (isNaN(idade) || idade < 0) {
alert('Insira uma idade válida.')
inputIdade.value = ''
inputIdade.focus()
return
}
if (sexo === '0') {
parar = true
inputSexo.disabled = true
inputIdade.disabled = true
btnAdicionar.style.display = 'none'
btnCadastrar.style.display = 'inline-block'
}
if (!parar) {
// Adiciona os valores no fim dos arrays
listaSexo.push(sexo)
listaIdade.push(idade)
resposta.innerHTML = `
<p>Sexo adicionado: ${listaSexo.join(' | ')}</p>
<p>Idade adicionada: ${listaIdade.join(' | ')}</p>
`
if (sexo == 'M' || sexo == 'm') {
quantidadeHomens += 1
somaIdadeHomens += idade
idadeMediaHomens = somaIdadeHomens / quantidadeHomens
}
} else {
// A variável abaixo vai receber o primeiro valor digitado pelo usuário, ou seja, o primeiro valor é a maior e a menor idade inserida no primeiro cadastro
let maiorIdade = listaIdade[0]
// Por isso, este contador começa a partir do índice 1, pois ele irá fazer as novas análises tendo ele como ponto de partida
for (let contador = 1; contador < listaIdade.length; contador++) {
if (listaIdade[contador] > maiorIdade) {
maiorIdade = listaIdade[contador]
}
}
// Inicializa com null, ou seja, nenhum valor definido ainda. Isso permite identificar depois se nenhuma mulher foi cadastrada (útil para evitar erros).
let mulherMaisJovem = null
for (let contador = 0; contador < listaIdade.length; contador++) {
// toLowerCase() transforma F ou f em minúsculo, garantindo que funcione com qualquer uma das duas letras.
if (listaSexo[contador].toLowerCase() === 'f') {
if (mulherMaisJovem === null || listaIdade[contador] < mulherMaisJovem) {
mulherMaisJovem = listaIdade[contador]
}
}
}
resposta.innerHTML += `
<h2>Informações do cadastro:</h2>
<p>Maior idade: ${maiorIdade}</p>
<p>Quantidade de homens: ${quantidadeHomens}</p>
<p>Idade média dos homens: ${idadeMediaHomens.toFixed(1)}</p>
<p>Idade da mulher mais jovem: ${mulherMaisJovem ?? 'Nenhuma mulher cadastrada'}</p>
`
}
inputSexo.value = ''
inputIdade.value = ''
inputSexo.focus()
}
function cadastrar() {
// Limpa os valores dos arrays abaixo
listaSexo.length = 0
listaIdade.length = 0
// Reseta o valor de FLAG
parar = false
inputSexo.disabled = false
inputIdade.disabled = false
inputSexo.value = ''
inputIdade.value = ''
inputSexo.focus()
resposta.innerHTML = ''
maiorIdade = 0
quantidadeHomens = 0
somaIdadeHomens = 0
idadeMediaHomens = 0
mulherMaisJovem = 0
btnAdicionar.style.display = 'inline-block'
btnCadastrar.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!
