Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/teekaytech/weather-app
A weather app that fetches from the OpenWeatherMap API to allow users to search for and view the forecast in cities worldwide. Built with JavaScript & Webpack.
https://github.com/teekaytech/weather-app
es6 javascript netlify-deployment sass-framework webpack
Last synced: 28 days ago
JSON representation
A weather app that fetches from the OpenWeatherMap API to allow users to search for and view the forecast in cities worldwide. Built with JavaScript & Webpack.
- Host: GitHub
- URL: https://github.com/teekaytech/weather-app
- Owner: teekaytech
- License: mit
- Created: 2020-09-22T08:34:42.000Z (over 4 years ago)
- Default Branch: development
- Last Pushed: 2021-05-10T16:35:26.000Z (over 3 years ago)
- Last Synced: 2024-12-06T02:10:17.497Z (28 days ago)
- Topics: es6, javascript, netlify-deployment, sass-framework, webpack
- Language: JavaScript
- Homepage: https://wappjs.netlify.app/
- Size: 4.59 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Weather-App
> This is a Weather App built with JavaScript & Webpack. The project comes at the end of the Asynchronous Javascript and APIs section of my Javascript course. It tests my knowledge about asynchronous communication with promises or async/await and when to use them. I used the Open Weather API to consume the weather details. I also processed the data fetched from the API to render in both Celcius & Fahrenheit. The background changes based on the atmospheric condition of the location provided.
Homepage
![Landing page](src/assets/images/screenshots/first.png)Cloudy Weather Page
![cloud page](src/assets/images/screenshots/second.png)Rainy Weather Page
![Rain page](src/assets/images/screenshots/third.png)Clear Weather Page
![Clear page](src/assets/images/screenshots/forth.png)## Built With
- HTML
- SASS
- JavaScript (ES6)
- Webpack
- Open Weather API
- Netlify## Live Demo
[![Netlify Status](https://api.netlify.com/api/v1/badges/d9522c2e-5f11-412b-95a0-8f2d136c8cbc/deploy-status)](https://app.netlify.com/sites/wappjs/deploys)
## Getting Started
To get a local copy up and running follow these simple example steps.
- On the project GitHub page, navigate to the main page of the repository [this page](https://github.com/teekaytech/Weather-App.git).
- Under the repository name, locate and click on a green button named `Code`.
- Copy the project URL as displayed.
- If you're running Windows Operating System, open your command prompt. On Linux, Open your terminal.
- Change the current working directory to the location where you want the cloned directory to be made. Leave as it is if the current location is where you want the project to be.
- Type `git clone`, and then paste the URL you copied in Step 3.
`$ git clone https://github.com/teekaytech/Weather-App.git` Press Enter key
- Press Enter. Your local copy will be created.Please Note that you must have github installed on your PC, this can be done [here](https://gist.github.com/derhuerst/1b15ff4652a867391f03).
### Prerequisites
Web browser (Chrome/Firefox)
### Usage
Click on the live demo link and peruse the app.
### Making Changes
- `npm install` to install the dependencies and packages
- `npm start` to test the app after changes were made## Author
👤 **Taofeek Olalere**
- Github: [@teekaytech](https://github.com/teekaytech)
- Twitter: [@ola_lere](https://twitter.com/ola_lere)
- Linkedin: [olaleretaofeek](https://linkedin.com/in/olaleretaofeek)
- Portfolio: [Olalere Taofeek](https://taofeekolalere.me/)## 🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check the [issues page](issues/).
## Show your support
Give a ⭐️ if you like this project!
## Acknowledgments
- [Microverse](https://.microverse.org/)
- [The Odin Project (Project Spec)](https://www.theodinproject.com/courses/javascript/lessons/weather-app)## 📝 License
This project is [MIT](lic.url) licensed.