├── .env
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── DayForecastTab.vue
    │   ├── SearchBar.vue
    │   └── Weather.vue
    ├── main.js
    ├── router.js
    ├── service.js
    ├── store.js
    └── views
    │   └── Home.vue
└── tests
    └── unit
        └── example.spec.js


/.env:
--------------------------------------------------------------------------------
1 | VUE_APP_ROOT_API='https://api.apixu.com/v1/forecast.json?key=b26ac48768b64da2aae125932190705&q='


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # shak-vue-weatherapp
 2 | https://shakweather.netlify.com/
 3 | 
 4 | ## Project setup
 5 | ```
 6 | npm install
 7 | ```
 8 | 
 9 | ### Compiles and hot-reloads for development
10 | ```
11 | npm run serve
12 | ```
13 | 
14 | ### Compiles and minifies for production
15 | ```
16 | npm run build
17 | ```
18 | 
19 | ### Run your tests
20 | ```
21 | npm run test
22 | ```
23 | 
24 | ### Lints and fixes files
25 | ```
26 | npm run lint
27 | ```
28 | 
29 | ### Run your unit tests
30 | ```
31 | npm run test:unit
32 | ```
33 | 
34 | ### Customize configuration
35 | See [Configuration Reference](https://cli.vuejs.org/config/).
36 | "#simple vue weather app" 
37 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "shak-vue-weatherapp",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "test:unit": "vue-cli-service test:unit"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "^4.3.1",
12 |     "bootstrap-vue": "^2.0.0-rc.19",
13 |     "core-js": "^2.6.5",
14 |     "dotenv": "^8.0.0",
15 |     "jquery": "^3.4.1",
16 |     "popper.js": "^1.15.0",
17 |     "vue": "^2.6.10",
18 |     "vue-router": "^3.0.3",
19 |     "vuetify": "^1.5.14",
20 |     "vuex": "^3.0.1"
21 |   },
22 |   "devDependencies": {
23 |     "@vue/cli-plugin-babel": "^3.7.0",
24 |     "@vue/cli-plugin-unit-jest": "^3.7.0",
25 |     "@vue/cli-service": "^3.7.0",
26 |     "@vue/test-utils": "1.0.0-beta.29",
27 |     "babel-core": "7.0.0-bridge.0",
28 |     "babel-jest": "^23.6.0",
29 |     "material-design-icons-iconfont": "^5.0.1",
30 |     "node-sass": "^4.9.0",
31 |     "sass-loader": "^7.1.0",
32 |     "vue-template-compiler": "^2.5.21"
33 |   },
34 |   "postcss": {
35 |     "plugins": {
36 |       "autoprefixer": {}
37 |     }
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions"
42 |   ],
43 |   "jest": {
44 |     "moduleFileExtensions": [
45 |       "js",
46 |       "jsx",
47 |       "json",
48 |       "vue"
49 |     ],
50 |     "transform": {
51 |       "^.+\\.vue$": "vue-jest",
52 |       ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
53 |       "^.+\\.jsx?$": "babel-jest"
54 |     },
55 |     "transformIgnorePatterns": [
56 |       "/node_modules/"
57 |     ],
58 |     "moduleNameMapper": {
59 |       "^@/(.*)$": "<rootDir>/src/$1"
60 |     },
61 |     "snapshotSerializers": [
62 |       "jest-serializer-vue"
63 |     ],
64 |     "testMatch": [
65 |       "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
66 |     ],
67 |     "testURL": "http://localhost/",
68 |     "watchPlugins": [
69 |       "jest-watch-typeahead/filename",
70 |       "jest-watch-typeahead/testname"
71 |     ]
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shxk/simple-vue-weather-app/54bfa108aa175af926b064802b19eed622360c77/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>shak vue weather app</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but shak vue weather app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="scss">
 8 | #app {
 9 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 |   text-align: center;
13 |   color: #2c3e50;
14 | }
15 | #nav {
16 |   padding: 30px;
17 |   a {
18 |     font-weight: bold;
19 |     color: #2c3e50;
20 |     &.router-link-exact-active {
21 |       color: #42b983;
22 |     }
23 |   }
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shxk/simple-vue-weather-app/54bfa108aa175af926b064802b19eed622360c77/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/DayForecastTab.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-container class="displaytab">
 4 |         <v-tabs fixed-tabs slider-color="blue">
 5 |           <v-tab @click.prevent="setTabCurrent(true)">Current</v-tab>
 6 |           <v-tab @click.prevent="setTabCurrent(false)">7 Day Forecast</v-tab>
 7 |         </v-tabs>
 8 |     </v-container>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import store from '@/store.js'
14 | export default {
15 |   name: 'DayForecastTab',
16 |   data(){
17 |     return{
18 |     }
19 |   },
20 |   methods:{
21 |     setTabCurrent:function(payload){
22 |       store.commit('setTabFlag', payload)
23 |     }
24 |   },
25 | }  
26 | </script>
27 | 
28 | 
29 | <style scoped lang="scss">
30 |   .displaytab{
31 |     margin-top: -50px;
32 |   }
33 | </style>


--------------------------------------------------------------------------------
/src/components/SearchBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <v-container>
 4 |         <v-layout >
 5 |           <v-flex xs12 sm12 md12 lg6 offset-lg3 offset-md1>
 6 |             <v-text-field
 7 |             solo 
 8 |             label="Search Location" 
 9 |             v-model="searchValue" 
10 |             @keyup.enter.native="searchLocation(searchValue)"
11 |             append-icon="search"
12 |             @click:append="searchLocation(searchValue)"
13 |             >
14 |             </v-text-field>
15 |           </v-flex>
16 |         </v-layout>
17 |       </v-container>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | import store from '@/store.js'
23 | import service from '@/service.js'
24 | export default {
25 |   name: 'SearchBar',
26 |   data(){
27 |     return{
28 |       searchValue: null,
29 |     }
30 |   },
31 |   methods:{
32 |     searchLocation(payload){
33 |       store.dispatch('searchLocation',payload);
34 |     }
35 |   }
36 | }
37 | </script>
38 | 
39 | <style scoped lang="scss">
40 |   .searchbar{
41 |     width: 50%;
42 |   }
43 | 
44 | </style>


--------------------------------------------------------------------------------
/src/components/Weather.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="weatherCache!=null">
 3 |     <v-container class="areaInfo">
 4 |         <h4>{{weatherCache.location.name}}</h4>
 5 |         <h5>{{weatherCache.location.region}}</h5>
 6 |         <h5>{{weatherCache.location.country}}</h5>
 7 |     </v-container>
 8 | 
 9 |     <v-container class="currentCondition" v-if="isTabFlagCurrent">
10 |       <img v-bind:src="weatherCache.current.condition.icon" />
11 |       <h3>{{weatherCache.current.feelslike_c}}°c</h3>
12 |       <h3>{{weatherCache.current.condition.text}} </h3>
13 |     </v-container>
14 | 
15 |     <v-container v-if="!isTabFlagCurrent">
16 |         <b-row name>
17 |           <b-col v-for="day in weatherCache.forecast.forecastday" :key="day.id">
18 |               <img v-bind:src="day.day.condition.icon" />
19 |               <p>Avg Temp: {{day.day.avgtemp_c}}°c</p>
20 |               <p>{{day.day.condition.text}}</p>
21 |               <p>{{day.date}}</p>
22 |           </b-col>
23 |         </b-row>
24 |     </v-container>
25 |  
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | import store from '@/store.js'
31 | export default {
32 |   name: 'Weather',
33 |   data(){
34 |     return{
35 |       weatherForecast: null,
36 |     }
37 |   },
38 |   mounted(){
39 |     store.commit('setTabFlag',true)
40 |     store.dispatch('searchLocation', 'London')
41 |   },
42 |   computed:{
43 |     weatherCache:() => store.getters['getWeatherCache'],
44 |     isTabFlagCurrent: () => store.getters['getTabFlag'],
45 |   }
46 | }
47 | </script>
48 | 
49 | <style scoped lang="scss">
50 |   .currentWeatherIcon {
51 |     width: 10%;
52 |     height: 10%;
53 |   }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import bootstrap from 'bootstrap-vue'
 6 | import Vuetify from 'vuetify'
 7 | import 'bootstrap/dist/css/bootstrap.css'
 8 | import 'bootstrap-vue/dist/bootstrap-vue.css'
 9 | import 'vuetify/dist/vuetify.min.css'
10 | import 'material-design-icons-iconfont/dist/material-design-icons.css'
11 | 
12 | Vue.use(bootstrap)
13 | Vue.use(Vuetify, {
14 |   iconfont: 'md'
15 | })
16 | Vue.config.productionTip = false
17 | 
18 | new Vue({
19 |   router,
20 |   store,
21 |   render: h => h(App)
22 | }).$mount('#app')
23 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './views/Home.vue'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       name: 'home',
12 |       component: Home
13 |     }
14 |   ]
15 | })
16 | 


--------------------------------------------------------------------------------
/src/service.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     getWeather(payload){
3 |         return fetch(process.env.VUE_APP_ROOT_API + payload)
4 |         .then(res => res.json());
5 |     } 
6 | }
7 | 
8 | 
9 |     


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import service from '@/service.js'
 4 | 
 5 | 
 6 | Vue.use(Vuex)
 7 | 
 8 | export default new Vuex.Store({
 9 |   state: {
10 |     isTabFlagCurrent: null,
11 |     locationSearch: null,
12 |     weatherCache: null,
13 |   },
14 |   mutations: {
15 |     setTabFlag: (state, payload) => state.isTabFlagCurrent = payload,
16 |     setlocationSearch:(state,payload) => state.locationSearch = payload,
17 |     setWeatherCache: (state, payload) => state.weatherCache = payload
18 |   },
19 |   actions: {
20 |     async searchLocation({ getters, commit, dispatch }, payload) {
21 |       let wF = await service.getWeather(payload + '&days=7');
22 |       commit('setWeatherCache', wF)
23 |     }
24 |   },
25 |   getters:{
26 |     getTabFlag: (state) => state.isTabFlagCurrent,
27 |     getlocationSearch: (state) => state.locationSearch,
28 |     getWeatherCache: (state) => state.weatherCache,
29 |   }
30 | })
31 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img class="homepageLogo" src ="https://www.iosicongallery.com/icons/weather-2017-06-19/512.png"/>
 4 |     <SearchBar/>
 5 |     <DayForecastTab/>
 6 |     <Weather/>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import Weather from '@/components/Weather.vue'
12 | import SearchBar from '@/components/SearchBar.vue'
13 | import DayForecastTab from '@/components/DayForecastTab.vue'
14 | 
15 | export default {
16 |   name: 'home',
17 |   components: {
18 |     Weather,
19 |     SearchBar,
20 |     DayForecastTab
21 |   },
22 |   mounted(){
23 |   }
24 | }
25 | </script>
26 | <style scoped lang="scss">
27 | .homepageLogo {
28 |   padding-top: 1%;
29 |   width: 20%;
30 | }
31 | </style>
32 | 
33 | 


--------------------------------------------------------------------------------
/tests/unit/example.spec.js:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from '@vue/test-utils'
 2 | import Weather from "@/components/Weather.vue";
 3 | 
 4 | /* Example Test: 
 5 | 
 6 | describe('Weather.vue', () => {
 7 |   it('renders props.msg when passed', () => {
 8 |     const msg = 'new message'
 9 |     const wrapper = shallowMount(Weather, {
10 |       propsData: { msg }
11 |     });
12 |     expect(wrapper.text()).toMatch(msg)
13 |   })
14 | })
15 | 
16 | */
17 | 


--------------------------------------------------------------------------------