https://github.com/anuva312/weatherapp-devchallenges
Weather App! Developed as a part of devChallenges FrontEnd Developer Challenge.
https://github.com/anuva312/weatherapp-devchallenges
css devchallenges front-end-development javascript react weather-app
Last synced: 11 months ago
JSON representation
Weather App! Developed as a part of devChallenges FrontEnd Developer Challenge.
- Host: GitHub
- URL: https://github.com/anuva312/weatherapp-devchallenges
- Owner: anuva312
- Created: 2021-12-05T14:41:44.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-21T13:26:15.000Z (about 2 years ago)
- Last Synced: 2025-02-09T08:19:15.629Z (about 1 year ago)
- Topics: css, devchallenges, front-end-development, javascript, react, weather-app
- Language: JavaScript
- Homepage: https://keen-goldwasser-9930f9.netlify.app/
- Size: 369 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Country
Solution for the [Weather App Challenge](https://legacy.devchallenges.io/challenges/mM1UIenRhK808W8qmLWv) from [Devchallenges.io](https://legacy.devchallenges.io).
## Table of Contents
- [Challenge](#challenge)
- [Solution](#solution)
- [Demo](#demo)
- [Built With](#built-with)
- [How to Use](#how-to-use)
- [Acknowledgements](#acknowledgements)
## Challenge
Challenge: Create a weather app using an API. Use Front-end libraries like React or Vue.
Fulfill user stories below:
- User story: I can see city weather as default, preferably my current location
- User story: I can search for city
- User story: I can see weather of today and the next 5 days
- User story: I can see the date and location of the weather
- User story: I can see according to image for each type of weather
- User story: I can see the min and max degree each day
- User story: I can see wind status and wind direction
- User story: I can see humidity percentage
- User story: I can see a visibility indicator
- User story: I can see the air pressure number
- User story(optional): I can request my current location weather
- User story(optional): I can convert temperature in Celcius to Fahrenheit and vice versa
## Solution
### Demo
Find the site in action [here](https://keen-goldwasser-9930f9.netlify.app/)!
#### Main Page
#### Search location
#### Farenheit View
#### Mobile Views
Mobile View Part 1
Mobile View Part 2
Mobile View Part 3
### Built With
- [React](https://reactjs.org/)
## How To Use
To clone and run this application, you'll need [Git](https://git-scm.com) and [yarn](https://yarnpkg.com/). From your command line:
```bash
# Clone this repository
$ git clone https://github.com/anuva312/WeatherApp-devChallenges
# Install dependencies
$ yarn install
# Run the app
$ yarn start
```
## Acknowledgements
- [Weather API](https://www.metaweather.com/api/)
- [Loader](https://loading.io/css/)
- [Progress Bar](https://jsfiddle.net/c0481hkp/9/)