Exercício 36 – Lógica de programação com JavaScript

Descrição do exercício

Um programa de vida saudável quer dar pontos atividades físicas que podem
ser trocados por dinheiro. O sistema funciona assim:

  • Cada hora de atividade física no mês vale pontos
    • até 10h de atividade no mês: ganha 2 pontos por hora
    • de 10h até 20h de atividade no mês: ganha 5 pontos por hora
    • acima de 20h de atividade no mês: ganha 10 pontos por hora
  • A cada ponto ganho, o cliente fatura R$0,05 (5 centavos)

Faça um programa que leia quantas horas de atividade uma pessoa teve por mês,
calcule e mostre quantos pontos ela teve e quanto dinheiro ela conseguiu ganhar.

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>Sua saúde vale dinheiro!</h1>

        <p>Horas mensais de atividade física: <input type="number" name="Horas" id="horas"></p>

        <button onclick="calcular()">Calcular</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;
}

Resolução do exercício em JavaScript

const inputHoras = document.getElementById('horas')
const resposta = document.querySelector('div.resposta')

function calcular() {
    let horas = Number(inputHoras.value)

    if (isNaN(horas) || horas <= 0) {
        alert('Insira valores válidos.')
        return
    }

    let pontos = 0

    if (horas <= 10) {
        pontos = horas * 2
    } else if (horas <= 20) {
        pontos = horas * 5
    } else {
        pontos = horas * 10
    }

    const valorRecebido = pontos * 0.05

    resposta.innerHTML = `<p>Total de pontos: ${pontos} | Valor: ${valorRecebido.toLocaleString('pt-br', { style: 'currency', currency: 'BRL' })}</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!

Tags
Compartilhe este texto!

Posts relacionados