Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/s-shemmee/weather-app
This is a weather app created with HTML, CSS, and vanilla JavaScript. Users can search for weather conditions of any city using SheCodes Weather API and OpenWeatherMap API, view current weather and 5-day forecast, hourly forecasts, and detect their current position.
https://github.com/s-shemmee/weather-app
html html-css-javascript javascript netlify shecodes vanilla-javascript weather weather-api weather-app weather-forecast
Last synced: 13 days ago
JSON representation
This is a weather app created with HTML, CSS, and vanilla JavaScript. Users can search for weather conditions of any city using SheCodes Weather API and OpenWeatherMap API, view current weather and 5-day forecast, hourly forecasts, and detect their current position.
- Host: GitHub
- URL: https://github.com/s-shemmee/weather-app
- Owner: s-shemmee
- License: gpl-3.0
- Created: 2023-03-10T23:30:11.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-08T23:08:24.000Z (10 months ago)
- Last Synced: 2024-04-09T00:41:00.414Z (10 months ago)
- Topics: html, html-css-javascript, javascript, netlify, shecodes, vanilla-javascript, weather, weather-api, weather-app, weather-forecast
- Language: JavaScript
- Homepage: https://weather-app-shemmee.netlify.app
- Size: 1.62 MB
- Stars: 12
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Weather App
This is a web app developed as a final project for SheCodes Plus using HTML, CSS, and Vanilla JavaScript. It is hosted on Netlify and utilizes both SheCodes Weather API and OpenWeatherMap API to fetch weather data. The app allows users to search for the weather conditions of any city in the world and provides current weather conditions, a 5-day forecast, and hourly forecasts. Additionally, the app can detect the user's current position if they allow it.
# Features
- Users can search for weather conditions of any city in the world.
- The app displays the current weather conditions, including temperature and weather description.
- The app provides a 5-day forecast for the searched city, including hourly forecasts.
- The app can detect the user's current position if they allow it.
- The app fetches weather data using both SheCodes Weather API and OpenWeatherMap API.
# Technologies & Tools Used
- HTML
- CSS
- Vanilla JavaScript
- VS Code
- SheCodes Weather API
- OpenWeatherMap API
- Netlify
# Installation and Usage
To use this app, you can either clone this repository or download the zip file.
To clone the repository, run the following command in your terminal:
```bash
git clone https://github.com/s-shemmee/Weather-App.git
```
Once you have cloned the repository, open the `index.html` file in your browser to use the app.
To use the app, simply type the name of the city you want to search for in the search bar and press the Enter key. The app will display the current weather conditions and the 5-day forecast for the searched city.
Alternatively, you can allow the app to detect your current position and display the weather conditions for your location.
To toggle between Celsius and Fahrenheit temperature units, click the "Convert to Fahrenheit" or "Convert to Celsius" link below the temperature display.
# Demo
A live demo of the weather app can be found at [LINK TO LIVE DEMO](https://weather-app-shemmee.netlify.app).
# Credits
The weather app was created by [s-shemmee](https://github.com/s-shemmee) as a final project for the SheCodes Plus workshop.
- The app uses the [SheCodes weather API](https://www.shecodes.io/learn/apis/weather) and [OpenWeatherMap API](https://openweathermap.org) to retrieve weather data.
- The illustrations used in the app are [3D casual life](https://icons8.com/illustrations/style--3d-casual-life).
# License
This project is licensed under the MIT license.