Descrição do exercício
Crie um programa que leia sexo e peso de 8 pessoas, usando a estrutura
“para”. No final, mostre na tela:
a) Quantas mulheres foram cadastradas
b) Quantos homens pesam mais de 100Kg
c) A média de peso entre as mulheres
d) O maior peso 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>Analisador de peso</h1>
<p>Insira o sexo e o peso de 8 pessoas abaixo.</p>
<p>Digite "F" para "Sexo Feminino" | "M" para "Sexo Masculino"</p>
<p>Sexo: <input type="text" name="sexo" id="sexo"></p>
<p>Peso: <input type="number" name="peso" id="peso"> KG</p>
<button onclick="adicionar()" class="btnAdicionar">Adicionar</button>
<button onclick="analisar()" class="btnAnalisar">Analisar</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 inputSexo = document.getElementById('sexo')
const inputPeso = document.getElementById('peso')
// Atalho para adicionar os dados quanto pressionar "ENTER"
inputPeso.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
adicionar()
}
})
const btnAdicionar = document.querySelector('button.btnAdicionar')
const btnAnalisar = document.querySelector('button.btnAnalisar')
const btnCadastrar = document.querySelector('button.btnCadastrar')
const resposta = document.querySelector('div.resposta')
// Arrays para armazenar os dados
const listaSexo = []
const listaPeso = []
function adicionar() {
const sexo = inputSexo.value
const peso = Number(inputPeso.value)
if (sexo.trim() === '' || sexo != 'F' && sexo != 'f' && sexo != 'M' && sexo != 'm') {
alert('Digite "F" para "Sexo Feminino" | "M" para "Sexo Masculino"')
inputSexo.value = ''
inputSexo.focus()
return
}
if (isNaN(peso) || peso <= 0) {
alert('Insira um peso maior que zero.')
inputPeso.value = ''
inputPeso.focus()
return
}
if (listaSexo.length >= 8 || listaPeso.length >= 8) {
alert('Você já adicionou 8 pessoas. Clique em "Analisar"')
return
}
// Adiciona o sexo e peso no fim de cada array
listaSexo.push(sexo)
listaPeso.push(peso)
resposta.innerHTML = `
<p>Sexo adicionado: ${listaSexo.join(' | ')}</p>
<p>Peso adicionado: ${listaPeso.join(' | ')}</p>
`
inputSexo.value = ''
inputPeso.value = ''
inputSexo.focus()
}
function analisar() {
if (listaSexo.length < 8 || listaPeso.length < 8) {
alert('Adicione 8 pessoas para fazer a análise.')
inputSexo.focus()
return
}
let numeroMulheres = 0
let somaPesoMulheres = 0
let homensMais100Kg = 0
let maiorPesoHomens = listaPeso[0]
for (let contador = 0; contador < listaSexo.length; contador++) {
if (listaSexo[contador] === 'f' || listaSexo[contador] === 'F') {
numeroMulheres++
somaPesoMulheres += listaPeso[contador]
} else {
if (listaPeso[contador] > 100) {
homensMais100Kg++
if (listaPeso[contador] > maiorPesoHomens) {
maiorPesoHomens = listaPeso[contador]
}
}
}
}
let mediaPesoMulheres
if (numeroMulheres > 0) {
mediaPesoMulheres = somaPesoMulheres / numeroMulheres
} else {
mediaPesoMulheres = 'Nenhuma mulher cadastrada.'
}
resposta.innerHTML += `
<h2>Análise</h2>
<p>Quantidade de mulheres: ${numeroMulheres}<p/>
<p>Peso médio das mulheres: ${mediaPesoMulheres.toFixed(1)}<p/>
<p>Homens com mais de 100 KG: ${homensMais100Kg}</p>
<p>Maior peso entre os homens: ${maiorPesoHomens} KG</p>
`
inputSexo.disabled = true
inputPeso.disabled = true
btnAdicionar.style.display = 'none'
btnAnalisar.style.display = 'none'
btnCadastrar.style.display = 'inline-block'
}
function cadastrar() {
// Limpa os arrays
listaSexo.length = 0
listaPeso.length = 0
inputSexo.disabled = false
inputPeso.disabled = false
inputSexo.value = ''
inputPeso.value = ''
inputSexo.focus()
btnAdicionar.style.display = 'inline-block'
btnAnalisar.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!
