# mubashirtech56/gpa-calculator- architecture

> Architecture diagram of the GitHub repository mubashirtech56/gpa-calculator-, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mubashirtech56/gpa-calculator-
- Repository: https://github.com/mubashirtech56/gpa-calculator-

## Overview

NUCES GPA Calculator is a browser-only academic calculator. The user enters current CGPA and credits, adds semester courses and any repeated-course details, then calculates SGPA, updated CGPA, and total credits; the app can also export a transcript. The graph separates the input workflow, GPA rules, and result/export presentation. The README documents the broader UI and export capabilities, while the only sampled source is script.js, so unsampled implementation links rely on README statements.

Main entry points: [`index.html`](https://github.com/mubashirtech56/gpa-calculator-/blob/main/index.html) (Calculator interface), [`script.js`](https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js) (SGPA and CGPA), [`style.css`](https://github.com/mubashirtech56/gpa-calculator-/blob/main/style.css) (Responsive styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_inputs["Academic inputs"]
  node_app_ui["Calculator interface<br/>[index.html]"]
  node_course_rows["Course table<br/>[script.js]"]
  node_course_controls["Course controls<br/>[script.js]"]
end

subgraph group_calculation["GPA calculation"]
  node_validation["Input validation<br/>[script.js]"]
  node_grade_scale["Grade point scale<br/>[script.js]"]
  node_repeat_rules["Repeat replacement<br/>[script.js]"]
  node_gpa_calculation["SGPA and CGPA<br/>[script.js]"]
end

subgraph group_results["Results and export"]
  node_result_display["Result display<br/>[index.html]"]
  node_number_animation["Number animation<br/>[script.js]"]
  node_transcript_export["Transcript export<br/>[index.html]"]
  node_visual_styles["Responsive styling<br/>[style.css]"]
end

node_student(("Student"))

node_student -->|"enters data"| node_app_ui
node_app_ui -->|"provides course table"| node_course_rows
node_course_controls -->|"adds or removes"| node_course_rows
node_app_ui -->|"submits values"| node_validation
node_validation -->|"validates inputs"| node_gpa_calculation
node_grade_scale -->|"supplies grade options"| node_course_rows
node_gpa_calculation -->|"applies replacement"| node_repeat_rules
node_gpa_calculation -->|"shows results"| node_result_display
node_gpa_calculation -->|"animates values"| node_number_animation
node_number_animation -->|"updates figures"| node_result_display
node_student -->|"exports transcript"| node_transcript_export
node_app_ui -->|"uses styling"| node_visual_styles

click node_app_ui "https://github.com/mubashirtech56/gpa-calculator-/blob/main/index.html"
click node_course_rows "https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js"
click node_course_controls "https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js"
click node_validation "https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js"
click node_grade_scale "https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js"
click node_repeat_rules "https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js"
click node_gpa_calculation "https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js"
click node_result_display "https://github.com/mubashirtech56/gpa-calculator-/blob/main/index.html"
click node_number_animation "https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js"
click node_transcript_export "https://github.com/mubashirtech56/gpa-calculator-/blob/main/index.html"
click node_visual_styles "https://github.com/mubashirtech56/gpa-calculator-/blob/main/style.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app_ui,node_course_rows,node_course_controls toneBlue
class node_validation,node_grade_scale,node_repeat_rules,node_gpa_calculation toneAmber
class node_result_display,node_number_animation,node_transcript_export,node_visual_styles toneMint
class node_student toneIndigo
```

## Components

### Academic inputs

- [Calculator interface](https://github.com/mubashirtech56/gpa-calculator-/blob/main/index.html): `index.html`
- [Course table](https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js): `script.js`
- [Course controls](https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js): `script.js`

### GPA calculation

- [Input validation](https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js): `script.js`
- [Grade point scale](https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js): `script.js`
- [Repeat replacement](https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js): `script.js`
- [SGPA and CGPA](https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js): `script.js`

### Results and export

- [Result display](https://github.com/mubashirtech56/gpa-calculator-/blob/main/index.html): `index.html`
- [Number animation](https://github.com/mubashirtech56/gpa-calculator-/blob/main/script.js): `script.js`
- [Transcript export](https://github.com/mubashirtech56/gpa-calculator-/blob/main/index.html): `index.html`
- [Responsive styling](https://github.com/mubashirtech56/gpa-calculator-/blob/main/style.css): `style.css`

### Other components

- **Student**

## Connections

- Student → Calculator interface: enters data (evidence: `README.md`)
- Calculator interface → Course table: provides course table (evidence: `README.md`)
- Course controls → Course table: adds or removes (evidence: `script.js`)
- Calculator interface → Input validation: submits values (evidence: `README.md`)
- Input validation → SGPA and CGPA: validates inputs (evidence: `script.js`)
- Grade point scale → Course table: supplies grade options (evidence: `script.js`)
- SGPA and CGPA → Repeat replacement: applies replacement (evidence: `script.js`)
- SGPA and CGPA → Result display: shows results (evidence: `README.md`)
- SGPA and CGPA → Number animation: animates values (evidence: `script.js`)
- Number animation → Result display: updates figures (evidence: `script.js`)
- Student → Transcript export: exports transcript (evidence: `README.md`)
- Calculator interface → Responsive styling: uses styling (evidence: `README.md`)