# shaikhafsa123/new-website architecture

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

- Interactive diagram: https://gitdiagram.com/shaikhafsa123/new-website
- Repository: https://github.com/shaikhafsa123/new-website

## Overview

This is a small browser-based student marks analyzer. A student enters identifying details and six subject marks in the page; the `analyzeMarks` function reads those values, calculates totals, percentage, average, highest and lowest subjects, and pass/fail status, then writes the results and subject-level progress bars back to the page. The tree and sampled script support this UI-to-analysis workflow, but do not show how the function is triggered or how the stylesheet is connected.

Main entry points: [`student-marks-analysis/index.html`](https://github.com/shaikhafsa123/new-website/blob/main/student-marks-analysis/index.html) (Analysis page), [`student-marks-analysis/script.js`](https://github.com/shaikhafsa123/new-website/blob/main/student-marks-analysis/script.js) (Marks analyzer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User interface"]
  node_page["Analysis page<br/>[index.html]"]
  node_styles["Page styles<br/>[style.css]"]
end

subgraph group_analysis["Marks analysis"]
  node_analyzer["Marks analyzer<br/>[script.js]"]
end

node_student(("Student"))

node_student -->|"enters marks"| node_page
node_analyzer -->|"reads inputs"| node_page
node_analyzer -->|"writes results"| node_page

click node_page "https://github.com/shaikhafsa123/new-website/blob/main/student-marks-analysis/index.html"
click node_styles "https://github.com/shaikhafsa123/new-website/blob/main/student-marks-analysis/style.css"
click node_analyzer "https://github.com/shaikhafsa123/new-website/blob/main/student-marks-analysis/script.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_page,node_styles toneBlue
class node_analyzer toneAmber
class node_student toneIndigo
```

## Components

### User interface

- [Analysis page](https://github.com/shaikhafsa123/new-website/blob/main/student-marks-analysis/index.html): `student-marks-analysis/index.html`
- [Page styles](https://github.com/shaikhafsa123/new-website/blob/main/student-marks-analysis/style.css): `student-marks-analysis/style.css`

### Marks analysis

- [Marks analyzer](https://github.com/shaikhafsa123/new-website/blob/main/student-marks-analysis/script.js): `student-marks-analysis/script.js`

### Other components

- **Student**

## Connections

- Student → Analysis page: enters marks
- Marks analyzer → Analysis page: reads inputs
- Marks analyzer → Analysis page: writes results