index.html

<!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édias</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <div class="container">
        <header>
            <img src="./images/logo.png" alt="capelo e diploma">
            <h1>Calculadora de Médias</h1>
        </header>
        <form id="form-atividade">
            <input id="nome-atividade" type="text" required placeholder="Nome da Atividade">
            <input id="nota-atividade" type="number" required placeholder="Nota" min="0" max="10">
            <button id="btn-submit" type="submit">Adicionar +</button>
        </form>
        <table cellspacing="0">
            <thead>
                <tr>
                    <th>Nome da Atividade</th>
                    <th>Nota da Atividade</th>
                    <th>Aprovado?</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
                <tr>
                    <td>Média Final</td>
                    <td id="media-final-valor">---</td>
                    <td id="media-final-resultado">---</td>
                </tr>
            </tfoot>
        </table>
    </div>
    <script src="./main.js"></script>
</body>
</html>