# akashkobal/web-development architecture

> Architecture diagram of the GitHub repository akashkobal/web-development, 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/akashkobal/web-development
- Repository: https://github.com/akashkobal/web-development

## Overview

This repository is a collection of independent beginner-to-advanced web projects, not one integrated application. The principal workflow is a user opening a project, providing input or triggering an action, and receiving a calculated, validated, generated, or fetched result. The graph groups the README’s main capabilities by domain; each project has its own page and, where present, browser script. External API calls and local task persistence are shown where sampled source confirms them. Other wiring is inferred only at the project-page level from the tree and README.

Main entry points: [`13. To Do List/script.js`](https://github.com/akashkobal/web-development/blob/main/13.%20To%20Do%20List/script.js) (To-do list), [`19. Image Search Engine/script.js`](https://github.com/akashkobal/web-development/blob/main/19.%20Image%20Search%20Engine/script.js) (Image search), [`1. Calculator/index.html`](https://github.com/akashkobal/web-development/blob/main/1.%20Calculator/index.html) (Calculator), [`2. Random Password Generator/script.js`](https://github.com/akashkobal/web-development/blob/main/2.%20Random%20Password%20Generator/script.js) (Password generator)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_utility["Calculators and tools"]
  node_calculator["Calculator<br/>[index.html]"]
  node_password["Password generator<br/>[script.js]"]
  node_bmi["BMI calculator<br/>[script.js]"]
  node_qr["QR generator<br/>[script.js]"]
  node_age["Age calculator<br/>[script.js]"]
end

subgraph group_forms["Forms and lists"]
  node_registration["Account registration<br/>[script.js]"]
  node_login["Login page<br/>[script.js]"]
  node_email["Email subscription<br/>[script.js]"]
  node_validation1["Form validation<br/>[script.js]"]
  node_validation2["Form validation two<br/>[script.js]"]
  node_todo["To-do list<br/>[script.js]"]
  node_notes["Notes app<br/>[script.js]"]
end

subgraph group_time["Time and display"]
  node_stopwatch["Stopwatch<br/>[script.js]"]
  node_countdown["Countdown timer<br/>[script.js]"]
  node_calendar["Mini calendar<br/>[script.js]"]
  node_theme["Light and dark mode<br/>[script.js]"]
  node_toast["Toast notifications<br/>[script.js]"]
end

subgraph group_media["Media and content"]
  node_quotes["Quote generator<br/>[script.js]"]
  node_search["Search clone<br/>[script.js]"]
  node_gallery["Image gallery<br/>[script.js]"]
  node_image_search["Image search<br/>[script.js]"]
  node_voice["Text to voice<br/>[script.js]"]
  node_jokes["Joke generator<br/>[script.js]"]
  node_avatar["Random avatar<br/>[script.js]"]
  node_memes["Memes app<br/>[script.js]"]
  node_github["GitHub profile app<br/>[script.js]"]
end

subgraph group_games["Games and interaction"]
  node_dice["Dice challenge<br/>[script.js]"]
  node_drum["Drum kit<br/>[index.js]"]
  node_quiz["Capital quiz<br/>[index.js]"]
  node_instack["Instack clone quiz<br/>[script.js]"]
end

node_user(("Browser user"))
node_github_api{{"GitHub API"}}
node_unsplash_api{{"Unsplash API"}}
node_random_user_api{{"Random user API"}}

node_user -->|"uses"| node_calculator
node_calculator -->|"shows calculation"| node_user
node_user -->|"requests password"| node_password
node_password -->|"shows password"| node_user
node_user -->|"enters measurements"| node_bmi
node_bmi -->|"shows BMI"| node_user
node_user -->|"enters content"| node_qr
node_qr -->|"shows QR code"| node_user
node_user -->|"enters birth date"| node_age
node_age -->|"shows age"| node_user
node_user -->|"submits details"| node_registration
node_registration -->|"shows form result"| node_user
node_user -->|"submits credentials"| node_login
node_login -->|"shows status"| node_user
node_user -->|"subscribes"| node_email
node_email -->|"shows status"| node_user
node_user -->|"submits form"| node_validation1
node_validation1 -->|"shows validation"| node_user
node_user -->|"submits form"| node_validation2
node_validation2 -->|"shows validation"| node_user
node_user -->|"manages tasks"| node_todo
node_todo -->|"shows tasks"| node_user
node_todo -->|"persists tasks"| node_todo
node_user -->|"creates notes"| node_notes
node_notes -->|"shows notes"| node_user
node_user -->|"controls timer"| node_stopwatch
node_stopwatch -->|"shows elapsed time"| node_user
node_user -->|"sets countdown"| node_countdown
node_countdown -->|"shows remaining time"| node_user
node_user -->|"views calendar"| node_calendar
node_calendar -->|"shows date"| node_user
node_user -->|"changes theme"| node_theme
node_theme -->|"updates display"| node_user
node_user -->|"triggers notification"| node_toast
node_toast -->|"shows notification"| node_user
node_user -->|"requests quote"| node_quotes
node_quotes -->|"shows quote"| node_user
node_user -->|"searches"| node_search
node_search -->|"shows results"| node_user
node_user -->|"views images"| node_gallery
node_gallery -->|"shows gallery"| node_user
node_user -->|"searches images"| node_image_search
node_image_search -->|"fetches images"| node_unsplash_api
node_unsplash_api -->|"returns images"| node_image_search
node_image_search -->|"shows images"| node_user
node_user -->|"enters text"| node_voice
node_voice -->|"plays speech"| node_user
node_user -->|"requests joke"| node_jokes

click node_calculator "https://github.com/akashkobal/web-development/blob/main/1.%20Calculator/index.html"
click node_password "https://github.com/akashkobal/web-development/blob/main/2.%20Random%20Password%20Generator/script.js"
click node_bmi "https://github.com/akashkobal/web-development/blob/main/3.%20Body%20Mass%20Index%20Calculator/script.js"
click node_qr "https://github.com/akashkobal/web-development/blob/main/5.%20QR%20Code%20Generator/script.js"
click node_age "https://github.com/akashkobal/web-development/blob/main/14.%20Age%20Calculator/script.js"
click node_registration "https://github.com/akashkobal/web-development/blob/main/4.%20Account%20Registration%20Form/script.js"
click node_login "https://github.com/akashkobal/web-development/blob/main/6.%20Login%20Page/script.js"
click node_email "https://github.com/akashkobal/web-development/blob/main/12.%20Email%20Subscription/script.js"
click node_validation1 "https://github.com/akashkobal/web-development/blob/main/15.%20Form%20Validation/script.js"
click node_validation2 "https://github.com/akashkobal/web-development/blob/main/16.%20Form%20Validation%202/script.js"
click node_todo "https://github.com/akashkobal/web-development/blob/main/13.%20To%20Do%20List/script.js"
click node_notes "https://github.com/akashkobal/web-development/blob/main/18.%20Create%20Notes/script.js"
click node_stopwatch "https://github.com/akashkobal/web-development/blob/main/10.%20Stopwatch/script.js"
click node_countdown "https://github.com/akashkobal/web-development/blob/main/23.%20Countdown%20Timer/script.js"
click node_calendar "https://github.com/akashkobal/web-development/blob/main/19.%20Mini%20Calendar/script.js"
click node_theme "https://github.com/akashkobal/web-development/blob/main/9.%20Light%20and%20Dark%20Mode/script.js"
click node_toast "https://github.com/akashkobal/web-development/blob/main/11.%20Toast%20Notification/script.js"
click node_quotes "https://github.com/akashkobal/web-development/blob/main/7.%20Quotes%20Generator/script.js"
click node_search "https://github.com/akashkobal/web-development/blob/main/8.%20Google%20Search%20Engine%20Clone/script.js"
click node_gallery "https://github.com/akashkobal/web-development/blob/main/17.%20Image%20Gallery/script.js"
click node_image_search "https://github.com/akashkobal/web-development/blob/main/19.%20Image%20Search%20Engine/script.js"
click node_voice "https://github.com/akashkobal/web-development/blob/main/20.%20Text%20to%20Voice%20Converter/script.js"
click node_jokes "https://github.com/akashkobal/web-development/blob/main/21.%20Random%20Jocke%20Generator/script.js"
click node_avatar "https://github.com/akashkobal/web-development/blob/main/22.%20Random%20User%20Avatar%20Generator/script.js"
click node_memes "https://github.com/akashkobal/web-development/blob/main/24.%20Memes%20App/script.js"
click node_github "https://github.com/akashkobal/web-development/blob/main/29.%20Github%20Profile%20App/script.js"
click node_dice "https://github.com/akashkobal/web-development/blob/main/26.%20Dice%20challenge/script.js"
click node_drum "https://github.com/akashkobal/web-development/blob/main/27.%20Drum%20kit/Drum%20Kit%20Starting%20Files/index.js"
click node_quiz "https://github.com/akashkobal/web-development/blob/main/28.%20Guess%20the%20capital/index.js"
click node_instack "https://github.com/akashkobal/web-development/blob/main/25.%20Logiworks%20Instack%20Clone/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_calculator,node_password,node_bmi,node_qr,node_age,node_user,node_random_user_api toneBlue
class node_registration,node_login,node_email,node_validation1,node_validation2,node_todo,node_notes toneAmber
class node_stopwatch,node_countdown,node_calendar,node_theme,node_toast,node_github_api,node_unsplash_api toneMint
class node_quotes,node_search,node_gallery,node_image_search,node_voice,node_jokes,node_avatar,node_memes,node_github toneRose
class node_dice,node_drum,node_quiz,node_instack toneIndigo
```

## Components

### Calculators and tools

- [Calculator](https://github.com/akashkobal/web-development/blob/main/1.%20Calculator/index.html): `1. Calculator/index.html`
- [Password generator](https://github.com/akashkobal/web-development/blob/main/2.%20Random%20Password%20Generator/script.js): `2. Random Password Generator/script.js`
- [BMI calculator](https://github.com/akashkobal/web-development/blob/main/3.%20Body%20Mass%20Index%20Calculator/script.js): `3. Body Mass Index Calculator/script.js`
- [QR generator](https://github.com/akashkobal/web-development/blob/main/5.%20QR%20Code%20Generator/script.js): `5. QR Code Generator/script.js`
- [Age calculator](https://github.com/akashkobal/web-development/blob/main/14.%20Age%20Calculator/script.js): `14. Age Calculator/script.js`

### Forms and lists

- [Account registration](https://github.com/akashkobal/web-development/blob/main/4.%20Account%20Registration%20Form/script.js): `4. Account Registration Form/script.js`
- [Login page](https://github.com/akashkobal/web-development/blob/main/6.%20Login%20Page/script.js): `6. Login Page/script.js`
- [Email subscription](https://github.com/akashkobal/web-development/blob/main/12.%20Email%20Subscription/script.js): `12. Email Subscription/script.js`
- [Form validation](https://github.com/akashkobal/web-development/blob/main/15.%20Form%20Validation/script.js): `15. Form Validation/script.js`
- [Form validation two](https://github.com/akashkobal/web-development/blob/main/16.%20Form%20Validation%202/script.js): `16. Form Validation 2/script.js`
- [To-do list](https://github.com/akashkobal/web-development/blob/main/13.%20To%20Do%20List/script.js): `13. To Do List/script.js`
- [Notes app](https://github.com/akashkobal/web-development/blob/main/18.%20Create%20Notes/script.js): `18. Create Notes/script.js`

### Time and display

- [Stopwatch](https://github.com/akashkobal/web-development/blob/main/10.%20Stopwatch/script.js): `10. Stopwatch/script.js`
- [Countdown timer](https://github.com/akashkobal/web-development/blob/main/23.%20Countdown%20Timer/script.js): `23. Countdown Timer/script.js`
- [Mini calendar](https://github.com/akashkobal/web-development/blob/main/19.%20Mini%20Calendar/script.js): `19. Mini Calendar/script.js`
- [Light and dark mode](https://github.com/akashkobal/web-development/blob/main/9.%20Light%20and%20Dark%20Mode/script.js): `9. Light and Dark Mode/script.js`
- [Toast notifications](https://github.com/akashkobal/web-development/blob/main/11.%20Toast%20Notification/script.js): `11. Toast Notification/script.js`

### Media and content

- [Quote generator](https://github.com/akashkobal/web-development/blob/main/7.%20Quotes%20Generator/script.js): `7. Quotes Generator/script.js`
- [Search clone](https://github.com/akashkobal/web-development/blob/main/8.%20Google%20Search%20Engine%20Clone/script.js): `8. Google Search Engine Clone/script.js`
- [Image gallery](https://github.com/akashkobal/web-development/blob/main/17.%20Image%20Gallery/script.js): `17. Image Gallery/script.js`
- [Image search](https://github.com/akashkobal/web-development/blob/main/19.%20Image%20Search%20Engine/script.js): `19. Image Search Engine/script.js`
- [Text to voice](https://github.com/akashkobal/web-development/blob/main/20.%20Text%20to%20Voice%20Converter/script.js): `20. Text to Voice Converter/script.js`
- [Joke generator](https://github.com/akashkobal/web-development/blob/main/21.%20Random%20Jocke%20Generator/script.js): `21. Random Jocke Generator/script.js`
- [Random avatar](https://github.com/akashkobal/web-development/blob/main/22.%20Random%20User%20Avatar%20Generator/script.js): `22. Random User Avatar Generator/script.js`
- [Memes app](https://github.com/akashkobal/web-development/blob/main/24.%20Memes%20App/script.js): `24. Memes App/script.js`
- [GitHub profile app](https://github.com/akashkobal/web-development/blob/main/29.%20Github%20Profile%20App/script.js): `29. Github Profile App/script.js`

### Games and interaction

- [Dice challenge](https://github.com/akashkobal/web-development/blob/main/26.%20Dice%20challenge/script.js): `26. Dice challenge/script.js`
- [Drum kit](https://github.com/akashkobal/web-development/blob/main/27.%20Drum%20kit/Drum%20Kit%20Starting%20Files/index.js): `27. Drum kit/Drum Kit Starting Files/index.js`
- [Capital quiz](https://github.com/akashkobal/web-development/blob/main/28.%20Guess%20the%20capital/index.js): `28. Guess the capital/index.js`
- [Instack clone quiz](https://github.com/akashkobal/web-development/blob/main/25.%20Logiworks%20Instack%20Clone/script.js): `25. Logiworks Instack Clone/script.js`

### Other components

- **Browser user**
- **GitHub API**
- **Unsplash API**
- **Random user API**

## Connections

- Browser user → Calculator: uses
- Calculator → Browser user: shows calculation
- Browser user → Password generator: requests password
- Password generator → Browser user: shows password
- Browser user → BMI calculator: enters measurements
- BMI calculator → Browser user: shows BMI
- Browser user → QR generator: enters content
- QR generator → Browser user: shows QR code
- Browser user → Age calculator: enters birth date
- Age calculator → Browser user: shows age
- Browser user → Account registration: submits details
- Account registration → Browser user: shows form result
- Browser user → Login page: submits credentials
- Login page → Browser user: shows status
- Browser user → Email subscription: subscribes
- Email subscription → Browser user: shows status
- Browser user → Form validation: submits form
- Form validation → Browser user: shows validation
- Browser user → Form validation two: submits form
- Form validation two → Browser user: shows validation
- Browser user → To-do list: manages tasks
- To-do list → Browser user: shows tasks
- To-do list → To-do list: persists tasks
- Browser user → Notes app: creates notes
- Notes app → Browser user: shows notes
- Browser user → Stopwatch: controls timer
- Stopwatch → Browser user: shows elapsed time
- Browser user → Countdown timer: sets countdown
- Countdown timer → Browser user: shows remaining time
- Browser user → Mini calendar: views calendar
- Mini calendar → Browser user: shows date
- Browser user → Light and dark mode: changes theme
- Light and dark mode → Browser user: updates display
- Browser user → Toast notifications: triggers notification
- Toast notifications → Browser user: shows notification
- Browser user → Quote generator: requests quote
- Quote generator → Browser user: shows quote
- Browser user → Search clone: searches
- Search clone → Browser user: shows results
- Browser user → Image gallery: views images
- Image gallery → Browser user: shows gallery
- Browser user → Image search: searches images
- Image search → Unsplash API: fetches images
- Unsplash API → Image search: returns images
- Image search → Browser user: shows images
- Browser user → Text to voice: enters text
- Text to voice → Browser user: plays speech
- Browser user → Joke generator: requests joke