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

Descrição do exercício

Melhore o exercício 96, criando além da função Media() uma outra função
chamada Situacao(), que vai retornar para o programa principal se o aluno está
APROVADO, em RECUPERAÇÃO ou REPROVADO. Essa nova função, vai receber como parâmetro o resultado retornado pela função Media().

Descrição do exercício 96:

Crie um programa que tenha uma função Media(), que vai receber as 2 notas de um aluno e retornar a sua média para o programa principal.

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>Analisador de notas</h1>

        <p>Insira duas notas abaixo:</p>

        <p>Nota 1: <input type="number" name="nota1" id="nota1"></p>

        <p>Nota 2: <input type="number" name="nota2" id="nota2"></p>

        <button onclick="analisar()" class="btnAnalisar">Analisar</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 inputNota1 = document.getElementById('nota1')
const inputNota2 = document.getElementById('nota2')
const btnAnalisar = document.querySelector('button.btnAnalisar')
const btnNovaAnalise = document.querySelector('button.btnNovaAnalise')
const resposta = document.querySelector('div.resposta')

function analisar() {
    const nota1Digitada = inputNota1.value
    const nota1Convertida = Number(nota1Digitada)

    if (nota1Digitada === '' || isNaN(nota1Convertida)) {
        alert('Insira um valor válido.')
        inputNota1.value = ''
        inputNota1.focus()
        return
    }

    const nota2Digitada = inputNota2.value
    const nota2Convertida = Number(nota2Digitada)

    if (nota2Digitada === '' || isNaN(nota2Convertida)) {
        alert('Insira um valor válido.')
        inputNota2.value = ''
        inputNota2.focus()
        return
    }

    const resultadoMedia = media(nota1Convertida, nota2Convertida).toFixed(2)
    const resultadoSituacao = situacao(resultadoMedia)

    resposta.innerHTML = `
        <p>Nota média: ${resultadoMedia}<p>
        <p>Situação: ${resultadoSituacao}</p>
    `

    inputNota1.disabled = true
    inputNota2.disabled = true

    btnAnalisar.style.display = 'none'
    btnNovaAnalise.style.display = 'inline-block'
}

function media(nota1Passada, nota2Passada) {
    const mediaCalculo = (nota1Passada + nota2Passada) / 2
    return mediaCalculo
}

function situacao(mediaCalculoPassada) {
    if (mediaCalculoPassada < 5) {
        return 'REPROVADO'
    } else if (mediaCalculoPassada >= 5 && mediaCalculoPassada < 7) {
        return 'RECUPERAÇÃO'
    } else {
        return 'APROVADO'
    }
}

function novaAnalise() {
    inputNota1.disabled = false
    inputNota2.disabled = false
    inputNota1.value = ''
    inputNota2.value = ''
    inputNota1.focus()

    btnAnalisar.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