Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ankush-nitjsr/weatherapp
Weather app that displays weather data of cities
https://github.com/ankush-nitjsr/weatherapp
css3 html5 javascript
Last synced: 8 days ago
JSON representation
Weather app that displays weather data of cities
- Host: GitHub
- URL: https://github.com/ankush-nitjsr/weatherapp
- Owner: Ankush-nitjsr
- Created: 2023-08-05T18:05:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-05T10:34:10.000Z (10 months ago)
- Last Synced: 2024-02-05T11:52:57.569Z (10 months ago)
- Topics: css3, html5, javascript
- Language: CSS
- Homepage: https://ankush-nitjsr.github.io/WeatherApp/
- Size: 1020 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather Display App
The Weather Web App is a simple web application built with Vanilla JS, CSS, and HTML. It fetches weather data from the openweathermap.org API, allowing users to search for cities and displays the searched cities' weather information based on temperature in increasing order. The UI is designed to be responsive, providing a seamless experience on various devices.
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Getting Started](#getting-started)
- [City Search](#city-search)
- [Responsive UI](#responsive-ui)
- [Contributing](#contributing)
- [License](#license)
## Features
1. **Weather Data Display:**
- Fetches weather data from openweathermap.org API.
- Displays temperature, weather conditions, and other relevant information.
2. **City Search:**
- Users can search for cities to get weather information.
- Searched cities' data is displayed on the screen based on temperature in increasing order.
3. **Responsive UI:**
- Designed with a responsive layout for optimal viewing on various devices.
- Ensures a seamless user experience on desktops, tablets, and mobile phones.
## Technologies Used
- **Frontend:**
- Vanilla JavaScript
- HTML5
- CSS3
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/Ankush-nitjsr/WeatherApp
```
## City Search
Open the index.html file in a web browser.
Enter the name of the city you want to search for in the provided input field.
Click the "Search" button.
The weather information for the searched city will be displayed on the screen.
## Responsive UI
The Weather Web App is designed with a responsive layout to adapt to different screen sizes. Whether you are using a desktop, tablet, or mobile phone, the UI will adjust for an optimal viewing experience.
## Contributing
Contributions are welcome! Please fork the repository and create a pull request.
## Screenshots
- **Initial Screen:**
- **Searched Results Screen:**
