# ngdquoc/s4060349_final_challenge architecture

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

- Interactive diagram: https://gitdiagram.com/ngdquoc/s4060349_final_challenge
- Repository: https://github.com/ngdquoc/s4060349_final_challenge

## Overview

This is a small browser-based education/profile interface, inferred from the course and education scripts; the README is empty and the HTML was not sampled. Its runtime workflow is to accept form submissions, update in-memory records, and render lists with delete controls. The two sections follow parallel but independent flows. The graph reflects only relationships visible in the sampled scripts; page layout and other capabilities cannot be confirmed.

Main entry points: [`scriptCourses.js`](https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptCourses.js) (Course form handler), [`scriptEducation.js`](https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptEducation.js) (Education form handler)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_courses["Courses"]
  node_course_form["Course form handler<br/>[scriptCourses.js]"]
  node_course_state[("Course records<br/>[scriptCourses.js]")]
  node_course_view["Course list and controls<br/>[scriptCourses.js]"]
end

subgraph group_education["Education"]
  node_education_form["Education form handler<br/>[scriptEducation.js]"]
  node_education_state[("Education records<br/>[scriptEducation.js]")]
  node_education_view["Education list and controls<br/>[scriptEducation.js]"]
end

node_user(("Profile editor"))
node_dom["Browser DOM"]

node_user -->|"submits"| node_course_form
node_dom -->|"dispatches submit"| node_course_form
node_course_form -->|"adds records"| node_course_state
node_course_form -->|"rerenders"| node_course_view
node_course_view -->|"deletes records"| node_course_state
node_course_view -->|"renders list"| node_dom
node_user -->|"submits"| node_education_form
node_dom -->|"dispatches submit"| node_education_form
node_education_form -->|"adds records"| node_education_state
node_education_form -->|"rerenders"| node_education_view
node_education_view -->|"deletes records"| node_education_state
node_education_view -->|"renders list"| node_dom

click node_course_form "https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptCourses.js"
click node_course_state "https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptCourses.js"
click node_course_view "https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptCourses.js"
click node_education_form "https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptEducation.js"
click node_education_state "https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptEducation.js"
click node_education_view "https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptEducation.js"

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_course_form,node_course_state,node_course_view,node_dom toneBlue
class node_education_form,node_education_state,node_education_view toneAmber
class node_user toneIndigo
```

## Components

### Courses

- [Course form handler](https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptCourses.js): `scriptCourses.js`
- [Course records](https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptCourses.js): `scriptCourses.js`
- [Course list and controls](https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptCourses.js): `scriptCourses.js`

### Education

- [Education form handler](https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptEducation.js): `scriptEducation.js`
- [Education records](https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptEducation.js): `scriptEducation.js`
- [Education list and controls](https://github.com/ngdquoc/s4060349_final_challenge/blob/main/scriptEducation.js): `scriptEducation.js`

### Other components

- **Profile editor**
- **Browser DOM**

## Connections

- Profile editor → Course form handler: submits (evidence: `scriptCourses.js`)
- Browser DOM → Course form handler: dispatches submit (evidence: `scriptCourses.js`)
- Course form handler → Course records: adds records (evidence: `scriptCourses.js`)
- Course form handler → Course list and controls: rerenders (evidence: `scriptCourses.js`)
- Course list and controls → Course records: deletes records (evidence: `scriptCourses.js`)
- Course list and controls → Browser DOM: renders list (evidence: `scriptCourses.js`)
- Profile editor → Education form handler: submits (evidence: `scriptEducation.js`)
- Browser DOM → Education form handler: dispatches submit (evidence: `scriptEducation.js`)
- Education form handler → Education records: adds records (evidence: `scriptEducation.js`)
- Education form handler → Education list and controls: rerenders (evidence: `scriptEducation.js`)
- Education list and controls → Education records: deletes records (evidence: `scriptEducation.js`)
- Education list and controls → Browser DOM: renders list (evidence: `scriptEducation.js`)