# shibhani13/automation-practise architecture

> Architecture diagram of the GitHub repository shibhani13/automation-practise, 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/shibhani13/automation-practise
- Repository: https://github.com/shibhani13/automation-practise

## Overview

This repository is a browser-based showcase of interactive HTML and JavaScript examples. Users explore pages demonstrating alerts, modals, tooltips, forms, date and input handling, and other UI behaviors. The sampled script confirms event-driven implementations for several of these examples, including modal focus management, tooltip triggers, accordion behavior, and form interactions. Other page and iframe capabilities are visible in the file tree, but their implementations were not sampled, so their connections are omitted. There is no README documentation.

Main entry points: [`index.html`](https://github.com/shibhani13/automation-practise/blob/main/index.html) (Demo index), [`script.js`](https://github.com/shibhani13/automation-practise/blob/main/script.js) (Modal behavior)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_demos["Interactive demos"]
  node_home["Demo index<br/>[index.html]"]
  node_alerts["Alerts<br/>[alerts.html]"]
  node_modal_demo["Modals<br/>[modals.html]"]
  node_tooltip_demo["Tooltips<br/>[tooltips.html]"]
  node_svg_demo["SVG examples<br/>[svg.html]"]
  node_modal_logic["Modal behavior<br/>[script.js]"]
  node_tooltip_logic["Tooltip behavior<br/>[script.js]"]
end

subgraph group_inputs["Forms and inputs"]
  node_form_logic["Form handling<br/>[script.js]"]
  node_date_inputs["Date and time inputs<br/>[script.js]"]
  node_input_validation["Input validation<br/>[script.js]"]
  node_subject_picker["Subject selector<br/>[script.js]"]
end

subgraph group_browser["Browser examples"]
  node_accordion["Accordion<br/>[script.js]"]
  node_response_demo["Response display<br/>[script.js]"]
  node_shadow_elements["Shadow elements<br/>[script.js]"]
  node_frames_index["Frame examples"]
  node_outer_frame["Outer frame<br/>[outer-frame.html]"]
  node_inner_frame["Inner frame<br/>[inner-frame.html]"]
  node_single_frame["Single frame<br/>[single-frame.html]"]
end

node_visitor(("Visitor"))
node_styles["Page styling<br/>[styles.css]"]

node_visitor -->|"triggers clicks"| node_modal_logic
node_visitor -->|"triggers events"| node_tooltip_logic
node_visitor -->|"submits form"| node_form_logic
node_visitor -->|"clicks header"| node_accordion
node_visitor -->|"enters input"| node_input_validation
node_visitor -->|"selects subject"| node_subject_picker
node_visitor -.->|"browses"| node_home

click node_home "https://github.com/shibhani13/automation-practise/blob/main/index.html"
click node_alerts "https://github.com/shibhani13/automation-practise/blob/main/alerts.html"
click node_modal_demo "https://github.com/shibhani13/automation-practise/blob/main/modals.html"
click node_tooltip_demo "https://github.com/shibhani13/automation-practise/blob/main/tooltips.html"
click node_svg_demo "https://github.com/shibhani13/automation-practise/blob/main/svg.html"
click node_modal_logic "https://github.com/shibhani13/automation-practise/blob/main/script.js"
click node_tooltip_logic "https://github.com/shibhani13/automation-practise/blob/main/script.js"
click node_form_logic "https://github.com/shibhani13/automation-practise/blob/main/script.js"
click node_date_inputs "https://github.com/shibhani13/automation-practise/blob/main/script.js"
click node_input_validation "https://github.com/shibhani13/automation-practise/blob/main/script.js"
click node_subject_picker "https://github.com/shibhani13/automation-practise/blob/main/script.js"
click node_accordion "https://github.com/shibhani13/automation-practise/blob/main/script.js"
click node_response_demo "https://github.com/shibhani13/automation-practise/blob/main/script.js"
click node_shadow_elements "https://github.com/shibhani13/automation-practise/blob/main/script.js"
click node_frames_index "https://github.com/shibhani13/automation-practise/blob/main/frames/iframe-playground.html"
click node_outer_frame "https://github.com/shibhani13/automation-practise/blob/main/frames/outer-frame.html"
click node_inner_frame "https://github.com/shibhani13/automation-practise/blob/main/frames/inner-frame.html"
click node_single_frame "https://github.com/shibhani13/automation-practise/blob/main/frames/single-frame.html"
click node_styles "https://github.com/shibhani13/automation-practise/blob/main/styles.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_home,node_alerts,node_modal_demo,node_tooltip_demo,node_svg_demo,node_modal_logic,node_tooltip_logic toneBlue
class node_form_logic,node_date_inputs,node_input_validation,node_subject_picker toneAmber
class node_accordion,node_response_demo,node_shadow_elements,node_frames_index,node_outer_frame,node_inner_frame,node_single_frame toneMint
class node_visitor toneIndigo
class node_styles toneTeal
```

## Components

### Interactive demos

- [Demo index](https://github.com/shibhani13/automation-practise/blob/main/index.html): `index.html`
- [Alerts](https://github.com/shibhani13/automation-practise/blob/main/alerts.html): `alerts.html`
- [Modals](https://github.com/shibhani13/automation-practise/blob/main/modals.html): `modals.html`
- [Tooltips](https://github.com/shibhani13/automation-practise/blob/main/tooltips.html): `tooltips.html`
- [SVG examples](https://github.com/shibhani13/automation-practise/blob/main/svg.html): `svg.html`
- [Modal behavior](https://github.com/shibhani13/automation-practise/blob/main/script.js): `script.js`
- [Tooltip behavior](https://github.com/shibhani13/automation-practise/blob/main/script.js): `script.js`

### Forms and inputs

- [Form handling](https://github.com/shibhani13/automation-practise/blob/main/script.js): `script.js`
- [Date and time inputs](https://github.com/shibhani13/automation-practise/blob/main/script.js): `script.js`
- [Input validation](https://github.com/shibhani13/automation-practise/blob/main/script.js): `script.js`
- [Subject selector](https://github.com/shibhani13/automation-practise/blob/main/script.js): `script.js`

### Browser examples

- [Accordion](https://github.com/shibhani13/automation-practise/blob/main/script.js): `script.js`
- [Response display](https://github.com/shibhani13/automation-practise/blob/main/script.js): `script.js`
- [Shadow elements](https://github.com/shibhani13/automation-practise/blob/main/script.js): `script.js`
- [Frame examples](https://github.com/shibhani13/automation-practise/blob/main/frames/iframe-playground.html): `frames/iframe-playground.html`
- [Outer frame](https://github.com/shibhani13/automation-practise/blob/main/frames/outer-frame.html): `frames/outer-frame.html`
- [Inner frame](https://github.com/shibhani13/automation-practise/blob/main/frames/inner-frame.html): `frames/inner-frame.html`
- [Single frame](https://github.com/shibhani13/automation-practise/blob/main/frames/single-frame.html): `frames/single-frame.html`

### Other components

- **Visitor**
- [Page styling](https://github.com/shibhani13/automation-practise/blob/main/styles.css): `styles.css`

## Connections

- Visitor → Modal behavior: triggers clicks (evidence: `script.js`)
- Visitor → Tooltip behavior: triggers events (evidence: `script.js`)
- Visitor → Form handling: submits form (evidence: `script.js`)
- Visitor → Accordion: clicks header (evidence: `script.js`)
- Visitor → Input validation: enters input (evidence: `script.js`)
- Visitor → Subject selector: selects subject (evidence: `script.js`)
- Visitor → Demo index: browses