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

npm install

Development Server

ng serve

Navigate to http://localhost:4200/ - automatically redirects to /map

Build

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