cmkl/fall-2025/sen-103/Labs/Lab6/Instructions.txt

72 lines
2.8 KiB
Plaintext

SEN-103 Programming Multi-Module Applications
Lab 6 Practice Assignment
Calling REST APIs from HTML using JavaScript
Overview
In this assignment, you will adapt the demonstration examples to call the OpenMeteo API and display the results.
Instructions
Download the demonstration HTML files for this week (Week7Demos.zip Download Week7Demos.zip). Unzip. Copy Example4.html to a new file called Lab6.html. Edit the comment at the top to indicate that this is a submission for SEN-103 Lab 6, and to include your nickname as the author.
Create a button that says “CMKL Forecast”. Then create a JavaScript function that will call the https://api.open-meteo.com/v1/forecast REST API endpoint to request seven days of daily maximum and minimum temperatures for the area around CMKL. (See Lab 5 instructions for more details.) When the API call returns (if the result is successful), display the result in a table as follows:
CMKL 7 Day Forecast
Date Max Temp (Celcius) Min Temp (Celcius)
2024-04-08 37.7 28.4
2024-04-09 37.4 27.4
2024-04-10 36.7 26.3
2024-04-11 38.4 26.7
2024-04-12 36.3 28.1
2024-04-13 36.3 28.4
2024-04-14 37.1 28.5
Note that HTML has a set of tags for creating tables: <table>...</table>, <tr>...</tr> and <td>...</td>.
Once you have this working, expand your example to include a drop-down list of locations. You can use the following location list. You should not show the lat/long in the drop-down list. You will need to make corresponding arrays of coordinates and time zones.
Boston 42.364506, 71.038887 America/New_York
Tokyo 35.652832, 139.839478 Asia/Tokyo
Hobart (Tasmania) -42.882137, 147.327194 Australia/Hobart
Los Angeles 34.052235, -118.243683 America/Los_Angeles
Mexico City 19.432608, -99.133209 America/Mexico_City
Prague 50.075539, 14.437800 Europe/Prague
Novobirsk (Russia) 55.008354, 82.935730 Asia/Novobirsk
Change your button to say “7 Day Forecast”. When the user clicks on this button, find whatever location has been selected in the drop down list and use that information for your forecast API call. Display the results in the same format.
Upload your modified HTML file to Canvas.