|
1 | 1 | "use strict"; |
2 | 2 |
|
3 | | -//function... |
4 | | -fetch("https://api.artic.edu/api/v1/artworks") |
5 | | - .then((response) => { |
6 | | - if (!response.ok) { |
7 | | - throw new Error(`Failed with status ${response.status}`); |
8 | | - } |
9 | | - return response.json(); |
10 | | - }) |
11 | | - .then((data) => { |
12 | | - console.log(data); |
13 | | - }) |
14 | | - .catch((error) => { |
15 | | - console.error(error); |
16 | | - }); |
| 3 | +// DECLARING VARIABLES |
| 4 | +const cityInput = document.getElementById("city-input"); |
| 5 | +const weatherCodeIllustrationEl = document.getElementById( |
| 6 | + "weather-code-illustration" |
| 7 | +); |
| 8 | +const temperatureEl = document.getElementById("temperature"); |
| 9 | +const cityEl = document.getElementById("city"); |
| 10 | +const countryEl = document.getElementById("country"); |
| 11 | +const submitBtn = document.getElementById("submit-btn"); |
| 12 | + |
| 13 | +// EVENT LISTENER |
| 14 | +submitBtn.addEventListener("click", (e) => { |
| 15 | + e.preventDefault(); |
| 16 | + |
| 17 | + const lowerCaseTrimmedUserInput = cityInput.value.trim(); |
| 18 | + const encodedCityInput = encodeURIComponent(lowerCaseTrimmedUserInput); |
| 19 | + |
| 20 | + fetchCoordinatesFromUsersCityName(encodedCityInput); |
| 21 | +}); |
| 22 | + |
| 23 | +//CALLING APIS WITH ASYNC FUNCTIONS |
| 24 | +//Open Meteo Geocoding API: https://open-meteo.com/en/docs/geocoding-api |
| 25 | +async function fetchCoordinatesFromUsersCityName(city) { |
| 26 | + try { |
| 27 | + const response = await fetch( |
| 28 | + `https://geocoding-api.open-meteo.com/v1/search?name=${city}` |
| 29 | + ); |
| 30 | + const data = await response.json(); |
| 31 | + //Usually many cities share the same name - for the purposes of this app, I only want to display the first result from the open meteo API: |
| 32 | + const firstResult = data.results[0]; |
| 33 | + const cityName = firstResult.name; |
| 34 | + const countryName = firstResult.country; |
| 35 | + const latitude = firstResult.latitude; |
| 36 | + const longitude = firstResult.longitude; |
| 37 | + fetchTemperatureAndWeathercode(latitude, longitude); |
| 38 | + displayCityNameAndCountry(cityName, countryName); |
| 39 | + } catch (error) { |
| 40 | + console.error("An error occurred - couldn't fetch city data", error); |
| 41 | + } |
| 42 | +} |
| 43 | + |
| 44 | +// Open Meteo API: https://open-meteo.com/en/docs |
| 45 | +async function fetchTemperatureAndWeathercode(latitude, longitude) { |
| 46 | + try { |
| 47 | + const response = await fetch( |
| 48 | + `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true&temperature_2m&weather_code` |
| 49 | + ); |
| 50 | + const data = await response.json(); |
| 51 | + const temperature = data.current_weather.temperature; |
| 52 | + const weatherCode = data.current_weather.weathercode; |
| 53 | + displayWeatherCodeIllustration(weatherCode); |
| 54 | + displayTemperature(temperature); |
| 55 | + } catch (error) { |
| 56 | + console.error("An error occurred", error); |
| 57 | + throw error; |
| 58 | + } |
| 59 | +} |
| 60 | + |
| 61 | +//HELPER FUNCTIONS |
| 62 | +function displayCityNameAndCountry(city, country) { |
| 63 | + cityEl.textContent = city; |
| 64 | + countryEl.textContent = country; |
| 65 | +} |
| 66 | + |
| 67 | +function displayTemperature(temperature) { |
| 68 | + temperatureEl.textContent = `${temperature}°C`; |
| 69 | +} |
| 70 | + |
| 71 | +function displayWeatherCodeIllustration(weathercode) { |
| 72 | + console.log( |
| 73 | + `Weather Code: ${weathercode} | `, |
| 74 | + "logic pending in this function for displaying weather illustrations based on the weather codes in the comments at the bottom of the JS file" |
| 75 | + ); |
| 76 | +} |
| 77 | +//Weather codes from Open Meteo API: https://open-meteo.com/en/docs |
| 78 | +// WMO Weather interpretation codes (WW) |
| 79 | +// Code Description |
| 80 | +// 0 Clear sky |
| 81 | +// 1, 2, 3 Mainly clear, partly cloudy, and overcast |
| 82 | +// 45, 48 Fog and depositing rime fog |
| 83 | +// 51, 53, 55 Drizzle: Light, moderate, and dense intensity |
| 84 | +// 56, 57 Freezing Drizzle: Light and dense intensity |
| 85 | +// 61, 63, 65 Rain: Slight, moderate and heavy intensity |
| 86 | +// 66, 67 Freezing Rain: Light and heavy intensity |
| 87 | +// 71, 73, 75 Snow fall: Slight, moderate, and heavy intensity |
| 88 | +// 77 Snow grains |
| 89 | +// 80, 81, 82 Rain showers: Slight, moderate, and violent |
| 90 | +// 85, 86 Snow showers slight and heavy |
| 91 | +// 95 * Thunderstorm: Slight or moderate |
| 92 | +// 96, 99 * Thunderstorm with slight and heavy hail |
0 commit comments