🌤 My Weather App 🌤

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

✨ Demo Link

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 provide realtime weather Data;
• unsplash.com offer free and beautiful background image for various weather condition.
• date-fns package make datetime data more accessible for end User.
• D3.js package give quickly load big csv data into memory feature;
• Suggestion package give suggestion while inputting;
• DataHub World Cities DataSet provide free world cities data-set;
• Real Favicon Generator help generate Favicon for this project.

🍩 Run Locally

Clone the project to your local machine and following following steps.

Step 1. Clone project locally.

git clone git@github.com:kelvin8773/odin-weather-app.git
cd odin-to-do-list

Step 2. Install dependencies

npm install

Step 3. Build the project

npm build

Step 4. run Locally

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

npm run dev

To continue build

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.

Author

👤 Kelvin Liang

• Website: https://medium.com/@Kelvin9877
• Twitter: @kelvin9877
• Github: @kelvin8773
• LinkedIn: @kelvin9877
• Email: 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 licensed.