Tutorial: Criando uma Calculadora de Média Escolar com Estilo Dark Neon

Neste tutorial, você vai aprender a criar uma Calculadora de Média Escolar usando HTML, CSS e JavaScript, com um design moderno Dark Neon.

O sistema permite inserir até 10 notas, calcula a média automaticamente e informa se o aluno foi aprovado, está em recuperação ou foi reprovado.

Vamos começar?

Recursos da Calculadora

✅ Aceita notas de 0 a 10

✅ Calcula a média automaticamente

✅ Classifica o aluno como:

Aprovado (média ≥ 6,0) 🟢

Recuperação (média ≥ 5,0 e < 6,0) 🟠

Reprovado (média < 5,0) 🔴

✅ Validação: impede valores inválidos

✅ Design Dark Neon moderno e responsivo

Veja o projeto ao vivo no link abaixo:

Calculadora de média escolar.

Veja no YouTube:

Passo 1: Criando o HTML

Crie um arquivo chamado index.html e cole o código 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 de Média Escolar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>Calculadora de Média Escolar</h2>

        <div class="notas-container">
            <input type="number" class="nota" min="0" max="10" step="0.1" placeholder="Nota 1">
            <input type="number" class="nota" min="0" max="10" step="0.1" placeholder="Nota 2">
            <input type="number" class="nota" min="0" max="10" step="0.1" placeholder="Nota 3">
            <input type="number" class="nota" min="0" max="10" step="0.1" placeholder="Nota 4">
            <input type="number" class="nota" min="0" max="10" step="0.1" placeholder="Nota 5">
            <input type="number" class="nota" min="0" max="10" step="0.1" placeholder="Nota 6">
            <input type="number" class="nota" min="0" max="10" step="0.1" placeholder="Nota 7">
            <input type="number" class="nota" min="0" max="10" step="0.1" placeholder="Nota 8">
            <input type="number" class="nota" min="0" max="10" step="0.1" placeholder="Nota 9">
            <input type="number" class="nota" min="0" max="10" step="0.1" placeholder="Nota 10">
        </div>

        <button onclick="calcularMedia()">Calcular</button>
        <div id="resultado"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Passo 2: Criando o CSS (Estilo Dark Neon)

Agora, crie um arquivo style.css e cole o seguinte código:



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #121212;
    padding: 20px;
}

.container {
    background: #1e1e1e;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 255, 0, 0.5); /* Efeito neon */
    text-align: center;
    max-width: 300px;
    width: 100%;
    animation: fadeIn 0.5s ease-in-out;
}

h2 {
    color: #0f0;
    margin-bottom: 10px;
    font-size: 18px;
}

.notas-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.nota {
    width: 100%;
    padding: 6px;
    border: 1px solid #0f0;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    background: #252525;
    color: white;
}

button {
    background: #0f0;
    color: black;
    padding: 8px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-size: 14px;
    transition: background 0.3s, box-shadow 0.3s;
    margin-top: 10px;
    font-weight: bold;
}

button:hover {
    background: #00cc00;
    box-shadow: 0 0 8px #0f0;
}

#resultado {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #0f0;
}

@media (max-width: 400px) {
    .container {
        width: 90%;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Passo 3: Criando o JavaScript

Agora, crie um arquivo script.js e cole este código:



function calcularMedia() {
    let notas = document.querySelectorAll(".nota");
    let soma = 0;
    let quantidadeNotas = 0;
    let resultado = document.getElementById("resultado");
    let erro = false;

    // Verifica se as notas estão entre 0 e 10
    notas.forEach(nota => {
        let valor = parseFloat(nota.value);

        if (valor > 10 || valor < 0) {
            erro = true; // Marca erro se alguma nota for maior que 10 ou menor que 0
        }

        if (!isNaN(valor) && valor >= 0 && valor <= 10) {
            soma += valor;
            quantidadeNotas++;
        }
    });

    // Se houver erro, exibe mensagem de alerta
    if (erro) {
        resultado.innerHTML = `Por favor, insira notas de 0 a 10!`;
        return;
    }

    // Verifica se pelo menos uma nota foi inserida
    if (quantidadeNotas === 0) {
        resultado.innerHTML = `Insira pelo menos uma nota válida!`;
        return;
    }

    // Calcula a média
    let media = (soma / quantidadeNotas).toFixed(2);
    let status = media >= 6 ? "Aprovado!" : media >= 5 ? "Recuperação!" : "Reprovado!";
    let cor = media >= 6 ? "green" : media >= 5 ? "orange" : "red";

    // Exibe o resultado
    resultado.innerHTML = `Média: ${media}  ${status}`;
}

Passo 4: Testando o Projeto

Agora que criamos os três arquivos (index.html, style.css e script.js), basta abrir o index.html no navegador e testar!

🔹 Digite as notas

🔹 Clique no botão "Calcular Média"

🔹 Veja o resultado com o status do aluno

Se preferir, os códigos estão no meu Repositório no GitHub.

📌 Conclusão

Criamos uma Calculadora de Média Escolar moderna com validação de notas e um design Neon Dark!

Se quiser melhorar o projeto, algumas sugestões são:

✅ Adicionar botão para limpar os campos

✅ Permitir salvar notas anteriores

✅ Criar um modo claro/escuro

Gostou do tutorial? Comente e compartilhe! 🚀

Programar Tudo - Blog de Programação

Pesquisar este blog