D280 Example Walkthrough

Step-by-Step Tutorial:

1. Prepare the SVG File:

   • Download an SVG file of a world map for your project. You can use an SVG file of the USA as an example.
   • Save the SVG file in your project directory.

2. Create an Angular Project:

   • Open Visual Studio Code and open a new integrated terminal.
   • Ensure you have Node.js installed by running node -v.
   • Install Angular CLI if not already installed by running npm install -g @angular/cli.
   • Create a new Angular project using Angular CLI by running ng new project-name --skip-tests --style=css.

3. Navigate to the Source Directory:

   • Focus on the src directory where you will be modifying and creating new files for your project.

4. Run the Angular Server:

   • Change directory to your project folder using cd project-name.
   • Start the Angular server by running ng serve -o to open the project in a new browser window.

5. Create an Angular Component:

   • Generate a new Angular component using Angular CLI by running ng generate component component-name.

6. Set Up Routing:

   • Define routes in the app-routing.module.ts file to specify which component to render for each route.

7. Display the SVG File in Your Angular Project:

   • Add the SVG file to your Angular project and display it in the component's HTML file.

8. Create an API Service:

   • Generate an Angular service using Angular CLI by running ng generate service service-name.
   • Implement methods in the service to fetch weather data from an API.

9. Interact with the API in Your Component:

   • Use the service methods in your component to fetch weather data based on the selected state from the SVG map.

10. Display Weather Information:

    • Update the component's HTML file to show weather details such as temperature, humidity, wind speed, and an icon based on the selected state.

11. Styling and Final Touches:

    • Apply CSS styling to arrange the map and weather details side by side.
    • Add hover effects to highlight states on the map.
    • Ensure the layout is responsive and user-friendly.

12. Testing and Clean Up:

    • Test the functionality by hovering over different states on the map.
    • Remove any unnecessary console logs or debug statements.

13. Completion and Submission:

    • Ensure your Angular project meets the requirements specified for the D280 performance assessment.
    • Verify that the map displays correctly and the weather information updates dynamically based on the selected state.

By following these steps, you should be able to create an Angular project similar to the one demonstrated in the video, incorporating an SVG map and displaying weather information based on user interactions.