Docs: Simplify README to essential requirements only

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:
+Interactive world map application built with Angular. Click any country on the map to display data from the World Bank API.
-- Visual interface with SVG map
+
-- Mouse event handling for country selection
+## Six Data Properties Displayed
-- World Bank API integration for country-specific data
+
-- Two-column layout displaying map and country information
+1. Country Name
-- Hover effects and click events on country paths
+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
+- **API:** World Bank API (https://api.worldbank.org)
-- **Version Control:** Gitea (git.n8lab.io)
+- **No External Libraries:** Only Angular framework
-- **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
+### 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