WGU D280
JavaScript Programming
Task 1: Angular Interactive World Map
Complete Reference Implementation and Rubric-Aligned Guide
Angular • TypeScript • SVG Events • World Bank API • GitLab
2026-2027 STUDY EDITION
Purpose: An original learning resource demonstrating one defensible way to meet the commonly reported D280 performance-assessment
requirements. Adapt all identifiers, screenshots, repository details, and explanations to your own work.
,WGU D280 JavaScript Programming - Task 1 Reference Guide
Important Use and Submission Notice
This document is a study guide and reference implementation. WGU may revise its rubric, starter repository, Angular
version, required screenshots, or submission process. The task instructions visible in the student portal are authoritative.
Compare every section of your current rubric against the final project before submission.
Academic integrity: Build, test, understand, and personalize the application yourself. Do not submit text, screenshots,
repository history, or code that you cannot explain. Replace all sample repository names and evidence with your own
authentic work.
What this guide delivers
• A complete Angular standalone architecture for an interactive SVG world map.
• Typed World Bank API service using HttpClient and RxJS.
• Event delegation that reads the selected SVG path ID without adding an Angular handler to every path.
• A responsive two-panel interface with loading, error, selection, hover, and keyboard states.
• A rubric crosswalk, verification plan, Git workflow, screenshot plan, and final checklist.
• Troubleshooting for common Angular, SVG, CORS, API, ID, and dependency-injection failures.
Scope assumption
The implementation assumes the official or course-provided SVG map contains one <path> per country and that each
path has a World Bank-compatible two-letter ISO code in its id attribute. The full course-supplied SVG is not reproduced
here; paste it into the marked location in the template. This preserves the exact geographic paths and IDs supplied for the
assessment.
Six displayed country properties
Field World Bank property Example
Country name name Kenya
Capital city capitalCity Nairobi
Region region.value Sub-Saharan Africa
Income level incomeLevel.value Lower middle income
Latitude latitude -1.27975
Longitude longitude 36.8126
2026-2027 Study Edition Page 2
, WGU D280 JavaScript Programming - Task 1 Reference Guide
1. Scenario and Solution Overview
You are acting as a front-end web developer. The requested single-page application lets a user select a country on an
SVG world map and immediately displays structural and economic data retrieved asynchronously from the World Bank
API. Angular updates the information panel without a full-page refresh.
Application pipeline
Step Application behavior Evidence to verify
1 Angular renders the SVG world map. Map is visible and scaled inside its panel.
2 User clicks, hovers, or focuses a country path. Selected or hovered path changes appearance.
3 Component reads the path ID as an ISO code. Browser console or component state shows the
code.
4 Service requests the World Bank country endpoint. Network tab shows an HTTP 200 request.
5 Service maps the nested JSON response. Typed CountryInfo object contains six fields.
6 Angular binding updates the data panel. Country details appear without page reload.
Architecture
User interaction
|
v
MapComponent template (SVG + details panel)
|
v
MapComponent TypeScript (selection and UI state)
|
v
WorldBankService (HTTP request + response mapping)
|
v
World Bank REST API
Key design decisions
• Use a standalone Angular application and provideHttpClient(), which is the current Angular configuration style.
• Keep network logic in a service and presentation logic in the component.
• Map the external response into a small internal CountryInfo interface so templates do not depend on raw nested JSON.
• Use event delegation on the parent SVG. A single handler can detect every path through event.target.
• Represent waiting, successful, empty, and failed requests explicitly. This prevents a blank panel from looking broken.
• Use CSS Grid for a desktop two-column layout and a single-column mobile layout.
2026-2027 Study Edition Page 3
JavaScript Programming
Task 1: Angular Interactive World Map
Complete Reference Implementation and Rubric-Aligned Guide
Angular • TypeScript • SVG Events • World Bank API • GitLab
2026-2027 STUDY EDITION
Purpose: An original learning resource demonstrating one defensible way to meet the commonly reported D280 performance-assessment
requirements. Adapt all identifiers, screenshots, repository details, and explanations to your own work.
,WGU D280 JavaScript Programming - Task 1 Reference Guide
Important Use and Submission Notice
This document is a study guide and reference implementation. WGU may revise its rubric, starter repository, Angular
version, required screenshots, or submission process. The task instructions visible in the student portal are authoritative.
Compare every section of your current rubric against the final project before submission.
Academic integrity: Build, test, understand, and personalize the application yourself. Do not submit text, screenshots,
repository history, or code that you cannot explain. Replace all sample repository names and evidence with your own
authentic work.
What this guide delivers
• A complete Angular standalone architecture for an interactive SVG world map.
• Typed World Bank API service using HttpClient and RxJS.
• Event delegation that reads the selected SVG path ID without adding an Angular handler to every path.
• A responsive two-panel interface with loading, error, selection, hover, and keyboard states.
• A rubric crosswalk, verification plan, Git workflow, screenshot plan, and final checklist.
• Troubleshooting for common Angular, SVG, CORS, API, ID, and dependency-injection failures.
Scope assumption
The implementation assumes the official or course-provided SVG map contains one <path> per country and that each
path has a World Bank-compatible two-letter ISO code in its id attribute. The full course-supplied SVG is not reproduced
here; paste it into the marked location in the template. This preserves the exact geographic paths and IDs supplied for the
assessment.
Six displayed country properties
Field World Bank property Example
Country name name Kenya
Capital city capitalCity Nairobi
Region region.value Sub-Saharan Africa
Income level incomeLevel.value Lower middle income
Latitude latitude -1.27975
Longitude longitude 36.8126
2026-2027 Study Edition Page 2
, WGU D280 JavaScript Programming - Task 1 Reference Guide
1. Scenario and Solution Overview
You are acting as a front-end web developer. The requested single-page application lets a user select a country on an
SVG world map and immediately displays structural and economic data retrieved asynchronously from the World Bank
API. Angular updates the information panel without a full-page refresh.
Application pipeline
Step Application behavior Evidence to verify
1 Angular renders the SVG world map. Map is visible and scaled inside its panel.
2 User clicks, hovers, or focuses a country path. Selected or hovered path changes appearance.
3 Component reads the path ID as an ISO code. Browser console or component state shows the
code.
4 Service requests the World Bank country endpoint. Network tab shows an HTTP 200 request.
5 Service maps the nested JSON response. Typed CountryInfo object contains six fields.
6 Angular binding updates the data panel. Country details appear without page reload.
Architecture
User interaction
|
v
MapComponent template (SVG + details panel)
|
v
MapComponent TypeScript (selection and UI state)
|
v
WorldBankService (HTTP request + response mapping)
|
v
World Bank REST API
Key design decisions
• Use a standalone Angular application and provideHttpClient(), which is the current Angular configuration style.
• Keep network logic in a service and presentation logic in the component.
• Map the external response into a small internal CountryInfo interface so templates do not depend on raw nested JSON.
• Use event delegation on the parent SVG. A single handler can detect every path through event.target.
• Represent waiting, successful, empty, and failed requests explicitly. This prevents a blank panel from looking broken.
• Use CSS Grid for a desktop two-column layout and a single-column mobile layout.
2026-2027 Study Edition Page 3
