Interactive World Map Project

Student Name: Maria Chauhan Student ID: 010657723

About The Project

This project is an interactive world map feature developed for a state government website. The application uses Angular, SVG, and the World Bank API to create a dynamic, data-driven web experience. Each country on the map highlights on mouse events and displays detailed country information retrieved from the API.

The project demonstrates practical use of JavaScript, TypeScript, Angular frameworks, and APIs in a real-world scenario.

Built With:

-Angular

-JavaScript

-TypeScript

Course Information

JavaScript Programming introduces programming with JavaScript and teaches how to enhance websites using frameworks, assets, and APIs.

Competencies

-Writes Basic Scripts – Create scripts using JavaScript to accomplish tasks.

-Uses Existing Frameworks – Utilize frameworks and web content to meet stakeholder requirements.

-Adds APIs and Web Services – Integrate APIs and web services to provide dynamic data features.

Project Scenario

As a developer for a state government office, your task was to create a website providing information on each country in the world. Key features include:

-Display a world map using an SVG interface

-Convert the SVG map into an interactive Angular component

-Integrate with the World Bank API to show country-specific information

-Implement event-driven UI interactions

-Use Angular routing for navigation and default URL redirection

Requirements:

Utilize GitLab for project management

-Provide a world map visual interface using SVG

-Fetch and display six key properties for each country from the World Bank API

-Create a two-column HTML layout: one for the map, one for country data

-Convert the SVG map into an interactive Angular component with event binding

-Implement an Angular service using HttpClient for API calls