Descrição do exercício
Desenvolva um algoritmo que leia o nome, a idade e o sexo de várias pessoas.
O programa vai perguntar se o usuário quer ou não continuar. No final, mostre:
a) O nome da pessoa mais velha
b) O nome da mulher mais jovem
c) A média de idade do grupo
d) Quantos homens tem mais de 30 anos
e) Quantas mulheres tem menos de 18 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>Cadastro de pessoas</h1>
<p>Digite o número "0" nos campos "Nome", "Sexo" e "Idade" para finalizar o cadastro.</p>
<p>Nome: <input type="text" name="nome" id="nome"></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 inputNome = document.getElementById('nome')
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 as informações
let listaNome = []
let listaSexo = []
let listaIdade = []
// Variável para sinalizar FLAG
let parar = false
function adicionar() {
const nome = inputNome.value
const sexo = inputSexo.value
const idade = Number(inputIdade.value)
// O "/\d/.test(nome)" é uma expressão regular para bloquear números
if (nome.trim() === '' || /\d/.test(nome)) {
// O número "0" é permitido neste caso para indicar a finalização do cadastro
if (nome !== '0') {
alert('Insira um nome válido (sem números).')
inputNome.value = ''
inputNome.focus()
return
}
}
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 (nome === '0') {
parar = true
}
if (!parar) {
listaNome.push(nome)
listaSexo.push(sexo)
listaIdade.push(idade)
resposta.innerHTML = `
<p>Nomes: ${listaNome.join(' | ')}<p>
<p>Sexo: ${listaSexo.join(' | ')}<p>
<p>Idade: ${listaIdade.join(' | ')}<p>
`
inputNome.value = ''
inputSexo.value = ''
inputIdade.value = ''
inputNome.focus()
} else {
let somaIdades = 0
let maiorIdadeGrupo = listaIdade[0]
let pessoaMaisVelha = listaNome[0]
for (let contador = 0; contador < listaIdade.length; contador++) {
somaIdades += listaIdade[contador]
if (listaIdade[contador] > maiorIdadeGrupo) {
maiorIdadeGrupo = listaIdade[contador]
pessoaMaisVelha = listaNome[contador]
}
}
const idadeMediaGrupo = somaIdades / listaIdade.length
let idadeMulherJovem = null
let nomeMulherJovem = listaNome[0]
let mulheresMenos18 = 0
let homensMais30 = 0
for (let contador = 0; contador < listaIdade.length; contador++) {
if (listaSexo[contador].toLowerCase() === 'f') {
if (idadeMulherJovem === null || listaIdade[contador] < idadeMulherJovem) {
idadeMulherJovem = listaIdade[contador]
nomeMulherJovem = listaNome[contador]
}
if (listaIdade[contador] < 18) {
mulheresMenos18++
}
} else if (listaIdade[contador] > 30) {
homensMais30++
}
}
resposta.innerHTML += `
<h2>Informações do cadastro</h2>
<p>Idade média do grupo: ${idadeMediaGrupo.toFixed(1)}</p>
<p>Pessoa mais velha: ${pessoaMaisVelha} tem ${maiorIdadeGrupo} anos.</p>
<p>Mulher mais jovem: ${nomeMulherJovem} tem ${idadeMulherJovem} anos.</p>
<p>Mulheres com menos 18 anos: ${mulheresMenos18} mulheres.</p>
<p>Homens com mais de 30 anos: ${homensMais30} homens.</p>
`
inputNome.disabled = true
inputSexo.disabled = true
inputIdade.disabled = true
btnAdicionar.style.display = 'none'
btnCadastrar.style.display = 'inline-block'
}
}
function cadastrar() {
// Limpa os valores dos arrays
listaNome.length = 0
listaSexo.length = 0
listaIdade.length = 0
// Reseta o valor de FLAG
parar = false
inputNome.disabled = false
inputSexo.disabled = false
inputIdade.disabled = false
btnAdicionar.style.display = 'inline-block'
btnCadastrar.style.display = 'none'
inputNome.value = ''
inputSexo.value = ''
inputIdade.value = ''
inputNome.focus()
resposta.innerHTML = ''
}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!
