Our app is designed to be responsive and uses postcode to generate a map and accurate sunrise-sunset timings, as well as a comprehensive daily and 5-day weather forecast. To gather this information, our app integrates three APIs: open-meteo.com, postcodes.io, and thunderforest.com.
- User Stories
- Acceptance Criteria
- APIs Used
- Installation
- Technologies Used
- App Flow
- Authors
- Contributing
- License
As a user of the TD Weather App, I want the following features:
-
Core Stories
- See an interesting mashup of weather data based on postcode.
- Input postcode to update the displayed weather information.
- View the app on all of devices.
-
Stretch Stories
- See a loading indicator when data is being fetched.
- Receive error messages when an incorrect postcode is entered.
- The app should query at least three APIs using the fetch function.
- The content displayed in the app should be dynamically generated with JavaScript.
- The user journey should be clearly defined and documented in the README.md file.
- The app should have a responsive, mobile-first design.
- Accessibility should be considered to ensure the app is usable by a wide range of users.
The TD Weather App utilizes the following APIs:
-
Weather API: open-meteo.com: This API provides weather data based on the user's local postcode. It returns information such as temperature, weather conditions, sunrise, wind speed, etc.
-
Postcode API: postcodes.io: This API allows the app to convert the user's input postcode into geographic coordinates (latitude and longitude). The coordinates are used to fetch weather data for the specific location.
-
Map API: thunderforest.com: This API allows the app to convert the user's input postcode into an image of a map for the specific location.
To run the TD Weather App locally, follow these steps:
- Clone the repository:
git clone https://github.com/your-username/weather-forecast-project.git
- Navigate to the project directory:
cd weather-forecast-project
- Open the
index.html
file in your preferred web browser.
That's it! You can now use the TD Weather App to retrieve weather information based on your local postcode.
A live demo of the TD Weather is available here.
The TD Weather App is built using the following technologies:
- HTML: Markup language for creating the structure of the app.
- CSS: Styling language for designing the visual appearance of the app.
- JavaScript: Programming language for implementing dynamic functionality and API interactions.
- When the app loads, the user is presented with a search input field and a submit button.
- The user enters their postcode in the search input field.
- Upon submitting the postcode, the app queries the postcode API to convert the postcode into geographic coordinates (latitude and longitude).
- The app then uses the coordinates to fetch weather data from the weather API.
- The received weather data is dynamically displayed in the app, including temperature, weather conditions, humidity, wind speed, etc.
- The user can input a new postcode at any time to fetch weather information for a different location.
- The app updates the displayed weather information accordingly.
- If there are any errors during the API requests or data retrieval, the app displays appropriate error messages to the user.
This project was created and maintained by Deepashri Dali and Tess Phillips Please feel free to contact us if you have any questions or suggestions regarding the TD Weather App.
Contributions to the TD Weather App are welcome! If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request.
The TD Weather App is open source and released under the MIT License. You are free to use, modify, and distribute the code as needed.