https://github.com/pranav-jadhav09/weather-app
Web application that provides real-time weather information. The application is developed using HTML, CSS and JavaScript.
https://github.com/pranav-jadhav09/weather-app
api css3 html5 javascript weather-api weather-app weather-forecast
Last synced: 7 months ago
JSON representation
Web application that provides real-time weather information. The application is developed using HTML, CSS and JavaScript.
- Host: GitHub
- URL: https://github.com/pranav-jadhav09/weather-app
- Owner: Pranav-Jadhav09
- License: gpl-3.0
- Created: 2024-01-25T11:24:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-06T06:06:31.000Z (over 1 year ago)
- Last Synced: 2025-01-22T01:36:39.259Z (9 months ago)
- Topics: api, css3, html5, javascript, weather-api, weather-app, weather-forecast
- Language: JavaScript
- Homepage: https://pranav-jadhav09.github.io/Weather-app/
- Size: 467 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://awesome.re)
[](https://twitter.com/Pranav_Jadhav09)
## Weather App
Explore accurate and real-time weather information for cities around the world with Weatherio. Get current weather conditions, 5-day forecasts, wind speed, sunrise and sunset times, air quality, humidity, and more. Stay informed about weather changes effortlessly. Visit Weatherio now!
## Functionality
- Users can search for a city to view its weather information.
- The application fetches real-time weather data from the OpenWeather API.
- The current weather section displays the temperature, weather icon, and description.
- The 5-day forecast shows the weather conditions for the next five days.
- The hourly forecast provides wind speed and temperature details for the current day.
- Sunrise and sunset times are displayed for the selected city.
- Additional weather details, including air quality, humidity, visibility, feels like temperature, and atmospheric pressure, are shown.
- The application is responsive and adapts to different screen sizes.
## Getting Started
### Prerequisites
- Modern web browser (Chrome, Firefox, Safari, etc.).
- Internet connection to fetch weather data from the OpenWeather API.
### Installation
1. Clone the repository or download the project files to your local machine.
2. Open `index.html` in your web browser.
## Project Structure
The project is organized into multiple files for better code organization and separation of concerns:
- `index.html`: The main HTML file that contains the user interface.
- `style.css`: The CSS file that defines the styling for the web application.
- `api.js`: Contains functions to interact with the OpenWeather API.
- `module.js`: Contains utility functions related to weather data conversion and calculations.
- `app.js`: Contains the main application logic, including event handling and rendering.
- `route.js`: Defines the application routes and handles URL hash changes.
## HTML
### index.html
The main HTML file contains the structure of the Weather Website. It consists of different sections, including a search bar, current weather display, forecast section, and additional weather details. The page is designed to be responsive and adapts to different screen sizes.
## CSS
### style.css
The `style.css` file contains all the CSS styles used to create a visually appealing and user-friendly interface. It defines global variables, reset styles, and custom styles for various components like buttons, cards, headers, and footers. The CSS is organized using class selectors for specific components and follows a mobile-first approach with media queries for responsive design.
## JavaScript
### api.js
The `api.js` file contains functions to interact with the OpenWeather API. It includes functions to fetch weather data based on city names and coordinates using asynchronous JavaScript (async/await) and the Fetch API. The API key required for accessing the OpenWeather API is stored as a constant.
### module.js
The `module.js` file defines utility functions related to weather data conversion and calculations. It includes functions to convert temperature units from Kelvin to Celsius and Fahrenheit, convert wind speed units, and calculate air quality index (AQI) level and its corresponding message.
### app.js
The `app.js` file contains the main application logic. It defines functions to update the weather information on the user interface based on the data fetched from the API. This file handles event listeners for user interactions, such as searching for a city, updating the UI for current weather and forecast, and displaying error messages when necessary.
### route.js
The `route.js` file manages the application's routing system. It defines routes for different sections of the website and handles URL hash changes. The routes are associated with specific functions in `app.js` to render the appropriate content based on the user's actions.
## Cloning Project
This project require some prequesites and dependenscies to be installed, you can view it online using this [demo](https://modern-weather-app.vercel.app). or you can find the instructions below
> To get a local copy, follow these simple steps :
### Installation
1. Clone the repo
```sh
git clone https://github.com/Pranav-Jadhav09/Weather-app
```
2. Install Dependencies
```bash
npm install
```
3. Run start script
```bash
npm run start
```
## License
This project is licensed under [GNU GENERAL PUBLIC LICENSE](./LICENSE).