Descrição do exercício
Crie um programa que leia a idade de 8 pessoas e guarde-as em um vetor. No
final, mostre:
a) Qual é a média de idade das pessoas cadastradas
b) Em quais posições temos pessoas com mais de 25 anos
c) Qual foi a maior idade digitada (podem haver repetições)
d) Em que posições digitamos a maior idade
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>Insira a idade de 8 pessoas abaixo.</p>
<p>Idade: <input type="number" name="idade" id="idade"></p>
<button onclick="adicionar()" class="btnAdicionar">Adicionar</button>
<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;
margin: 10px;
}
.btnCadastrar {
display: none;
}Resolução do exercício em JavaScript
const inputIdade = document.getElementById('idade')
// Atalho para adicionar dados apertando "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')
let listaIdades = []
function adicionar() {
const idadeDigitada = inputIdade.value
const idade = Number(idadeDigitada)
// Validação de valores
if (idadeDigitada === '' || isNaN(idade)) {
alert('Insira um número válido no campo.')
inputIdade.value = ''
inputIdade.focus()
return
}
if (idade <= 0) {
alert('Insira uma idade maior que zero.')
inputIdade.value = ''
inputIdade.focus()
return
}
// Adiciona números ao array e mostra para o usuário
listaIdades.push(idade)
resposta.innerHTML = `${listaIdades.length} idades adicionadas.`
inputIdade.value = ''
inputIdade.focus()
// Análise dos números
if (listaIdades.length >= 8) {
let somaIdades = 0
let maiorIdade = 0
let maiorIdadePosicao = 0
for (let contador = 0; contador < listaIdades.length; contador++) {
somaIdades = somaIdades + listaIdades[contador]
if (listaIdades[contador] > maiorIdade) {
maiorIdade = listaIdades[contador]
}
}
const posicoesMaiorIdade = listaIdades
.map((valor, indice) => ({ indice, valor }))
.filter(item => item.valor === maiorIdade)
.map(item => `[${item.indice}]`)
.join(' > ')
const idadeMais25 = listaIdades
.map((valor, indice) => ({ indice, valor }))
.filter(item => item.valor > 25)
.map(item => `[${item.indice}]`)
.join(' > ')
let respostaIdadeMais25 = ''
if (idadeMais25.length === 0) {
respostaIdadeMais25 = 'Não foi cadastrada nenhuma idade maior que 25.'
} else {
respostaIdadeMais25 = `${idadeMais25}`
}
const idadeMedia = somaIdades / listaIdades.length
// Retorno da análise
resposta.innerHTML = `
<p>Idades cadastradas: ${listaIdades.join(' | ')}</p>
<p>Idade média: ${idadeMedia} ano(s).</p>
<p>Idades maiores que 25 (indíce): ${respostaIdadeMais25}</p>
<p>Maior idade: ${maiorIdade} anos.</p>
<p>Posições da maior idade: ${posicoesMaiorIdade}</p>
`
inputIdade.disabled = true
btnAdicionar.style.display = 'none'
btnCadastrar.style.display = 'inline-block'
}
}
function cadastrar() {
listaIdades.length = 0
inputIdade.disabled = false
inputIdade.value = ''
inputIdade.focus()
btnAdicionar.style.display = 'inline-block'
btnCadastrar.style.display = 'none'
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!
