├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── favicon.svg └── index.html ├── src ├── App.vue ├── assets │ ├── images │ │ ├── clear.jpg │ │ ├── clouds.jpg │ │ ├── error.jpg │ │ ├── fog.png │ │ ├── rain-1.png │ │ ├── rain-2.png │ │ ├── rain-5.png │ │ ├── rain-6.png │ │ ├── rain-bg.jpg │ │ ├── snow.jpg │ │ ├── snow2.png │ │ ├── snow3.png │ │ └── snow4.png │ └── logo.png ├── components │ ├── WeatherAnimate.vue │ ├── WeatherInfo.vue │ ├── WeatherMain.vue │ └── WeatherSearch.vue ├── main.js └── store │ └── store.js └── vue.config.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | # /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Doğukan BATAL 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![weather-app](https://user-images.githubusercontent.com/10329339/81182168-23765980-8fb6-11ea-8be9-464567cb0aa5.gif) 2 | 3 | 4 | # vue-weather-app 5 | Weather app using Vue.js, OpenWeatherMap. [Demo](https://dogukanbatal.github.io/vue-weather-app/) 6 | 7 | ## Project setup 8 | ``` 9 | npm install 10 | ``` 11 | ### API Key 12 | - Create Api Key from [OpenWeatherMap](https://openweathermap.org). 13 | - Enter the key on the line below in **src/store/store.js** 14 | ```javascript 15 | apiKey: "YOUR_API_KEY" 16 | ``` 17 | 18 | ### Compiles and hot-reloads for development 19 | ``` 20 | npm run serve 21 | ``` 22 | 23 | ### Compiles and minifies for production 24 | ``` 25 | npm run build 26 | ``` 27 | 28 | ### Lints and fixes files 29 | ``` 30 | npm run lint 31 | ``` 32 | 33 | ### Customize configuration 34 | See [Configuration Reference](https://cli.vuejs.org/config/). 35 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-weather-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "Weather app using Vue.js, OpenWeatherMap.", 6 | "author": "Doğukan Batal ", 7 | "license": "MIT", 8 | "scripts": { 9 | "serve": "vue-cli-service serve", 10 | "build": "vue-cli-service build", 11 | "lint": "vue-cli-service lint" 12 | }, 13 | "dependencies": { 14 | "axios": "^0.19.2", 15 | "core-js": "^3.6.4", 16 | "less-loader": "^6.0.0", 17 | "vue": "^2.6.11", 18 | "vue-feather-icons": "^5.0.0", 19 | "vuex": "^3.3.0" 20 | }, 21 | "devDependencies": { 22 | "@vue/cli-plugin-babel": "~4.3.0", 23 | "@vue/cli-plugin-eslint": "~4.3.0", 24 | "@vue/cli-service": "~4.3.0", 25 | "babel-eslint": "^10.1.0", 26 | "eslint": "^6.7.2", 27 | "eslint-plugin-vue": "^6.2.2", 28 | "vue-template-compiler": "^2.6.11" 29 | }, 30 | "eslintConfig": { 31 | "root": true, 32 | "env": { 33 | "node": true 34 | }, 35 | "extends": [ 36 | "plugin:vue/essential", 37 | "eslint:recommended" 38 | ], 39 | "parserOptions": { 40 | "parser": "babel-eslint" 41 | }, 42 | "rules": {} 43 | }, 44 | "browserslist": [ 45 | "> 1%", 46 | "last 2 versions", 47 | "not dead" 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 50 | 51 | 137 | -------------------------------------------------------------------------------- /src/assets/images/clear.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/images/clear.jpg -------------------------------------------------------------------------------- /src/assets/images/clouds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/images/clouds.jpg -------------------------------------------------------------------------------- /src/assets/images/error.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/images/error.jpg -------------------------------------------------------------------------------- /src/assets/images/fog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/images/fog.png -------------------------------------------------------------------------------- /src/assets/images/rain-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/images/rain-1.png -------------------------------------------------------------------------------- /src/assets/images/rain-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/images/rain-2.png -------------------------------------------------------------------------------- /src/assets/images/rain-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/images/rain-5.png -------------------------------------------------------------------------------- /src/assets/images/rain-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/images/rain-6.png -------------------------------------------------------------------------------- /src/assets/images/rain-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/images/rain-bg.jpg -------------------------------------------------------------------------------- /src/assets/images/snow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/images/snow.jpg -------------------------------------------------------------------------------- /src/assets/images/snow2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/images/snow2.png -------------------------------------------------------------------------------- /src/assets/images/snow3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/images/snow3.png -------------------------------------------------------------------------------- /src/assets/images/snow4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/images/snow4.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgknbtl/vue-weather/e19263e8fbad59c3b0e6e38e2d4c6ff45af25483/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/WeatherAnimate.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | 25 | -------------------------------------------------------------------------------- /src/components/WeatherInfo.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 33 | 34 | 52 | -------------------------------------------------------------------------------- /src/components/WeatherMain.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 36 | 37 | -------------------------------------------------------------------------------- /src/components/WeatherSearch.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 34 | 35 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import store from "./store/store"; 4 | 5 | 6 | Vue.config.productionTip = false; 7 | Vue.filter("round", function(value, decimals) { 8 | if (!value) { 9 | value = 0; 10 | } 11 | 12 | if (!decimals) { 13 | decimals = 0; 14 | } 15 | 16 | value = Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals); 17 | return value; 18 | }); 19 | 20 | new Vue({ 21 | store, 22 | render: (h) => h(App), 23 | }).$mount("#app"); 24 | -------------------------------------------------------------------------------- /src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Vuex from "vuex"; 3 | import axios from "axios"; 4 | 5 | Vue.use(Vuex); 6 | 7 | const store = new Vuex.Store({ 8 | state: { 9 | apiBase: "https://api.openweathermap.org/data/2.5/", 10 | apiKey: "YOUR_API_KEY", // Create Api Key from https://openweathermap.org 11 | defaultSearch: "istanbul", 12 | search: "", 13 | isError: false, 14 | weatherData: {}, 15 | }, 16 | getters: { 17 | getWeatherMain(state) { 18 | const { temp, feelsLike, description, icon, info } = state.weatherData; 19 | return { 20 | temp, 21 | feelsLike, 22 | description, 23 | info, 24 | icon, 25 | }; 26 | }, 27 | getWeatherInfo(state) { 28 | const { wind, clouds, humidity } = state.weatherData; 29 | return { 30 | wind, 31 | clouds, 32 | humidity, 33 | }; 34 | }, 35 | getWeatherCountry(state) { 36 | return state.weatherData.country; 37 | }, 38 | isSearched(state) { 39 | return state.search !== ""; 40 | }, 41 | getError(state) { 42 | return state.isError; 43 | }, 44 | }, 45 | mutations: { 46 | ["SET_SEARCH"](state, search) { 47 | state.search = search.toLowerCase(); 48 | }, 49 | ["SET_WEATHER_DATA"](state, data) { 50 | state.weatherData = data; 51 | }, 52 | ["SET_ERROR"](state, value) { 53 | state.isError = value; 54 | }, 55 | }, 56 | actions: { 57 | async fetchWeatherData({ commit, state }, search) { 58 | try { 59 | commit("SET_SEARCH", search); 60 | const response = await axios.get( 61 | `${state.apiBase}weather?q=${search}&units=metric&APPID=${state.apiKey}` 62 | ); 63 | const newWeatherData = { 64 | name: response.data.name, 65 | temp: response.data.main.temp, 66 | tempMin: response.data.main.temp_min, 67 | tempMax: response.data.main.temp_max, 68 | feelsLike: response.data.main.feels_like, 69 | description: response.data.weather[0].description, 70 | icon: response.data.weather[0].icon.substring(0, 2), 71 | info: response.data.weather[0].main, 72 | wind: response.data.wind.speed, 73 | humidity: response.data.main.humidity, 74 | clouds: response.data.clouds.all, 75 | country: response.data.sys.country, 76 | }; 77 | commit("SET_WEATHER_DATA", newWeatherData); 78 | commit("SET_ERROR", false); 79 | } catch (error) { 80 | console.log(error); 81 | commit("SET_ERROR", true); 82 | commit("SET_WEATHER_DATA", {}); 83 | } 84 | }, 85 | }, 86 | }); 87 | 88 | export default store; 89 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: "/vue-weather-app/", 3 | }; 4 | --------------------------------------------------------------------------------