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

Descrição do exercício

Faça um aplicativo que leia o preço de 8 produtos. No final, mostre na tela
qual foi o maior e qual foi o menor preço digitados.

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>Leitor de preços</h1>

        <p>Insira abaixo o nome e preço de 8 produtos.</p>

        <p>Preço: <input type="number" name="preco" id="preco"></p>

        <button onclick="adicionarProduto()">Adicionar</button>

        <br>

        <button onclick="analisarPrecos()">Analisar preços</button>

        <br>

        <button onclick="limpar()" class="btnLimpar">Limpar resposta</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;
}

.btnLimpar {
    display: none;
}

Resolução do exercício em JavaScript

const inputPreco = document.getElementById('preco')

// Atalho: permite "Enter" para adicionar
inputPreco.addEventListener('keydown', function (event) {
    if (event.key === 'Enter') {
        adicionarProduto()
    }
})

const btnLimpar = document.querySelector('button.btnLimpar')
const resposta = document.querySelector('div.resposta')

let precosAdicionados = []


function adicionarProduto() {

    const preco = Number(inputPreco.value)

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

    if (precosAdicionados.length >= 8) {
        alert('Já foram adicionados 8 preços.')
        return
    }

    precosAdicionados.push(preco)

    resposta.innerHTML = `<p>R$ ${precosAdicionados.join(' | ')}</p>`

    inputPreco.value = ''
    inputPreco.focus()

}


function analisarPrecos() {
    if (precosAdicionados.length < 8) {
        alert('Primeiro adicione os 8 números.')
        return
    }

    /*  
        Inicializa as variáveis menorPreco e maiorPreco com o primeiro valor do array.
        Isso garante que a comparação que vem depois tenha um ponto de partida válido (ao invés de usar 0, Infinity, etc).
    */
    let menorPreco = precosAdicionados[0]
    let maiorPreco = precosAdicionados[0]

    /*
        Começa um laço for, iniciando i = 1 (já que índice 0 já foi usado na linha anterior).
        Vai percorrer todos os demais preços do array, até o final (i < length).
    */
    for (let contador = 1; contador < precosAdicionados.length; contador++) {
        // Verifica se o preço atual é menor que o menor atual.
        if (precosAdicionados[contador] < menorPreco) {
            menorPreco = precosAdicionados[contador]
        }
        // Verifica se o preço atual é maior que o maior atual.
        if (precosAdicionados[contador] > maiorPreco) {
            maiorPreco = precosAdicionados[contador]
        }
    }

    resposta.innerHTML = `<p>Menor preço ${menorPreco.toLocaleString('pt-br', { style: 'currency', currency: 'BRL' })} | Maior preço ${maiorPreco.toLocaleString('pt-br', { style: 'currency', currency: 'BRL' })}</p>`

    btnLimpar.style.display = 'inline-block'

}


function limpar() {
    precosAdicionados.length = 0 // Limpa os números do array para começar outra análise
    inputPreco.value = ''
    resposta.innerHTML = ''
    inputPreco.focus()
    btnLimpar.style.display = 'none'
}

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