79 lines
1.8 KiB
Markdown
79 lines
1.8 KiB
Markdown
# D280 - JavaScript Programming
|
|
## WGU Project - Interactive World Map with Angular
|
|
|
|
**Student ID:** [TO BE PROVIDED]
|
|
|
|
## 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
|
|
|
|
## 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)
|
|
|
|
## Project Structure
|
|
|
|
- Phase A: Repository & Configuration
|
|
- Phase B/E: UI Layout (two-column design)
|
|
- Phase C/G: World Bank API Integration
|
|
- Phase D: Angular Routing Configuration
|
|
- Phase F: SVG Interactivity & Event Binding
|
|
|
|
## Data Displayed (6 Properties)
|
|
|
|
1. Country Name
|
|
2. Country Capital
|
|
3. Country Region
|
|
4. Income Level
|
|
5. [Custom Property 1]
|
|
6. [Custom Property 2]
|
|
|
|
## Getting Started
|
|
|
|
```bash
|
|
npm install
|
|
ng serve
|
|
```
|
|
|
|
Navigate to `http://localhost:4200/`
|
|
|
|
## Build
|
|
|
|
```bash
|
|
ng build
|
|
```
|
|
|
|
Build artifacts will be stored in the `dist/` directory.
|