Descrição do exercício
[DESAFIO] Escreva um programa para calcular a redução do tempo de vida de um
fumante. Pergunte a quantidade de cigarros fumados por dias e quantos anos ele
já fumou. Considere que um fumante perde 10 min de vida a cada cigarro. Calcule
quantos dias de vida um fumante perderá e exiba o total em dias.
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>Calculadora da Morte</h1>
<p>Quantos cigarros você fuma por dia? <input type="number" name="txtcigarros" id="txtcigarros"></p>
<p>Há quantos anos você fuma? <input type="number" name="txtanos" id="txtanos"></p>
<input type="button" value="Calcular" onclick="calculo()">
<div class="res"></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;
}Resolução do exercício em JavaScript
function calculo() {
var txtCigarros = document.getElementById('txtcigarros')
var txtAnos = document.getElementById('txtanos')
var res = document.querySelector('div.res')
var cigarrosString = txtCigarros.value
var anosString = txtAnos.value
// Verificação antes de converter
if (cigarrosString === '' || anosString === '') {
window.alert('Primeiro insira os dados!')
return // Evita lógicas quebradas: sem o return, o código continua mesmo após erro.
}
// Conversão de string para números
var cigarros = Number(cigarrosString)
var anosFumados = Number(anosString)
if (cigarros <= 0 || anosFumados <= 0) {
window.alert('Insira valores maiores do zero!')
return // Evita lógicas quebradas: sem o return, o código continua mesmo após erro.
}
var diasFumando = anosFumados * 365
var minutosPerdidosPorDia = cigarros * 10
var minutosTotaisPerdidos = minutosPerdidosPorDia * diasFumando
var diasDeVidaPerdidos = minutosTotaisPerdidos / 1440 // 1 dia = 1440 minutos
res.innerHTML = `<p>Você perdeu aproximadamente ${diasDeVidaPerdidos.toFixed(2)} dias de vida ao fumar por ${anosFumados} anos.</p>`
}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!
