# sanishpoudel/weather-app architecture

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

- Interactive diagram: https://gitdiagram.com/sanishpoudel/weather-app
- Repository: https://github.com/sanishpoudel/weather-app

## Overview

Weather-App is a browser weather lookup: a user enters a city, the app requests a seven-day forecast from Visual Crossing, then renders current conditions and the remaining days. The current and weekly views share weekday formatting and condition-icon selection. The excerpts show the request and rendering calls; the README documents weather checking but no additional capabilities. The graph omits build tooling and does not infer behavior from the unsampled template or styles.

Main entry points: [`src/index.js`](https://github.com/sanishpoudel/weather-app/blob/main/src/index.js) (Search and fetch), [`src/displayToday.js`](https://github.com/sanishpoudel/weather-app/blob/main/src/displayToday.js) (Current conditions), [`src/otherDays.js`](https://github.com/sanishpoudel/weather-app/blob/main/src/otherDays.js) (Weekly forecast), [`src/getIcon.js`](https://github.com/sanishpoudel/weather-app/blob/main/src/getIcon.js) (Icon selection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workflow["Search workflow"]
  node_app["Search and fetch<br/>[index.js]"]
end

subgraph group_views["Forecast views"]
  node_today["Current conditions<br/>[displayToday.js]"]
  node_week["Weekly forecast<br/>[otherDays.js]"]
end

subgraph group_formatting["Display helpers"]
  node_icon["Icon selection<br/>[getIcon.js]"]
  node_weekday["Weekday formatting<br/>[getWeekday.js]"]
end

node_user(("User"))
node_weather_service["Visual Crossing"]

node_user -->|"searches city"| node_app
node_app -->|"fetches forecast"| node_weather_service
node_app -->|"renders today"| node_today
node_app -->|"renders week"| node_week
node_today -->|"selects icon"| node_icon
node_today -->|"formats day"| node_weekday
node_week -->|"selects icons"| node_icon
node_week -->|"formats days"| node_weekday

click node_app "https://github.com/sanishpoudel/weather-app/blob/main/src/index.js"
click node_today "https://github.com/sanishpoudel/weather-app/blob/main/src/displayToday.js"
click node_week "https://github.com/sanishpoudel/weather-app/blob/main/src/otherDays.js"
click node_icon "https://github.com/sanishpoudel/weather-app/blob/main/src/getIcon.js"
click node_weekday "https://github.com/sanishpoudel/weather-app/blob/main/src/getWeekday.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_app,node_user toneBlue
class node_today,node_week toneAmber
class node_icon,node_weekday toneMint
class node_weather_service toneIndigo
```

## Components

### Search workflow

- [Search and fetch](https://github.com/sanishpoudel/weather-app/blob/main/src/index.js): `src/index.js`

### Forecast views

- [Current conditions](https://github.com/sanishpoudel/weather-app/blob/main/src/displayToday.js): `src/displayToday.js`
- [Weekly forecast](https://github.com/sanishpoudel/weather-app/blob/main/src/otherDays.js): `src/otherDays.js`

### Display helpers

- [Icon selection](https://github.com/sanishpoudel/weather-app/blob/main/src/getIcon.js): `src/getIcon.js`
- [Weekday formatting](https://github.com/sanishpoudel/weather-app/blob/main/src/getWeekday.js): `src/getWeekday.js`

### Other components

- **User**
- **Visual Crossing**

## Connections

- User → Search and fetch: searches city (evidence: `src/index.js`)
- Search and fetch → Visual Crossing: fetches forecast (evidence: `src/index.js`)
- Search and fetch → Current conditions: renders today (evidence: `src/index.js`)
- Search and fetch → Weekly forecast: renders week (evidence: `src/index.js`)
- Current conditions → Icon selection: selects icon (evidence: `src/displayToday.js`)
- Current conditions → Weekday formatting: formats day (evidence: `src/displayToday.js`)
- Weekly forecast → Icon selection: selects icons (evidence: `src/otherDays.js`)
- Weekly forecast → Weekday formatting: formats days (evidence: `src/otherDays.js`)