Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/rtajio/ESEN/llms.txt

Use this file to discover all available pages before exploring further.

ESEN organises every extracurricular activity into one of five categories. Categories serve two practical purposes: they allow administrators to filter the activity list to a specific type, and they drive the hours-by-category bar chart in the Reports view. Every activity must belong to exactly one category, chosen at registration time from a fixed <select> dropdown.

​
The five categories

Académico (Academic)

Covers academic workshops, congresses, and knowledge-based events. Demo activities: Taller de Emprendimiento, Congreso de Ciencias.

Deportivo (Sports)

Covers inter-faculty tournaments and sports competitions. Demo activity: Torneo Interfacultades.

Cultural (Cultural)

Covers artistic expression, cultural festivals, and creative events. Demo activity: Festival de Arte.

Voluntariado (Volunteering)

Covers community service and environmental activities. Demo activity: Brigada de Limpieza.

Liderazgo (Leadership)

Covers student leadership training and development programmes. Demo activity: Taller de Liderazgo.

​
Badge colours

Category labels appear as colour-coded inline badges throughout the app. The mapping between category name and CSS class is defined in CAT_COLORS (app.js:13):
app.js
const CAT_COLORS = {
  Académico:    'badge-blue',
  Deportivo:    'badge-teal',
  Cultural:     'badge-coral',
  Voluntariado: 'badge-green',
  Liderazgo:    'badge-amber',
};
The badge styles themselves are declared in style.css:288:
style.css
.badge-teal   { background: #E1F5EE; color: #085041; }
.badge-blue   { background: #E6F1FB; color: #0C447C; }
.badge-amber  { background: #FAEEDA; color: #633806; }
.badge-coral  { background: #FAECE7; color: #712B13; }
.badge-green  { background: #EAF3DE; color: #27500A; }

​
Colour reference

CategoryBadge classBackgroundText colour
Académicobadge-blue#E6F1FB#0C447C
Deportivobadge-teal#E1F5EE#085041
Culturalbadge-coral#FAECE7#712B13
Voluntariadobadge-green#EAF3DE#27500A
Liderazgobadge-amber#FAEEDA#633806

​
Filtering by category

The Activities view (view-actividades) includes a <select> control with id filter-cat (index.html:164). Selecting a category calls renderActTable(), which filters the array:
app.js
const cat  = document.getElementById('filter-cat').value;
let data   = [...actividades];
if (cat) data = data.filter(a => a.cat === cat);
The dropdown lists all five category names as <option> values plus a blank Todas las categorías option that clears the filter. The filter can be combined with the month picker (filter-month) to narrow results by both category and date. The Limpiar button resets both filters by calling clearFilters().

​
Categories in reports

The Reports view (view-reportes) always iterates over categories in this fixed order: Académico, Deportivo, Cultural, Voluntariado, Liderazgo. For each category, renderReportes() sums the horas of all matching activities regardless of their activo status, then renders a proportional horizontal bar scaled to the category with the most hours.

​
Demo data by category

The six pre-loaded demo activities (app.js:21) map to categories as follows:
ActivityCategory
Taller de EmprendimientoAcadémico
Torneo InterfacultadesDeportivo
Festival de ArteCultural
Brigada de LimpiezaVoluntariado
Taller de LiderazgoLiderazgo
Congreso de CienciasAcadémico
Académico is the only category with two demo activities, which means it will always show the highest bar in the Reports hours chart when using the default demo data.

Build docs developers (and LLMs) love

Get started for freeTalk to us