d280-javascript/README.md

# D280 - JavaScript Programming
## WGU Project - Interactive World Map with Angular

**Student ID:** 010659768

## Angular Version Information

```
Angular CLI       : 21.1.4
Angular           : 21.1.4
Node.js           : 24.13.1
Package Manager   : npm 11.8.0
Operating System  : linux x64

Package Details:
- @angular/build            : 21.1.4
- @angular/cli              : 21.1.4
- @angular/common           : 21.1.4
- @angular/compiler         : 21.1.4
- @angular/compiler-cli     : 21.1.4
- @angular/core             : 21.1.4
- @angular/forms            : 21.1.4
- @angular/platform-browser : 21.1.4
- @angular/router           : 21.1.4
- rxjs                      : 7.8.2
- typescript                : 5.9.3
- vitest                    : 4.0.18
```

## Project Description

This project develops an interactive world map using the Angular framework. The application features:
- Visual interface with SVG map
- Mouse event handling for country selection
- World Bank API integration for country-specific data
- Two-column layout displaying map and country information
- Hover effects and click events on country paths

## Technical Requirements

- **Framework:** Angular 21.1.4
- **Language:** JavaScript/TypeScript
- **IDE:** VS Code / IntelliJ Ultimate
- **Version Control:** Gitea (git.n8lab.io)
- **Branch:** Working (for all development commits)
- **No External Libraries:** Only Angular framework used

## Project Architecture

### Phase A: Repository & Configuration ✅
- Angular project initialization
- README with Student ID and version information
- All required configuration files (tsconfig.*.json, angular.json, package*.json)
- SVG map asset integration

### Phase D: Routing Configuration ✅
- Root path (/) auto-redirects to /map
- MapComponent routing
- Angular Router implementation

### Phase C/G: World Bank API Integration ✅
- WorldBankService with HttpClient
- Service method accepting 2-letter country codes
- API endpoint: https://api.worldbank.org/v2/country/{code}
- Component method triggering service calls

### Phase E: UI Layout ✅
- Two-column responsive design
- Column 1: Interactive SVG world map
- Column 2: Country data display panel
- Loading, error, and placeholder states
- Professional styling with card layout

### Phase F: SVG Interactivity ✅
- MapSvgComponent for inline SVG rendering
- Event binding on country path elements
- Click handlers extracting country codes
- Hover effects with CSS transitions
- Dynamic API calls on country selection

## Data Displayed (6 Properties)

1. **Country Name** - Official country name from World Bank
2. **Capital** - Capital city
3. **Region** - Geographic region classification
4. **Income Level** - Economic income level classification
5. **Longitude** *(Custom Property 1)* - Geographic longitude coordinate
6. **Latitude** *(Custom Property 2)* - Geographic latitude coordinate

## Features

- **Interactive Map:** Click any country on the SVG map
- **Real-time Data:** Fetches current country data from World Bank API
- **Visual Feedback:** Hover effects show clickable countries
- **Error Handling:** Graceful error messages for API failures
- **Responsive Design:** Mobile-friendly two-column layout
- **Clean Architecture:** Separation of concerns with services and components

## Getting Started

### Installation
```bash
npm install
```

### Development Server
```bash
ng serve
```
Navigate to `http://localhost:4200/` - automatically redirects to `/map`

### Build
```bash
ng build
```
Build artifacts will be stored in the `dist/` directory.

## Git Repository

**Repository:** https://git.n8lab.io/Shenron/d280-javascript  
**Branch:** Working

### Commit History

Each project phase has a dedicated commit:
1. Phase A: Initial project setup with Angular 21.1.4
2. Phase A: Add Student ID and SVG map asset
3. Phase D: Configure routing with root redirect to /map
4. Phase C: Create World Bank API service with HttpClient
5. Phase E: Implement two-column UI layout with SVG map and data display
6. Phase F: Add SVG interactivity with event binding for country selection

## Project Structure

```
d280-javascript/
├── src/
│   ├── app/
│   │   ├── map/                    # Main map component
│   │   ├── map-svg/                # Interactive SVG component
│   │   ├── services/
│   │   │   └── world-bank.ts       # API service
│   │   ├── app.config.ts           # App configuration with HttpClient
│   │   ├── app.routes.ts           # Routing configuration
│   │   └── app.ts                  # Root component
│   ├── assets/
│   │   └── map-image.svg           # SVG world map (1.2MB)
│   ├── index.html
│   └── main.ts
├── angular.json
├── package.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.spec.json
└── README.md
```

## Implementation Notes

- **Angular Standalone Components:** Project uses Angular 21 standalone component architecture
- **RxJS Observables:** API calls handled with Observable pattern
- **SVG Manipulation:** Dynamic SVG loading and event handler attachment
- **TypeScript Interfaces:** Type-safe data structures for API responses
- **CSS Variables:** Consistent styling with custom properties
- **Error Boundaries:** Comprehensive error handling throughout

## Future Enhancements

- Add search functionality for countries
- Implement country comparison feature
- Add more World Bank data visualizations
- Cache API responses for performance
- Add unit and integration tests

---

**Developed by:** Shenron (Student ID: 010659768)  
**Course:** D280 - JavaScript Programming  
**Institution:** Western Governors University