Activity 10
Correct Answers
1. How can a user interact with the canvas using a mouse? ✅ By adding event listeners
2. What API is used to get a user's latitude and longitude? ✅ GeoLocation API
3. Which HTML5 tag is used to define a container for graphics that can be drawn with JavaScript? ✅ <canvas>
4. In the <canvas> element, which JavaScript method is used to get the drawing context? ✅ canvas.getContext("2d")
5. How do you draw a line on the canvas? ✅ Use beginPath() and lineTo()
6. What does the clearRect() method do? ✅ Clears part of the canvas
7. What is the purpose of the arc() method? ✅ Draw a circle or curve
8. What does the GeoLocation API provide? ✅ User's geographical location
9. Which attribute allows a user to play or pause audio? ✅ controls
10. What makes a webpage more accessible for screen readers? ✅ Semantic HTML
Instructions:
Set Up Your Development Environment
- Open your preferred code editor (e.g., VS Code, Sublime Text, or Notepad++).
- Create an HTML file for your geolocation project.
Implement Geolocation Retrieval
- Use the navigator.geolocation.getCurrentPosition() method to retrieve the user's latitude and longitude.
- Display the retrieved coordinates on the webpage.
- Display the address on your webpage.
Handle Errors
- Implement error handling for cases such as:
- User denies location access.
- Location data is unavailable.
- Request times out.
Enhance UI/UX
- Add a button that allows users to refresh their location.
Final Output
- Your webpage should:
- Show the latitude and longitude of the user.
- Display the user's address.
- Update the map location dynamically upon request.
Geolocation with Geoapify
Click the button to get your location.