Desafio 3 Hora da Prática - Calculadora | Lógica de programação: praticando com desafios

Fiz um projeto HTML + Javascript de uma calculadora Simples e para treinar adicionei o atributo style="color: red;" diretamente na tag

(CSS in line), conforme abaixo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora Simples</title>
</head>
<body>
<!--Adicionei o atributo style="color: red;" diretamente na tag <h2> (CSS in line) <h2>-->
<h2 style="color: red;">Calculadora Simples</h2>

<input type="number" id="numero1" placeholder="Número 1">
<input type="number" id="numero2" placeholder="Número 2">

<select id="operacao">
    <option value="soma">Soma</option>
    <option value="subtracao">Subtração</option>
    <option value="multiplicacao">Multiplicação</option>
    <option value="divisao">Divisão</option>
</select>

<button onclick="calcular()">Calcular</button>

<p id="resultado"></p>

<script>
    function adicao(a, b) {
        return a + b;
    }

    function subtracao(a, b) {
        return a - b;
    }

    function multiplicacao(a, b) {
        return a * b;
    }

    function divisao(a, b) {
        if (b !== 0) {
            return a / b;
        } else {
            return "Erro: divisão por zero.";
        }
    }

    function calculadora(operacao, a, b) {
        switch (operacao) {
            case 'soma':
                return adicao(a, b);
            case 'subtracao':
                return subtracao(a, b);
            case 'multiplicacao':
                return multiplicacao(a, b);
            case 'divisao':
                return divisao(a, b);
            default:
                return "Operação inválida.";
        }
    }

    function calcular() {
        // Obter os valores dos inputs
        const numero1 = parseFloat(document.getElementById('numero1').value);
        const numero2 = parseFloat(document.getElementById('numero2').value);
        const operacao = document.getElementById('operacao').value;

        // Verificar se os números são válidos
        if (isNaN(numero1) || isNaN(numero2)) {
            document.getElementById('resultado').innerText = "Por favor, insira números válidos.";
            return;
        }

        // Calcular o resultado
        const resultado = calculadora(operacao, numero1, numero2);

        // Exibir o resultado
        document.getElementById('resultado').innerText = `RESULTADO: ${resultado}`;
    }
</script>

</body>
</html>