{"id":22783205,"url":"https://github.com/gregolive/weather-app","last_synced_at":"2026-05-11T02:08:46.198Z","repository":{"id":183623019,"uuid":"467893078","full_name":"gregolive/weather-app","owner":"gregolive","description":"Search for the weather in your city.","archived":false,"fork":false,"pushed_at":"2022-03-13T07:32:05.000Z","size":5444,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-05T16:40:16.859Z","etag":null,"topics":["css","html","javascript","openweathermap-api"],"latest_commit_sha":null,"homepage":"https://gregolive.github.io/weather-app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gregolive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-03-09T11:09:34.000Z","updated_at":"2022-03-12T09:29:58.000Z","dependencies_parsed_at":"2023-07-26T05:13:14.041Z","dependency_job_id":null,"html_url":"https://github.com/gregolive/weather-app","commit_stats":null,"previous_names":["gregolive/weather-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregolive%2Fweather-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregolive%2Fweather-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregolive%2Fweather-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregolive%2Fweather-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gregolive","download_url":"https://codeload.github.com/gregolive/weather-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246334430,"owners_count":20760644,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","javascript","openweathermap-api"],"created_at":"2024-12-11T22:07:19.933Z","updated_at":"2026-05-11T02:08:41.157Z","avatar_url":"https://github.com/gregolive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Weathr\n\nSearch for realtime weather info in your city.\n\n[Live demo](https://gregolive.github.io/weather-app/) 👈\n\n## Functionality\n\n- Enter a city name in the search form and submit to find realtime weather at that location\n- A toggle in the navbar allows the user to display temperatures in either Celcius or Fahrenheit\n- Fetch weather information via the Openweathermap API\n- Javascript's \u003ccode\u003easync\u003c/code\u003e and \u003ccode\u003eawait\u003c/code\u003e Promise keyword's were alongside the \u003ccode\u003efetch\u003c/code\u003e function to asynchronously obtain the weather data\n- Display gif of cat banging keyboard while weather data loads\n- 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\n- Weather icons come via fontawesome's icon pack and the colors change depending on weather and times of day (day or night)\n\n\n## Reflection\n\nThe 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.\n\nThe weather data is queried with an \u003ccode\u003easync\u003c/code\u003e function and the \u003ccode\u003eawait\u003c/code\u003e keyword ensures that the function 'pauses' until a response is returned by the \u003ccode\u003efetch\u003c/code\u003e. The response is then processed with Javascript's \u003ccode\u003e.json()\u003c/code\u003e function.\n\n````\nconst queryWeatherData = async (query) =\u003e {\n  const response = await fetch(URL, { mode: 'cors' });\n  return response.json();\n};\n````\n\nTo 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.\n\n## Screenshot\n\n\u003cimg src=\"./screenshot.jpg\" alt=\"weathr app screenshot\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregolive%2Fweather-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgregolive%2Fweather-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregolive%2Fweather-app/lists"}