odin-weather-app

KO | EN

gitlite — search

#python #react #typescript #golang #android #deep-learning #linux #macos #java #windows #kubernetes #awesome-list #security #ios

odin-weather-app

(★ 9)

A vanilla JavaScript Project to practice ES6, MVC and OOP concepts.

odin-weather-app Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">  🌤 My Weather App 🌤 </h1>

[![Weather App ScreenShoot](https://raw.githubusercontent.com/kelvin8773/odin-weather-app/master/docs/weather-showcase.jpg)](https://weather.kelvinliang.cn/)

> Built with JavaScript, the app implements concepts such OOP (Object Oriented Programming), MVC (Model View Controllers) and factory functions.

### ✨ [Demo Link](https://weather.kelvinliang.cn/)

### main features
* Auto location
* Weather forecast for next 5 days
* World cities suggestion
* Unit Switch (C/F)
* Real world city background picture
* Fit to any screen
* Elegant UI

### Key Concepts 
* Promise (then/catch)
* Async/Await
* ES6 Module
* OOP (Object Oriented Programming)
* MVC (Model-View-Controller)
* Factory Function
 
### Tech Stacks
* HTML5/CSS
* Bootstrap 4
* Javascript
* Webpack 4

### Resources & Credit
* [OpenWeather API](https://openweathermap.org/) provide realtime weather Data;
* [unsplash.com](https://unsplash.com/) offer free and beautiful background image for various weather condition.
* [date-fns package](https://date-fns.org/) make datetime data more accessible for end User.
* [D3.js package](https://d3js.org/) give quickly load big csv data into memory feature;
* [Suggestion package](https://github.com/tristen/suggestions) give suggestion while inputting;
* [DataHub World Cities DataSet](https://datahub.io/core/world-cities) provide free world cities data-set;
* [Real Favicon Generator](https://realfavicongenerator.net/) help generate Favicon for this project.

## 🍩 Run Locally
Clone the project to your local machine and following following steps.

> Step 1. Clone project locally.
```bash
git clone git@github.com:kelvin8773/odin-weather-app.git
cd odin-to-do-list
```
> Step 2. Install dependencies
```bash
npm install
```
> Step 3. Build the project
```bash
npm build
```
> Step 4. run Locally
```bash
npm start 
```
> Setp 5. Open http://127.0.0.1:8080 using your favorite browser, if it doesn't open automatically.

## ☕️ Development Mode

After running the project locally, you can choose either **build once** or **continue build** to reflect changes from development.

> To build once
```bash
npm run dev
```
> To continue build
```bash
npm run watch
```

> Please Note - Once you are ready to deploy the project into production environment, you can run `npm build` to produce the production ready files (under `./dist` folder).

> And you do need to acquire your own API Keys (from above resources if needed) for development.

## 🤝 Contributing
Contributions, issues and feature requests are welcome!

Feel free to check the [issues page](https://github.com/kelvin8773/odin-weather-app/issues).

# Author

👤 **Kelvin Liang**

* Website: https://medium.com/@Kelvin9877
* Twitter: [@kelvin9877](https://twitter.com/kelvin9877)
* Github: [@kelvin8773](https://github.com/kelvin8773)
* LinkedIn: [@kelvin9877](https://linkedin.com/in/kelvin9877)
* Email: [kelvinliang@yandex.com](mailto:kelvinliang@yandex.com)

**I am available for hire/looking for next dev position.**

## 👋 Show your support

Give a ⭐️ if you like this project!

## 📝 License
This project is [MIT](./LICENSE) licensed.

odin-weather-app

odin-weather-app Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

odin-weather-app

odin-weather-app Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README