<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Objetos Literales en JS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-obj { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .perfil-box { background: #f1f5f9; border-radius: 6px; padding: 15px; margin: 15px 0; }
    .btn { background: #0284c7; color: white; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: bold; margin-right: 6px; }
  </style>
</head>
<body>

  <div class="card-obj">
    <h3 style="margin-top: 0; color: #0f172a;">Perfil de Alumno (Objeto en JS)</h3>

    <div id="pantalla-perfil" class="perfil-box">
      Cargando perfil...
    </div>

    <button class="btn" onclick="aprobarModulo()">Aprobar Módulo (+1)</button>
    <button class="btn" onclick="reiniciarPerfil()" style="background: #64748b;">Reiniciar</button>

    <script>
      // Definición del objeto con propiedades y métodos usando this:
      const alumno = {
        nombre: "Daniel Felipe",
        carrera: "Desarrollo Frontend",
        modulosCompletados: 3,
        modulosTotales: 6,
        
        calcularProgreso() {
          const porcentaje = (this.modulosCompletados / this.modulosTotales) * 100;
          return porcentaje.toFixed(0);
        },

        avanzar() {
          if (this.modulosCompletados < this.modulosTotales) {
            this.modulosCompletados++;
          }
        }
      };

      function renderizar() {
        const progreso = alumno.calcularProgreso();
        document.getElementById('pantalla-perfil').innerHTML = `
          <strong>Estudiante:</strong> ${alumno.nombre}<br>
          <strong>Carrera:</strong> ${alumno.carrera}<br>
          <strong>Módulos Aprobados:</strong> ${alumno.modulosCompletados} de ${alumno.modulosTotales}<br>
          <strong>Progreso Académico:</strong> <span style="color: #0284c7; font-weight: bold;">${progreso}%</span>
        `;
      }

      function aprobarModulo() {
        alumno.avanzar();
        renderizar();
      }

      function reiniciarPerfil() {
        alumno.modulosCompletados = 0;
        renderizar();
      }

      renderizar();
    </script>
  </div>

</body>
</html>