From aae8ac2e1d118bb2cd5a0153d1615e4dadb0302f Mon Sep 17 00:00:00 2001 From: shenron Date: Sat, 14 Feb 2026 15:16:03 -0500 Subject: [PATCH] Docs: Simplify README to essential requirements only --- README.md | 137 +++++++----------------------------------------------- 1 file changed, 17 insertions(+), 120 deletions(-) diff --git a/README.md b/README.md index d98e0ec..a798012 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # D280 - JavaScript Programming -## WGU Project - Interactive World Map with Angular +## Interactive World Map with Angular **Student ID:** 010659768 @@ -29,151 +29,48 @@ Package Details: ## 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 +Interactive world map application built with Angular. Click any country on the map to display data from the World Bank API. + +## Six Data Properties Displayed + +1. Country Name +2. Capital City +3. Region +4. Income Level +5. Longitude (Custom Property 1) +6. Latitude (Custom Property 2) ## 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 +- **API:** World Bank API (https://api.worldbank.org) +- **No External Libraries:** Only Angular framework ## Getting Started -### Installation +### Install Dependencies ```bash npm install ``` -### Development Server +### Run Development Server ```bash ng serve ``` -Navigate to `http://localhost:4200/` - automatically redirects to `/map` +Navigate to `http://localhost:4200/` -### Build +### Build for Production ```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