Descrição do exercício
Desenvolva um aplicativo que leia o salário e o sexo de vários funcionários.
No final, mostre o total de salários pagos aos homens e o total pago às
mulheres.
O programa vai perguntar ao usuário se ele quer continuar ou não
sempre que ler os dados de um funcionário.
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 funcionários</h1>
<p>Finalize o cadastro digitando o número "0", no campo "Salário" e "Sexo". Depois clique em "Adicionar".</p>
<p>Salário: <input type="number" name="salario" id="salario"></p>
<p>Digite: "F" para "Sexo Feminino" | "M" para "Sexo Masculino"</p>
<p>Sexo: <input type="text" name="sexo" id="sexo"></p>
<button onclick="adicionar()" class="btnAdicionar">Adicionar</button>
<button onclick="recomecar()" class="btnRecomecar">Recomeçar</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;
}
.btnRecomecar {
display: none;
}Resolução do exercício em JavaScript
const inputSalario = document.getElementById('salario')
const inputSexo = document.getElementById('sexo')
// Atalho para adicionar valores apertando o "ENTER"
inputSexo.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
adicionar()
}
})
const btnAdicionar = document.querySelector('button.btnAdicionar')
const btnRecomecar = document.querySelector('button.btnRecomecar')
const resposta = document.querySelector('div.resposta')
// Arrays que vão receber o salario e o sexo
let salarioAdicionado = []
let sexoAdicionado = []
// Variável para sinalizar FLAG
let parar = false
let salarioHomens = 0
let salarioMulheres = 0
function adicionar() {
const salario = Number(inputSalario.value)
const sexo = inputSexo.value
if (isNaN(salario) || salario < 0) {
alert('Insira valores válidos!')
inputSalario.value = ''
inputSalario.focus()
return
}
if (sexo.trim() === '' || sexo !== 'F' && sexo !== 'f' && sexo !== 'M' && sexo !== 'm' && sexo !== '0') {
alert('Insira "F" para "Sexo Feminino" | "M" para "Sexo Masculino"')
inputSexo.value = ''
inputSexo.focus()
return
}
if (salario === 0) {
parar = true
inputSalario.disabled = true
inputSexo.disabled = true
btnAdicionar.style.display = 'none'
btnRecomecar.style.display = 'inline-block'
}
if (!parar) {
// Adiciona o salário e o sexo no final de cada array
salarioAdicionado.push(salario)
sexoAdicionado.push(sexo)
// Aplicação do "toLocaleString()" em cada salário do array para ficar assim "R$ 1.000,00 | R$ 1.500,00"
resposta.innerHTML = `
<p>Salário adicionado: ${salarioAdicionado.map(salario => salario.toLocaleString('pt-br', { style: 'currency', currency: 'BRL' })).join(' | ')}</p>
<p>Sexo adicionado: ${sexoAdicionado.join(' | ')}</p>
`
if (sexo === 'F' || sexo === 'f') {
salarioMulheres = salarioMulheres + salario
} else {
salarioHomens = salarioHomens + salario
}
} else {
resposta.innerHTML += `
<hr>
<p><strong>Resumo final:</strong></p>
<p>Salário total das mulheres: ${salarioMulheres.toLocaleString('pt-br', { style: 'currency', currency: 'BRL' })}</p>
<p>Salário total dos homens: ${salarioHomens.toLocaleString('pt-br', { style: 'currency', currency: 'BRL' })}</p>`
}
inputSalario.value = ''
inputSexo.value = ''
inputSalario.focus()
}
function recomecar() {
// Limpa o salário e o sexo dos arrays
salarioAdicionado.length = 0
sexoAdicionado.length = 0
// Reseta o FLAG
parar = false
salarioHomens = 0
salarioMulheres = 0
inputSalario.disabled = false
inputSexo.disabled = false
inputSalario.value = ''
inputSexo.value = ''
resposta.innerHTML = ''
inputSalario.focus()
btnRecomecar.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!
