Gallery
Share
Explore

Ajax and the Weather App

Learning Outcomes:
Write a web application showing the html, AJAX, and all other supporting code to extend the previous lab work book to make an app with an html page using a canvas to scroll real time updates of weather information for Toronto.
Outcome: Make a basic web application that uses the OpenWeatherMap API to fetch weather information for Toronto and display it in a scrolling fashion using a <canvas>.
Note: You'll need to sign up for a free account at
https://openweathermap.org/
⁠
to get an API key.
Let's start with the HTML code:

<!DOCTYPE html>
<html>
<head>
<title>Toronto Weather Updates</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Toronto Weather Updates</h1>
<canvas id="canvas"></canvas>

<script src="app.js"></script>
</body>
</html>

This is a simple HTML page with a <canvas> element and a reference to our JavaScript file, app.js.
Now let's write the JavaScript code:

$(document).ready(function() {
var ctx = document.getElementById("canvas").getContext("2d");
var x = canvas.width;
var apiKey = "your-api-key";
var apiUrl = "http://api.openweathermap.org/data/2.5/weather?q=Toronto,ca&units=metric&appid=" + apiKey;

setInterval(function() {
$.ajax({
url: apiUrl,
type: "GET",
success: function(data) {
var weatherInfo = "Temperature: " + data.main.temp + "°C, Humidity: " + data.main.humidity + "%";
x = canvas.width;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = "20px Arial";
ctx.fillText(weatherInfo, x, 50);
},
error: function(error) {
console.log(error);
}
});
}, 2000);

function animate() {
x--;
if (x < -canvas.width) {
x = canvas.width;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = "20px Arial";
ctx.fillText(weatherInfo, x, 50);
requestAnimationFrame(animate);
}
animate();
});

In this JavaScript code, we are using the setInterval function to make an AJAX request to the OpenWeatherMap API every 2 seconds (2000 milliseconds) to get the latest weather information for Toronto. This information is then displayed on the canvas, moving from right to left, creating a scrolling effect.
Please note:
Replace "your-api-key" with your actual OpenWeatherMap API key.
The OpenWeatherMap API is not served over HTTPS on the free tier. This means the application may not work if loaded from a file or a server that is served over HTTPS due to mixed content restrictions. To get around this, you could run a local development server using HTTP.
Make sure the app.js file is in the same directory as your HTML file or adjust the script src attribute accordingly.
This is a basic example and there are many ways you could extend this application. For example, you could display more weather information, style the text to make it more attractive, add error handling if the API request fails, and more.
Learning to work with APIs, AJAX, and the HTML canvas can open up a wide range of possibilities for dynamic, data-driven web applications.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.