Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/subramanyaks/angular-weather-app

Weather App using Angular and openweathermap api
https://github.com/subramanyaks/angular-weather-app

angular angular-material angularjs openweatherapi openweathermap-api openweathermap-apis openweathermapapi weather-app

Last synced: about 2 months ago
JSON representation

Weather App using Angular and openweathermap api

Host: GitHub
URL: https://github.com/subramanyaks/angular-weather-app
Owner: SubramanyaKS
Created: 2023-07-25T14:19:42.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-02-19T02:09:51.000Z (11 months ago)
Last Synced: 2024-06-01T06:48:23.714Z (7 months ago)
Topics: angular, angular-material, angularjs, openweatherapi, openweathermap-api, openweathermap-apis, openweathermapapi, weather-app
Language: TypeScript
Homepage:
Size: 626 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

# WeatherApp

A simple weather app built with Angular js and utilizes the OpenWeatherMap API to fetch and display weather information for a given location.

#### API

The Application Programming Interface is a set of rules and regulations and standards that allows software programs to interact with each other. It acts as a middleman between two applications, allowing them to exchange data and information.

## Technology Used
* Angular
* Node Js
* Angular Material

## Features

- The application features a robust search functionality for user-friendly access.
- Ensuring a seamless experience, the UI is responsive and adapts to various devices and screen sizes.
- Users can expect precise and reliable results when utilizing the search feature.
- Current weather conditions, encompassing temperature, humidity, wind speed, and a detailed weather description, are prominently displayed.
- The application efficiently retrieves weather data by accepting a manually entered city name.
- The application has both dark theme and light theme

## Pre Requisite

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.6.

* Install ![git](https://img.shields.io/badge/GIT-E44C30?style=for-the-badge&logo=git&logoColor=white)
* Installation of [![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)](https://nodejs.org/en/) is mandatory with ![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white)
* Login in to [Openweathermap](https://openweathermap.org/api) api website to get your `API key`

## Getting Started

To run this project locally, follow these steps:

1. Clone the repository:

```bash
git clone https://github.com/SubramanyaKS/Angular-Weather-App.git

```
2. Navigate to the project directory:

```bash
cd Angular-Weather-App
```
3. Install dependencies:

```bash
npm install

```
4. Obtain an API key from OpenWeatherMap and replace `YOUR_API_KEY` in the code with your actual API key.

5. Start the development server:
```bash
ng serve
```

6. Open your browser and navigate to `http://localhost:4200/` to view the app.

## Contribution

We welcome contributions! If you'd like to contribute to React-News-App, please follow our [Contribution Guidelines](https://github.com/SubramanyaKS/Angular-Weather-App/blob/main/CONTRIBUTING.md).

## Screenshot

![Light Mode](./screenshot/angular-weather-light.PNG)
![Dark Mode](./screenshot/angular-weather-dark.PNG)

## Credits

- [Openweathermap API](https://openweathermap.org/api)
- [Fontawesome Icons](https://fontawesome.com/v6/icons)
- [Angular CLI ](https://angular.io/cli)

## Feedback

If you have any feedback, please reach out to me at [email]([email protected])

If you like this don't forget to ⭐ the repository.