https://github.com/gregolive/weather-app
Search for the weather in your city.
https://github.com/gregolive/weather-app
css html javascript openweathermap-api
Last synced: about 2 months ago
JSON representation
Search for the weather in your city.
- Host: GitHub
- URL: https://github.com/gregolive/weather-app
- Owner: gregolive
- Created: 2022-03-09T11:09:34.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-13T07:32:05.000Z (over 4 years ago)
- Last Synced: 2025-02-05T16:40:16.859Z (over 1 year ago)
- Topics: css, html, javascript, openweathermap-api
- Language: JavaScript
- Homepage: https://gregolive.github.io/weather-app/
- Size: 5.19 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weathr
Search for realtime weather info in your city.
[Live demo](https://gregolive.github.io/weather-app/) 👈
## Functionality
- Enter a city name in the search form and submit to find realtime weather at that location
- A toggle in the navbar allows the user to display temperatures in either Celcius or Fahrenheit
- Fetch weather information via the Openweathermap API
- Javascript's async and await Promise keyword's were alongside the fetch function to asynchronously obtain the weather data
- Display gif of cat banging keyboard while weather data loads
- Display location's name, current local time, temperature, feels like temperature, weather (clear, scattered clouds, heavy rain, etc.), weather icon, wind (speed and direction), pressure, humidity, visibility, and local sunrise and sunset times
- Weather icons come via fontawesome's icon pack and the colors change depending on weather and times of day (day or night)
## Reflection
The Openweathermap API has good documentation and that made querying weather data straight forward. The main issue with the current implementation is that the API key is hard coded into the query function and visible. For a project being pushed to production this would not be acceptable and Git Guardian was quick to alert me when I pushed to Github.
The weather data is queried with an async function and the await keyword ensures that the function 'pauses' until a response is returned by the fetch. The response is then processed with Javascript's .json() function.
````
const queryWeatherData = async (query) => {
const response = await fetch(URL, { mode: 'cors' });
return response.json();
};
````
To me this async/await implementation is more intuitive than the typical Promise structure and allowed me to wrap my head around error tracing more easily.
## Screenshot
