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

Descrição do exercício

Refaça o exercício 91, só que agora em forma de função Maior(), mas faça uma
adaptação que vai receber TRÊS números como parâmetro e vai retornar qual foi o
maior entre eles.

Descrição do exercício 91:

Desenvolva um algoritmo que leia dois valores pelo teclado e passe esses valores para um procedimento Maior() que vai verificar qual deles é o maior e mostrá-lo na tela. Caso os dois valores sejam iguais, mostrar uma mensagem informando essa característica.

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>Comparador de números</h1>

        <p>Insira 3 números abaixo.</p>

        <p>Número 1: <input type="number" name="numero1" id="numero1"></p>

        <p>Número 2: <input type="number" name="numero2" id="numero2"></p>

        <p>Número 3: <input type="number" name="numero3" id="numero3"></p>

        <button onclick="verAnalise()" class="btnAnalise">Ver análise</button>

        <button onclick="novaAnalise()" class="btnNovaAnalise">Nova análise</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;
}

.btnNovaAnalise {
    display: none;
}

Resolução do exercício em JavaScript

const inputNumero1 = document.getElementById('numero1')
const inputNumero2 = document.getElementById('numero2')
const inputNumero3 = document.getElementById('numero3')
const btnAnalise = document.querySelector('button.btnAnalise')
const btnNovaAnalise = document.querySelector('button.btnNovaAnalise')
const resposta = document.querySelector('div.resposta')

function maior(numero1Passado, numero2Passado, numero3Passado) {
    if (numero1Passado === numero2Passado && numero2Passado === numero3Passado) {
        return '<p>Todos os números são iguais.</p>'
    }

    let maiorNumero = numero1Passado
    if (numero2Passado > maiorNumero) maiorNumero = numero2Passado
    if (numero3Passado > maiorNumero) maiorNumero = numero3Passado

    return `<p>O maior número é ${maiorNumero}.</p>`
}

function verAnalise() {
    const numero1Digitado = inputNumero1.value
    const numero1Recebido = Number(numero1Digitado)

    if (numero1Digitado === '' || isNaN(numero1Recebido)) {
        alert('Digite um número válido.')
        inputNumero1.value = ''
        inputNumero1.focus()
        return
    }

    const numero2Digitado = inputNumero2.value
    const numero2Recebido = Number(numero2Digitado)

    if (numero2Digitado === '' || isNaN(numero2Recebido)) {
        alert('Insira um número válido.')
        inputNumero2.value = ''
        inputNumero2.focus()
        return
    }

    const numero3Digitado = inputNumero3.value
    const numero3Recebido = Number(numero3Digitado)

    if (numero3Digitado === '' || isNaN(numero3Recebido)) {
        alert('Insira um número válido.')
        inputNumero3.value = ''
        inputNumero3.focus()
        return
    }

    const resultadoAnalise = maior(numero1Recebido, numero2Recebido, numero3Recebido)

    resposta.innerHTML = resultadoAnalise

    inputNumero1.disabled = true
    inputNumero2.disabled = true
    inputNumero3.disabled = true

    btnAnalise.style.display = 'none'
    btnNovaAnalise.style.display = 'inline-block'

}

function novaAnalise() {
    inputNumero1.disabled = false
    inputNumero2.disabled = false
    inputNumero3.disabled = false

    inputNumero1.value = ''
    inputNumero2.value = ''
    inputNumero3.value = ''
    inputNumero1.focus()

    btnAnalise.style.display = 'inline-block'
    btnNovaAnalise.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!

Tags
Compartilhe este texto!

Posts relacionados