index.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Jose Ricardo Mendoza Castañeda">
    <meta name="description"
        content="Esta pagina web esta creada, para tener un control de las calificaciones, seas de la escuela que seas y e el nivel que vallas">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Padauk&display=swap" rel="stylesheet">
    <title> Control de Calificaciones </title>
    <!-- Scripts -->
    <script src="JS/califications.js"></script>
    <script src="JS/button.js"></script>
    <!-- Styles -->
    <link rel="shortcut icon" href="img/icon.jpg" type="image/x-icon">
    <link rel="stylesheet" href="CSS/form.css">
    <link rel="stylesheet" href="CSS/style.css">
    <link rel="stylesheet" href="CSS/header.css">
    <link rel="stylesheet" href="CSS/calificaciones.css">
</head>

<body>
    <main class="main">
        <header class="header">
            <div class="head">
                <h1 class="title"> CONTROL DE CALIFICACIONES </h1>
                <div class="img">
                    <img src="img/IPN-icon.jpg" alt="IPN">
                </div>
            </div>
            <div class="linea"></div>
        </header>
        <!-- Formulario para obtener datos -->
        <div class="formulario" id="formulario">
            <h2 class="title-form"> Llena los espacios para continuar </h2>
            <div id="nombre" class="cuestion">
                <label for="name" class="label"> ¿Cual es tu nombre? </label>
                <input type="text" name="name" id="name" class="input">
            </div>
            <form id="form" class="form">
    
               <div class="cuestion">
                  <label for="num_materias" class="label"> ¿Cuantas Materias tienes? </label>
                  <input type="number" name="num_materias" id="numM" class="input">
               </div>
    
                <div class="contenedor-btn">
                    <button id="submit" class="btn"> Aceptar </button>
                </div> 
    
                <div class="name_materias" id="names">
                </div>
    
            </form>
        </div>
        <!-- Tabla de Materias y Calificaciones -->
        <div class="calificaciones" id="calificaciones">
            <h2 class="title" id="titulo"></h2>
            <div class="materias" id="materias"></div>
            <div class="calificaciones" id="input_calificaciones"></div>
            <button class="btn hidden btn-p" id="promedio"> Sacar Promedio </button>
            <p class="resultado" id="final"></p>
        </div>

    </main>

    <script src="JS/main.js"></script>
</body>

</html>