Displaying local weather with Open-Meteo and Javascript

When I decided to start over with the site, I also wanted to eliminate PHP if I could. I have nothing against PHP — I've been using it for 25+ years and use it daily at my day job, I just wanted things to be as stripped down and "done by hand" as possible (does that make me a masochist? I'm starting to think it might 😂). Anyway... that meant I was going to have to rewrite my PHP weather script in... Javascript 😱

To start, the cron job to get the weather data stays the same:

*/15 * * * * /usr/bin/wget -O /some/file/path/weather.json "https://api.open-meteo.com/v1/forecast?latitude=XX.XXXX&longitude=-XX.XXXX&current=temperature_2m,relative_humidity_2m,is_day,rain,showers,snowfall,weather_code,wind_speed_10m,wind_direction_10m,wind_gusts_10m&temperature_unit=fahrenheit&wind_speed_unit=mph&precipitation_unit=inch&forecast_days=1" >/dev/null 2>&1

So all we have to do is parse the data, just like we did with PHP. Here's what my weather.js looks like:

/** Parse our weather.json file and output the current temperature */
async function parseWeather() {
	const url = '/weather.json';

	try {
		const response = await fetch(url);

		if (!response.ok) {
			throw new Error(`Response status: ${response.status}`);
		}

		const weather = await response.json();
		// console.log(weather);

		const is_day = weather.current.is_day;
		const weather_code = weather.current.weather_code;
		const current_temp = Math.round(weather.current.temperature_2m);
		const current_unit = weather.current_units.temperature_2m;
		// console.log(is_day);
		// console.log(weather_code);

		let output;
		if ( ( weather_code == 0 || weather_code == 1 ) && is_day == 1 ) {
			output = '';
		} else if ( ( weather_code == 0 || weather_code == 1 ) && is_day == 0 ) {
			output = '';
		} else if ( weather_code == 2 && is_day == 1 ) {
			output = '';
		} else if ( weather_code == 2 && is_day == 0 ) {
			output = '';
		} else if ( weather_code == 3 ) {
			output = '';
		} else if ( weather_code == 45 || weather_code == 48 ) {
			output = '';
		} else if ( weather_code == 51 || weather_code == 53 || weather_code == 55 ) {
			output = '';
		} else if ( weather_code == 56 || weather_code == 57 ) {
			output = '';
		} else if ( weather_code == 61 || weather_code == 80 ) {
			output = '';
		} else if ( weather_code == 63 || weather_code == 81 ) {
			output = '';
		} else if ( weather_code == 65 || weather_code == 82 ) {
			output = '';
		} else if ( weather_code == 66 || weather_code == 67 ) {
			output = '';
		} else if ( weather_code == 71 || weather_code == 73 || weather_code == 75 || weather_code == 77 || weather_code == 85 || weather_code == 86 ) {
			output = '';
		} else if ( weather_code == 95 ) {
			output = '';
		} else if ( weather_code == 96 || weather_code == 99 ) {
			output = '';
		}

		document.getElementById('local-weather').innerHTML = output + ' ' + current_temp + current_unit;
	} catch (error) {
		console.error(error.message);
	}
}

parseWeather();

This code is what outputs the little icon and temperature that you see in the footer of the site.

Here's what the code does:

1. Grabs the weather.json file and reads it
2. Decodes the JSON
3. Checks for daytime
4. Checks the weather code and outputs an icon from Weather Icons (I'm no longer using Font Awesome either, at least for now). A list of the weather codes and what they mean is available at the bottom of the API docs page.
5. Gets the current temperature
6. Outputs the icon and temperature

Pretty straightforward and basic, and a really quick and easy way to get my local weather conditions and temperature and show them on the site. If you decide to use any of this on your site, let me know on Mastodon!