Descrição do exercício
Faça um algoritmo que leia a idade de vários alunos de uma turma. O programa
vai parar quando for digitada a idade 999.
No final, mostre quantos alunos
existem na turma e qual é a média de idade do grupo.
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 alunos</h1>
<p>Digite "999" e clique em "Adicionar" para finalizar o cadastro.</p>
<p>Idade: <input type="number" name="idade" id="idade"> anos</p>
<button onclick="adicionar()" class="btnAdicionar">Adicionar</button>
<br>
<button onclick="cadastrar()" class="btnCadastrar">Cadastrar mais alunos</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 inputIdade = document.getElementById('idade')
// Atalho para adicionar valores apertando 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')
// Array que armazena as idades dos alunos
let idadesAdicionadas = []
// Variável para sinalizar FLAG
let parar = false
let somaIdades = 0
let quantidadeAlunos = 0
let mediaIdades = 0
function adicionar() {
const idade = Number(inputIdade.value)
if (isNaN(idade) || idade == '' || idade <= 0) {
alert('Insira números válidos!')
inputIdade.value = ''
inputIdade.focus()
return
}
if (idade === 999) {
parar = true
inputIdade.disabled = true
btnAdicionar.style.display = 'none'
btnCadastrar.style.display = 'inline-block'
}
if (!parar) {
idadesAdicionadas.push(idade)
somaIdades += idade
quantidadeAlunos += 1
mediaIdades = somaIdades / quantidadeAlunos
resposta.innerHTML = `<p>Idade adicionadas: ${idadesAdicionadas.join(' | ')}</p>`
} else {
resposta.innerHTML = `
<h2>Resumo do cadastro:</h2>
<p>Idade média: ${mediaIdades.toFixed(1)} anos | Total de alunos: ${quantidadeAlunos}</p>
`
}
inputIdade.value = ''
inputIdade.focus()
}
function cadastrar() {
idadesAdicionadas.length = 0 // Limpa as idades anteriores do array
parar = false // Reseta a FLAG
somaIdades = 0
quantidadeAlunos = 0
mediaIdades = 0
resposta.innerHTML = ''
inputIdade.disabled = false
inputIdade.value = ''
inputIdade.focus()
btnCadastrar.style.display = 'none'
btnAdicionar.style.display = 'inline-block'
}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!
