├── .gitignore
├── LICENSE
├── README.md
├── components-ex-2
    ├── .babelrc
    ├── README.md
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   ├── Server
    │   │   │   ├── Server.vue
    │   │   │   ├── ServerDetails.vue
    │   │   │   └── Servers.vue
    │   │   └── Shared
    │   │   │   ├── Footer.vue
    │   │   │   └── Header.vue
    │   └── main.js
    └── webpack.config.js
├── components-start
    ├── .babelrc
    ├── .gitignore
    ├── README.md
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   ├── Footer.vue
    │   │   ├── Header.vue
    │   │   └── ServerList.vue
    │   └── main.js
    └── webpack.config.js
├── directive-exercise
    ├── .babelrc
    ├── README.md
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   └── main.js
    └── webpack.config.js
├── dynamic-components
    ├── .babelrc
    ├── README.md
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   ├── Blue.vue
    │   │   ├── Green.vue
    │   │   └── Red.vue
    │   └── main.js
    └── webpack.config.js
├── filters-mixins-exercise
    ├── .babelrc
    ├── README.md
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── main.js
    │   └── textCounter.js
    └── webpack.config.js
├── forms-exercise
    ├── .babelrc
    ├── README.md
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   ├── FullName.vue
    │   │   └── SignUp.vue
    │   └── main.js
    └── webpack.config.js
├── game-project
    ├── app.js
    ├── css
    │   ├── app.css
    │   └── foundation.min.css
    └── index.html
├── quotes-project
    ├── README.md
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   ├── Footer.vue
    │   │   ├── ProgressBar.vue
    │   │   ├── Quote.vue
    │   │   ├── QuoteCreation.vue
    │   │   └── QuotesList.vue
    │   └── main.js
    └── webpack.config.js
└── stock-trader
    ├── .babelrc
    ├── README.md
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
        ├── App.vue
        ├── assets
        │   └── logo.png
        ├── components
        │   ├── features
        │   │   ├── portfolio
        │   │   │   ├── Funds.vue
        │   │   │   ├── Item.vue
        │   │   │   └── Portfolio.vue
        │   │   └── stocks
        │   │   │   ├── Item.vue
        │   │   │   └── List.vue
        │   └── layouts
        │   │   ├── Header.vue
        │   │   └── Home.vue
        ├── main.js
        ├── repositories
        │   └── stocks.js
        ├── routes.js
        └── store
        │   ├── actions.js
        │   ├── modules
        │       ├── portfolio.js
        │       └── stocks.js
        │   └── store.js
    └── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | *.log
4 | *dist/


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Fabrício Ferrari de Campos
 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 | # Learning Vue.js
 2 | 
 3 | This repo is a collection of projects to practice and learn Vue.js.
 4 | 
 5 | ## Project List
 6 | 
 7 | The projects are explained briefly below.
 8 | 
 9 | **For Udemy Course** [https://www.udemy.com/vuejs-2-the-complete-guide/](https://www.udemy.com/vuejs-2-the-complete-guide/)
10 | 
11 | * `game-project`: a simple player vs monster game to practice the foundation of Vue.js;
12 | * `components-start`: refactoring a Vue.js app with components;
13 | * `components-ex-2`: communication though components using a new Vue instance;
14 | * `dynamic-components`: dynamically switching components using the `component`tag;
15 | * `quotes-project`: project to practice components and slots concepts;
16 | * `forms-exercise`: exercise to practice handling with `v-model` and creating a custom input;
17 | * `directive-exercise`: exercise to create a directive to handle with click event;
18 | * `filters-mixins-exercise`: filters and mixins practice;
19 | * `stock-trader`: stock trader final project.
20 | 


--------------------------------------------------------------------------------
/components-ex-2/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["es2015", { "modules": false }]
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/components-ex-2/README.md:
--------------------------------------------------------------------------------
 1 | # vue-cli
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | ```
17 | 
18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
19 | 


--------------------------------------------------------------------------------
/components-ex-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Vue Components</title>
 6 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |     </div>
11 |     <script src="/dist/build.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/components-ex-2/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cli",
 3 |   "description": "A Vue.js project",
 4 |   "author": "Maximilian Schwarzmüller <mblacky0@gmail.com>",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
 8 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "^3.3.7",
12 |     "vue": "^2.0.1"
13 |   },
14 |   "devDependencies": {
15 |     "babel-core": "^6.0.0",
16 |     "babel-loader": "^6.0.0",
17 |     "babel-preset-es2015": "^6.0.0",
18 |     "cross-env": "^3.0.0",
19 |     "css-loader": "^0.25.0",
20 |     "file-loader": "^0.9.0",
21 |     "vue-loader": "^9.7.0",
22 |     "webpack": "2.1.0-beta.25",
23 |     "webpack-dev-server": "2.1.0-beta.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/components-ex-2/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <AppHeader/>
 4 |         <hr>
 5 |         <div class="row">
 6 |             <Servers/>
 7 |             <ServerDetails/>
 8 |         </div>
 9 |         <hr>
10 |         <AppFooter/>
11 |     </div>
12 | </template>
13 | 
14 | <script>
15 |     import AppHeader from './components/Shared/Header.vue';
16 |     import AppFooter from './components/Shared/Footer.vue';
17 |     import Servers from './components/Server/Servers.vue';
18 |     import ServerDetails from './components/Server/ServerDetails.vue';
19 | 
20 |     export default {
21 |         components: {
22 |             AppHeader,
23 |             Servers,
24 |             ServerDetails,
25 |             AppFooter
26 |         }
27 |     }
28 | </script>
29 | 
30 | <style>
31 | 
32 | </style>
33 | 


--------------------------------------------------------------------------------
/components-ex-2/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/8410fa3428277f129bbbe6339836b9c389deb28e/components-ex-2/src/assets/logo.png


--------------------------------------------------------------------------------
/components-ex-2/src/components/Server/Server.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li
 3 |       class="list-group-item"
 4 |       @click="setCurrentServer()">
 5 |       Server #{{ server.id }}
 6 |   </li>
 7 | </template>
 8 | 
 9 | <script>
10 |   import { serversBus } from '../../main';
11 | 
12 |   export default {
13 |     props: ['server', 'currentServer'],
14 |     methods: {
15 |       setCurrentServer: function() {
16 |         serversBus.currentServerUpdated(this.server);
17 |       }
18 |     }
19 |   }
20 | </script>
21 | 
22 | <style scoped>
23 |   .list-group-item {
24 |     cursor: pointer;
25 |   }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/components-ex-2/src/components/Server/ServerDetails.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="col-xs-12 col-sm-6">
 3 |         <div v-if="server.id">
 4 |           <strong>Server id:</strong> {{server.id}}
 5 |           <strong>Status:</strong> {{server.status}}
 6 |           <hr>
 7 |           <button @click="setServerToNormal">Change to Normal</button>
 8 |         </div>
 9 |         <div v-else="">Please select a server</div>
10 |     </div>
11 | 
12 | </template>
13 | 
14 | <script>
15 |   import { serversBus } from '../../main';
16 | 
17 |   export default {
18 |     data: () => {
19 |       return { server: { } };
20 |     },
21 |     methods: {
22 |       setServerToNormal() {
23 |         this.server.status = 'Normal';
24 |       },
25 |     },
26 |     created() {
27 |       serversBus.$on('currentServerUpdated', (server) => {
28 |         this.server = server;
29 |       });
30 |     }
31 |   }
32 | </script>
33 | 
34 | <style>
35 | 
36 | </style>
37 | 


--------------------------------------------------------------------------------
/components-ex-2/src/components/Server/Servers.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="col-xs-12 col-sm-6">
 3 |         <ul class="list-group">
 4 |             <Server
 5 |                 v-for="server in servers"
 6 |                 :server="server"
 7 |                 :currentServer="currentServer"
 8 |             />
 9 |         </ul>
10 |     </div>
11 | </template>
12 | 
13 | <script>
14 |   import { serversBus } from '../../main';
15 |   import Server from './Server.vue';
16 | 
17 |   export default {
18 |     data: () => {
19 |       return {
20 |         servers: serversBus.servers,
21 |         currentServer: {},
22 |       }
23 |     },
24 |     components: {
25 |       Server
26 |     },
27 |   }
28 | </script>
29 | 
30 | <style>
31 | </style>
32 | 


--------------------------------------------------------------------------------
/components-ex-2/src/components/Shared/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |         <div class="row">
 3 |             <div class="col-xs-12">
 4 |                 <footer>
 5 |                     <p>All Servers are managed here</p>
 6 |                 </footer>
 7 |             </div>
 8 |         </div>
 9 | </template>
10 | 
11 | <script>
12 | </script>
13 | 
14 | <style>
15 | 
16 | </style>
17 | 


--------------------------------------------------------------------------------
/components-ex-2/src/components/Shared/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="row">
 3 |         <div class="col-xs-12">
 4 |             <header>
 5 |                 <h1>Server Status</h1>
 6 |             </header>
 7 |         </div>
 8 |     </div>
 9 | </template>
10 | 
11 | <script>
12 | </script>
13 | 
14 | <style>
15 | 
16 | </style>
17 | 


--------------------------------------------------------------------------------
/components-ex-2/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | export const serversBus = new Vue({
 5 |   data: () => {
 6 |     return {
 7 |       servers: [
 8 |         { id: 1, status: 'Critical' },
 9 |         { id: 2, status: 'Normal' },
10 |         { id: 3, status: 'Critical' },
11 |         { id: 4, status: 'Unknown' },
12 |         { id: 5, status: 'Alert' }
13 |       ],
14 |     }
15 |   },
16 |   methods: {
17 |     currentServerUpdated(currentServer) {
18 |       this.$emit('currentServerUpdated', currentServer);
19 |     }
20 |   }
21 | });
22 | 
23 | new Vue({
24 |   el: '#app',
25 |   render: h => h(App)
26 | })
27 | 


--------------------------------------------------------------------------------
/components-ex-2/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'build.js'
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.vue$/,
15 |         loader: 'vue',
16 |         options: {
17 |           // vue-loader options go here
18 |         }
19 |       },
20 |       {
21 |         test: /\.js$/,
22 |         loader: 'babel',
23 |         exclude: /node_modules/
24 |       },
25 |       {
26 |         test: /\.(png|jpg|gif|svg)$/,
27 |         loader: 'file',
28 |         options: {
29 |           name: '[name].[ext]?[hash]'
30 |         }
31 |       }
32 |     ]
33 |   },
34 |   resolve: {
35 |     alias: {
36 |       'vue$': 'vue/dist/vue'
37 |     }
38 |   },
39 |   devServer: {
40 |     historyApiFallback: true,
41 |     noInfo: true
42 |   },
43 |   devtool: '#eval-source-map'
44 | }
45 | 
46 | if (process.env.NODE_ENV === 'production') {
47 |   module.exports.devtool = '#source-map'
48 |   // http://vue-loader.vuejs.org/en/workflow/production.html
49 |   module.exports.plugins = (module.exports.plugins || []).concat([
50 |     new webpack.DefinePlugin({
51 |       'process.env': {
52 |         NODE_ENV: '"production"'
53 |       }
54 |     }),
55 |     new webpack.optimize.UglifyJsPlugin({
56 |       compress: {
57 |         warnings: false
58 |       }
59 |     }),
60 |     new webpack.LoaderOptionsPlugin({
61 |       minimize: true
62 |     })
63 |   ])
64 | }
65 | 


--------------------------------------------------------------------------------
/components-start/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["es2015", { "modules": false }]
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/components-start/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | *.log
4 | *dist/


--------------------------------------------------------------------------------
/components-start/README.md:
--------------------------------------------------------------------------------
 1 | # vue-cli
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | ```
17 | 
18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
19 | 


--------------------------------------------------------------------------------
/components-start/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Vue Components</title>
 6 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |     </div>
11 |     <script src="/dist/build.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/components-start/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cli",
 3 |   "description": "A Vue.js project",
 4 |   "author": "Maximilian Schwarzmüller <mblacky0@gmail.com>",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
 8 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "^3.3.7",
12 |     "vue": "^2.0.1"
13 |   },
14 |   "devDependencies": {
15 |     "babel-core": "^6.0.0",
16 |     "babel-loader": "^6.0.0",
17 |     "babel-preset-es2015": "^6.0.0",
18 |     "cross-env": "^3.0.0",
19 |     "css-loader": "^0.25.0",
20 |     "file-loader": "^0.9.0",
21 |     "vue-loader": "^9.7.0",
22 |     "webpack": "2.1.0-beta.25",
23 |     "webpack-dev-server": "2.1.0-beta.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/components-start/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <Header/>
 4 |         <hr>
 5 |         <ServerList/>
 6 |         <hr>
 7 |         <Footer/>
 8 |     </div>
 9 | </template>
10 | 
11 | <script>
12 | import Header from './components/Header.vue';
13 | import ServerList from './components/ServerList.vue';
14 | import Footer from './components/Footer.vue';
15 | 
16 | export default {
17 |   name: 'app',
18 |   components: {
19 |     Header,
20 |     ServerList,
21 |     Footer,
22 |   },
23 | };
24 | </script>
25 | 
26 | <style>
27 | 
28 | </style>
29 | 


--------------------------------------------------------------------------------
/components-start/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/8410fa3428277f129bbbe6339836b9c389deb28e/components-start/src/assets/logo.png


--------------------------------------------------------------------------------
/components-start/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="row">
 3 |       <div class="col-xs-12">
 4 |           <footer>
 5 |               <p>All Servers are managed here</p>
 6 |           </footer>
 7 |       </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | </script>


--------------------------------------------------------------------------------
/components-start/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="row">
 3 |       <div class="col-xs-12">
 4 |           <header>
 5 |               <h1>Server Status</h1>
 6 |           </header>
 7 |       </div>
 8 |   </div>
 9 | </template>
10 | <script>
11 | </script>


--------------------------------------------------------------------------------
/components-start/src/components/ServerList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="row">
 3 |       <div class="col-xs-12 col-sm-6">
 4 |           <ul class="list-group">
 5 |               <li
 6 |                   class="list-group-item"
 7 |                   v-for="index in 5">
 8 |                   Server #{{ index }}
 9 |               </li>
10 |           </ul>
11 |       </div>
12 |       <div class="col-xs-12 col-sm-6">
13 |           <p>Server Details are currently not updated</p>
14 |       </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | </script>


--------------------------------------------------------------------------------
/components-start/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: h => h(App)
7 | })
8 | 


--------------------------------------------------------------------------------
/components-start/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'build.js'
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.vue$/,
15 |         loader: 'vue',
16 |         options: {
17 |           // vue-loader options go here
18 |         }
19 |       },
20 |       {
21 |         test: /\.js$/,
22 |         loader: 'babel',
23 |         exclude: /node_modules/
24 |       },
25 |       {
26 |         test: /\.(png|jpg|gif|svg)$/,
27 |         loader: 'file',
28 |         options: {
29 |           name: '[name].[ext]?[hash]'
30 |         }
31 |       }
32 |     ]
33 |   },
34 |   resolve: {
35 |     alias: {
36 |       'vue$': 'vue/dist/vue'
37 |     }
38 |   },
39 |   devServer: {
40 |     historyApiFallback: true,
41 |     noInfo: true
42 |   },
43 |   devtool: '#eval-source-map'
44 | }
45 | 
46 | if (process.env.NODE_ENV === 'production') {
47 |   module.exports.devtool = '#source-map'
48 |   // http://vue-loader.vuejs.org/en/workflow/production.html
49 |   module.exports.plugins = (module.exports.plugins || []).concat([
50 |     new webpack.DefinePlugin({
51 |       'process.env': {
52 |         NODE_ENV: '"production"'
53 |       }
54 |     }),
55 |     new webpack.optimize.UglifyJsPlugin({
56 |       compress: {
57 |         warnings: false
58 |       }
59 |     }),
60 |     new webpack.LoaderOptionsPlugin({
61 |       minimize: true
62 |     })
63 |   ])
64 | }
65 | 


--------------------------------------------------------------------------------
/directive-exercise/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["es2015", { "modules": false }]
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/directive-exercise/README.md:
--------------------------------------------------------------------------------
 1 | # vue-cli
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | ```
17 | 
18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
19 | 


--------------------------------------------------------------------------------
/directive-exercise/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Vue Directives</title>
 6 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |     </div>
11 |     <script src="/dist/build.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/directive-exercise/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cli",
 3 |   "description": "A Vue.js project",
 4 |   "author": "Maximilian Schwarzmüller <mblacky0@gmail.com>",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
 8 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "^3.3.7",
12 |     "vue": "^2.0.1"
13 |   },
14 |   "devDependencies": {
15 |     "babel-core": "^6.0.0",
16 |     "babel-loader": "^6.0.0",
17 |     "babel-preset-es2015": "^6.0.0",
18 |     "cross-env": "^3.0.0",
19 |     "css-loader": "^0.25.0",
20 |     "file-loader": "^0.9.0",
21 |     "vue-loader": "^9.7.0",
22 |     "webpack": "2.1.0-beta.25",
23 |     "webpack-dev-server": "2.1.0-beta.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/directive-exercise/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
 5 |                 <h1>Directives Exercise</h1>
 6 |                 <!-- Exercise -->
 7 |                 <!-- Build a Custom Directive which works like v-on (Listen for Events) -->
 8 |                 <p v-my-directive="alertClick">
 9 |                   My directive
10 |                 </p>
11 |             </div>
12 |         </div>
13 |     </div>
14 | </template>
15 | 
16 | <script>
17 |     export default {
18 |       directives: {
19 |         'my-directive': {
20 |           bind(el, binding) {
21 |             el.onclick = () => {
22 |               binding.value()
23 |             }
24 |           }
25 |         }
26 |       },
27 |       methods: {
28 |         alertClick () {
29 |           window.alert('A click occorred')
30 |         }
31 |       }
32 |     }
33 | </script>
34 | 
35 | <style>
36 | </style>
37 | 


--------------------------------------------------------------------------------
/directive-exercise/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/8410fa3428277f129bbbe6339836b9c389deb28e/directive-exercise/src/assets/logo.png


--------------------------------------------------------------------------------
/directive-exercise/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: h => h(App)
7 | })
8 | 


--------------------------------------------------------------------------------
/directive-exercise/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'build.js'
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.vue$/,
15 |         loader: 'vue',
16 |         options: {
17 |           // vue-loader options go here
18 |         }
19 |       },
20 |       {
21 |         test: /\.js$/,
22 |         loader: 'babel',
23 |         exclude: /node_modules/
24 |       },
25 |       {
26 |         test: /\.(png|jpg|gif|svg)$/,
27 |         loader: 'file',
28 |         options: {
29 |           name: '[name].[ext]?[hash]'
30 |         }
31 |       }
32 |     ]
33 |   },
34 |   resolve: {
35 |     alias: {
36 |       'vue$': 'vue/dist/vue'
37 |     }
38 |   },
39 |   devServer: {
40 |     historyApiFallback: true,
41 |     noInfo: true
42 |   },
43 |   devtool: '#eval-source-map'
44 | }
45 | 
46 | if (process.env.NODE_ENV === 'production') {
47 |   module.exports.devtool = '#source-map'
48 |   // http://vue-loader.vuejs.org/en/workflow/production.html
49 |   module.exports.plugins = (module.exports.plugins || []).concat([
50 |     new webpack.DefinePlugin({
51 |       'process.env': {
52 |         NODE_ENV: '"production"'
53 |       }
54 |     }),
55 |     new webpack.optimize.UglifyJsPlugin({
56 |       compress: {
57 |         warnings: false
58 |       }
59 |     }),
60 |     new webpack.LoaderOptionsPlugin({
61 |       minimize: true
62 |     })
63 |   ])
64 | }
65 | 


--------------------------------------------------------------------------------
/dynamic-components/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["es2015", { "modules": false }]
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/dynamic-components/README.md:
--------------------------------------------------------------------------------
 1 | # vue-cli
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | ```
17 | 
18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
19 | 


--------------------------------------------------------------------------------
/dynamic-components/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Vue Components</title>
 6 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |     </div>
11 |     <script src="/dist/build.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/dynamic-components/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cli",
 3 |   "description": "A Vue.js project",
 4 |   "author": "Maximilian Schwarzmüller <mblacky0@gmail.com>",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
 8 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "^3.3.7",
12 |     "vue": "^2.0.1"
13 |   },
14 |   "devDependencies": {
15 |     "babel-core": "^6.0.0",
16 |     "babel-loader": "^6.0.0",
17 |     "babel-preset-es2015": "^6.0.0",
18 |     "cross-env": "^3.0.0",
19 |     "css-loader": "^0.25.0",
20 |     "file-loader": "^0.9.0",
21 |     "vue-loader": "^9.7.0",
22 |     "webpack": "2.1.0-beta.25",
23 |     "webpack-dev-server": "2.1.0-beta.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/dynamic-components/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="col-xs-12">
 5 |                 <br>
 6 |                 <button @click="selectedComponent = 'appBlue'" class="btn btn-primary">Load Blue Template</button>
 7 |                 <button @click="selectedComponent = 'appGreen'" class="btn btn-success">Load Green Template</button>
 8 |                 <button @click="selectedComponent = 'appRed'" class="btn btn-danger">Load Red Template</button>
 9 |                 <hr>
10 |                 <component :is="selectedComponent">
11 |                     <p v-if="selectedComponent === 'appBlue'">Blue content</p>
12 |                     <p v-if="selectedComponent === 'appGreen'">Green content</p>
13 |                     <p v-if="selectedComponent === 'appRed'">Red content</p>
14 |                 </component>
15 |             </div>
16 |         </div>
17 |     </div>
18 | </template>
19 | 
20 | <script>
21 |     import Blue from './components/Blue.vue';
22 |     import Green from './components/Green.vue';
23 |     import Red from './components/Red.vue';
24 | 
25 |     export default {
26 |         components: {
27 |             appBlue: Blue,
28 |             appGreen: Green,
29 |             appRed: Red
30 |         },
31 |         data: () => {
32 |             return {
33 |                 selectedComponent: ''
34 |             }
35 |         }
36 |     }
37 | </script>
38 | 
39 | <style>
40 | </style>
41 | 


--------------------------------------------------------------------------------
/dynamic-components/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/8410fa3428277f129bbbe6339836b9c389deb28e/dynamic-components/src/assets/logo.png


--------------------------------------------------------------------------------
/dynamic-components/src/components/Blue.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |       <slot></slot>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 
 9 | </script>
10 | 
11 | <style scoped>
12 |     div {
13 |         border: 1px solid blue;
14 |         background-color: lightblue;
15 |         padding: 30px;
16 |         margin: 20px auto;
17 |         text-align: center
18 |     }
19 | </style>


--------------------------------------------------------------------------------
/dynamic-components/src/components/Green.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |       <slot></slot>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 
 9 | </script>
10 | 
11 | <style scoped>
12 |     div {
13 |         border: 1px solid green;
14 |         background-color: lightgreen;
15 |         padding: 30px;
16 |         margin: 20px auto;
17 |         text-align: center
18 |     }
19 | </style>


--------------------------------------------------------------------------------
/dynamic-components/src/components/Red.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |       <slot></slot>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 
 9 | </script>
10 | 
11 | <style scoped>
12 |     div {
13 |         border: 1px solid red;
14 |         background-color: lightcoral;
15 |         padding: 30px;
16 |         margin: 20px auto;
17 |         text-align: center
18 |     }
19 | </style>


--------------------------------------------------------------------------------
/dynamic-components/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: h => h(App)
7 | })
8 | 


--------------------------------------------------------------------------------
/dynamic-components/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'build.js'
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.vue$/,
15 |         loader: 'vue',
16 |         options: {
17 |           // vue-loader options go here
18 |         }
19 |       },
20 |       {
21 |         test: /\.js$/,
22 |         loader: 'babel',
23 |         exclude: /node_modules/
24 |       },
25 |       {
26 |         test: /\.(png|jpg|gif|svg)$/,
27 |         loader: 'file',
28 |         options: {
29 |           name: '[name].[ext]?[hash]'
30 |         }
31 |       }
32 |     ]
33 |   },
34 |   resolve: {
35 |     alias: {
36 |       'vue$': 'vue/dist/vue'
37 |     }
38 |   },
39 |   devServer: {
40 |     historyApiFallback: true,
41 |     noInfo: true
42 |   },
43 |   devtool: '#eval-source-map'
44 | }
45 | 
46 | if (process.env.NODE_ENV === 'production') {
47 |   module.exports.devtool = '#source-map'
48 |   // http://vue-loader.vuejs.org/en/workflow/production.html
49 |   module.exports.plugins = (module.exports.plugins || []).concat([
50 |     new webpack.DefinePlugin({
51 |       'process.env': {
52 |         NODE_ENV: '"production"'
53 |       }
54 |     }),
55 |     new webpack.optimize.UglifyJsPlugin({
56 |       compress: {
57 |         warnings: false
58 |       }
59 |     }),
60 |     new webpack.LoaderOptionsPlugin({
61 |       minimize: true
62 |     })
63 |   ])
64 | }
65 | 


--------------------------------------------------------------------------------
/filters-mixins-exercise/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["es2015", { "modules": false }]
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/filters-mixins-exercise/README.md:
--------------------------------------------------------------------------------
 1 | # vue-cli
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | ```
17 | 
18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
19 | 


--------------------------------------------------------------------------------
/filters-mixins-exercise/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Vue Filters & Mixins</title>
 6 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |     </div>
11 |     <script src="/dist/build.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/filters-mixins-exercise/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cli",
 3 |   "description": "A Vue.js project",
 4 |   "author": "Maximilian Schwarzmüller <mblacky0@gmail.com>",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
 8 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "^3.3.7",
12 |     "vue": "^2.0.1"
13 |   },
14 |   "devDependencies": {
15 |     "babel-core": "^6.0.0",
16 |     "babel-loader": "^6.0.0",
17 |     "babel-preset-es2015": "^6.0.0",
18 |     "cross-env": "^3.0.0",
19 |     "css-loader": "^0.25.0",
20 |     "file-loader": "^0.9.0",
21 |     "vue-loader": "^9.7.0",
22 |     "webpack": "2.1.0-beta.25",
23 |     "webpack-dev-server": "2.1.0-beta.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/filters-mixins-exercise/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
 5 |                 <h1>Filters & Mixins</h1>
 6 |                 <strong>ex 1</strong>
 7 |                 <p>{{text | reverseText}}</p>
 8 | 
 9 |                 <hr>
10 |                 <strong>ex 2</strong>
11 |                 <p>{{text | textWithCounter}}</p>
12 | 
13 |                 <hr>
14 |                 <strong>ex 3</strong>
15 |                 <p>{{reversedText}}</p>
16 |                 <p>{{countedText}}</p>
17 | 
18 |                 <hr>
19 |                 <strong>ex 4</strong>
20 |                 <p>{{textWithCounterMixin}}</p>
21 | 
22 |                 <!-- Exercise 4 -->
23 |                 <!-- Share the Computed Property rebuilding Exercise 2 via a Mixin -->
24 |             </div>
25 |         </div>
26 |     </div>
27 | </template>
28 | 
29 | <script>
30 |     import textCounterMixin from './textCounter'
31 |     var reverseString = function (value) {
32 |       return value.split('').reverse().join('')
33 |     }
34 | 
35 |     export default {
36 |       mixins: [textCounterMixin],
37 |       data() {
38 |         return {
39 |           text: 'Vue.js is awesome'
40 |         }
41 |       },
42 |       filters: {
43 |         reverseText(value) {
44 |           return reverseString(value)
45 |         }
46 |       },
47 |       computed: {
48 |         reversedText() {
49 |           return reverseString(this.text)
50 |         },
51 |         countedText() {
52 |           return `${this.text} (${this.text.length})`
53 |         }
54 |       }
55 |     }
56 | </script>
57 | 
58 | <style>
59 | </style>
60 | 


--------------------------------------------------------------------------------
/filters-mixins-exercise/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/8410fa3428277f129bbbe6339836b9c389deb28e/filters-mixins-exercise/src/assets/logo.png


--------------------------------------------------------------------------------
/filters-mixins-exercise/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | Vue.filter('textWithCounter', function(value) {
 5 |     return `${value} (${value.length})`
 6 | });
 7 | 
 8 | 
 9 | new Vue({
10 |   el: '#app',
11 |   render: h => h(App)
12 | })
13 | 


--------------------------------------------------------------------------------
/filters-mixins-exercise/src/textCounter.js:
--------------------------------------------------------------------------------
 1 | const textCounter = {
 2 |   data() {
 3 |     return {
 4 |       text: ''
 5 |     }
 6 |   },
 7 |   computed: {
 8 |       textWithCounterMixin() {
 9 |         return `${this.text} (${this.text.length})`
10 |       }
11 |   }
12 | }
13 | 
14 | export default textCounter
15 | 


--------------------------------------------------------------------------------
/filters-mixins-exercise/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'build.js'
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.vue$/,
15 |         loader: 'vue',
16 |         options: {
17 |           // vue-loader options go here
18 |         }
19 |       },
20 |       {
21 |         test: /\.js$/,
22 |         loader: 'babel',
23 |         exclude: /node_modules/
24 |       },
25 |       {
26 |         test: /\.(png|jpg|gif|svg)$/,
27 |         loader: 'file',
28 |         options: {
29 |           name: '[name].[ext]?[hash]'
30 |         }
31 |       }
32 |     ]
33 |   },
34 |   resolve: {
35 |     alias: {
36 |       'vue$': 'vue/dist/vue'
37 |     }
38 |   },
39 |   devServer: {
40 |     historyApiFallback: true,
41 |     noInfo: true
42 |   },
43 |   devtool: '#eval-source-map'
44 | }
45 | 
46 | if (process.env.NODE_ENV === 'production') {
47 |   module.exports.devtool = '#source-map'
48 |   // http://vue-loader.vuejs.org/en/workflow/production.html
49 |   module.exports.plugins = (module.exports.plugins || []).concat([
50 |     new webpack.DefinePlugin({
51 |       'process.env': {
52 |         NODE_ENV: '"production"'
53 |       }
54 |     }),
55 |     new webpack.optimize.UglifyJsPlugin({
56 |       compress: {
57 |         warnings: false
58 |       }
59 |     }),
60 |     new webpack.LoaderOptionsPlugin({
61 |       minimize: true
62 |     })
63 |   ])
64 | }
65 | 


--------------------------------------------------------------------------------
/forms-exercise/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["es2015", { "modules": false }]
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/forms-exercise/README.md:
--------------------------------------------------------------------------------
 1 | # vue-cli
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | ```
17 | 
18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
19 | 


--------------------------------------------------------------------------------
/forms-exercise/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Vue Forms</title>
 6 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |     </div>
11 |     <script src="/dist/build.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/forms-exercise/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cli",
 3 |   "description": "A Vue.js project",
 4 |   "author": "Maximilian Schwarzmüller <mblacky0@gmail.com>",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
 8 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "^3.3.7",
12 |     "vue": "^2.0.1"
13 |   },
14 |   "devDependencies": {
15 |     "babel-core": "^6.0.0",
16 |     "babel-loader": "^6.0.0",
17 |     "babel-preset-es2015": "^6.0.0",
18 |     "cross-env": "^3.0.0",
19 |     "css-loader": "^0.25.0",
20 |     "file-loader": "^0.9.0",
21 |     "vue-loader": "^9.7.0",
22 |     "webpack": "2.1.0-beta.25",
23 |     "webpack-dev-server": "2.1.0-beta.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/forms-exercise/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <form>
 4 |             <div class="row">
 5 |                 <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
 6 |                     <sign-up :user="user" @submittedData="updateSubmittedData"> </sign-up>
 7 |                 </div>
 8 |             </div>
 9 |         </form>
10 |         <hr>
11 |         <div class="row" v-if="showSubmittedData">
12 |             <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
13 |                 <div class="panel panel-default">
14 |                     <div class="panel-heading">
15 |                         <h4>Your Data</h4>
16 |                     </div>
17 |                     <div class="panel-body">
18 |                         <p>Full Name: {{user.fullName}}</p>
19 |                         <p>Mail: {{user.email}}</p>
20 |                         <p>Password: {{user.password}}</p>
21 |                         <p>Store in Database?: {{user.stored}}</p>
22 |                     </div>
23 |                 </div>
24 |             </div>
25 |         </div>
26 |     </div>
27 | </template>
28 | 
29 | <script>
30 |     import SignUp from './components/SignUp.vue';
31 | 
32 |     export default {
33 |         components: {
34 |             'sign-up': SignUp
35 |         },
36 |         data: () => {
37 |             return {
38 |                 user: {},
39 |                 showSubmittedData: false
40 |             }
41 |         },
42 |         methods: {
43 |             updateSubmittedData() {
44 |                 this.showSubmittedData = true;
45 |             }
46 |         }
47 |     }
48 | </script>
49 | 
50 | <style>
51 | </style>
52 | 


--------------------------------------------------------------------------------
/forms-exercise/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/8410fa3428277f129bbbe6339836b9c389deb28e/forms-exercise/src/assets/logo.png


--------------------------------------------------------------------------------
/forms-exercise/src/components/FullName.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="full-name-wrapper">
 3 |     <div class="form-group">
 4 |       <label for="first-name">First Name</label>
 5 |       <input
 6 |         type="text"
 7 |         id="first-name"
 8 |         class="form-control"
 9 |         v-model.lazy="name.first">
10 |       </input>
11 |     </div>
12 | 
13 |     <div class="form-group">
14 |       <label for="last-name">Last Name</label>
15 |       <input
16 |         type="text"
17 |         id="last-name"
18 |         class="form-control"
19 |         v-model.lazy="name.last">
20 |       </input>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 |   export default {
27 |     props: ['value'],
28 |     data() {
29 |       return {
30 |         name: {}
31 |       }
32 |     },
33 |     watch: {
34 |       name() {
35 |         let fullName = this.name.first + ' ' + this.name.last;
36 |         this.$emit('input', fullName);
37 |       }
38 |     }
39 |   }
40 | </script>


--------------------------------------------------------------------------------
/forms-exercise/src/components/SignUp.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sign-up-wrapper">
 3 |     <h1>Sign-Up</h1>
 4 |     <full-name v-model="user.fullName"></full-name>
 5 | 
 6 |     <div class="form-group">
 7 |       <label for="email">E-mail</label>
 8 |       <input
 9 |         type="text"
10 |         id="email"
11 |         class="form-control"
12 |         v-model="user.email">
13 |       </input>
14 |     </div>
15 | 
16 |     <div class="form-group">
17 |       <label for="password">Password</label>
18 |       <input
19 |         type="password"
20 |         id="password"
21 |         class="form-control"
22 |         v-model="user.password">
23 |       </input>
24 |     </div>
25 | 
26 |     <div class="form-group">
27 |       <label>Store in Database?: </label>
28 |       <label for="yes">
29 |         <input
30 |           type="radio"
31 |           id="yes"
32 |           value="yes"
33 |           v-model="user.stored"
34 |         >
35 |           Yes
36 |         </input>
37 |       </label>
38 | 
39 |       <label for="no">
40 |         <input
41 |           type="radio"
42 |           id="no"
43 |           value="no"
44 |           v-model="user.stored"
45 |         >
46 |           No
47 |         </input>
48 |       </label>
49 |     </div>
50 | 
51 |     <button
52 |       class="btn btn-primary"
53 |       @click.prevent="submitData">Submit
54 |     </button>
55 |   </div>
56 | </template>
57 | 
58 | <script>
59 |   import FullName from './FullName.vue';
60 | 
61 |   export default {
62 |     props: {
63 |       user: {
64 |         type: Object
65 |       }
66 |     },
67 |     methods: {
68 |       submitData() {
69 |         this.$emit('submittedData')
70 |       }
71 |     },
72 |     components: {
73 |       'full-name': FullName
74 |     }
75 |   }
76 | </script>


--------------------------------------------------------------------------------
/forms-exercise/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: h => h(App)
7 | })
8 | 


--------------------------------------------------------------------------------
/forms-exercise/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'build.js'
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.vue$/,
15 |         loader: 'vue',
16 |         options: {
17 |           // vue-loader options go here
18 |         }
19 |       },
20 |       {
21 |         test: /\.js$/,
22 |         loader: 'babel',
23 |         exclude: /node_modules/
24 |       },
25 |       {
26 |         test: /\.(png|jpg|gif|svg)$/,
27 |         loader: 'file',
28 |         options: {
29 |           name: '[name].[ext]?[hash]'
30 |         }
31 |       }
32 |     ]
33 |   },
34 |   resolve: {
35 |     alias: {
36 |       'vue$': 'vue/dist/vue'
37 |     }
38 |   },
39 |   devServer: {
40 |     historyApiFallback: true,
41 |     noInfo: true
42 |   },
43 |   devtool: '#eval-source-map'
44 | }
45 | 
46 | if (process.env.NODE_ENV === 'production') {
47 |   module.exports.devtool = '#source-map'
48 |   // http://vue-loader.vuejs.org/en/workflow/production.html
49 |   module.exports.plugins = (module.exports.plugins || []).concat([
50 |     new webpack.DefinePlugin({
51 |       'process.env': {
52 |         NODE_ENV: '"production"'
53 |       }
54 |     }),
55 |     new webpack.optimize.UglifyJsPlugin({
56 |       compress: {
57 |         warnings: false
58 |       }
59 |     }),
60 |     new webpack.LoaderOptionsPlugin({
61 |       minimize: true
62 |     })
63 |   ])
64 | }
65 | 


--------------------------------------------------------------------------------
/game-project/app.js:
--------------------------------------------------------------------------------
  1 | var game = {
  2 |   player: {
  3 |     health: 100,
  4 |     attack: 10,
  5 |     heal: 18,
  6 |     name: 'Player'
  7 |   },
  8 |   monster: {
  9 |     health: 100,
 10 |     attack: 12,
 11 |     name: 'Monster'
 12 |   },
 13 |   attackFactor: 100,
 14 |   specialAttackFactor: 90,
 15 |   running: false,
 16 |   events: []
 17 | };
 18 | 
 19 | var data = {
 20 |   game: game
 21 | };
 22 | 
 23 | var getAttackForce = function(attacker, factor) {
 24 |   var damage = (attacker.health * attacker.attack)/factor
 25 |   return Math.round(damage);
 26 | };
 27 | 
 28 | var restartGame = function() {
 29 |   game.player.health = 100;
 30 |   game.monster.health = 100;
 31 |   game.running = false;
 32 |   game.events = [];
 33 | };
 34 | 
 35 | var appendEvent = function(attacker, victim, action, actionNumber) {
 36 |   var currentEvent = {
 37 |     attacker: attacker,
 38 |     action: action,
 39 |     victim: victim,
 40 |     actionNumber: actionNumber
 41 |   };
 42 | 
 43 |   game.events.unshift(currentEvent);
 44 | };
 45 | 
 46 | var handleDamage = function(attackerName, victim, damage) {
 47 |   var remainingHealth = victim.health - damage;
 48 | 
 49 |   appendEvent(attackerName, victim.name, 'hits', damage);
 50 | 
 51 |   if (remainingHealth > 0) {
 52 |     victim.health = remainingHealth;
 53 |     return;
 54 |   }
 55 | 
 56 |   alert(attackerName + ' WON');
 57 |   restartGame();
 58 | };
 59 | 
 60 | var handleHeal = function(victim) {
 61 |   var health = victim.health + victim.heal;
 62 | 
 63 |   appendEvent(victim.name, 'himself', 'heals', victim.heal);
 64 | 
 65 |   if (health > 100) {
 66 |     victim.health = 100;
 67 |     return;
 68 |   }
 69 | 
 70 |   victim.health = health;
 71 | };
 72 | 
 73 | var runMonsterAttack = function() {
 74 |   var monsterDamage;
 75 | 
 76 |   if (!game.running) {
 77 |     return;
 78 |   }
 79 | 
 80 |   monsterDamage = getAttackForce(game.monster, game.attackFactor);
 81 |   handleDamage(game.monster.name, game.player, monsterDamage);
 82 | };
 83 | 
 84 | var methods = {
 85 |   startGame: function() {
 86 |     game.running = true;
 87 |   },
 88 |   attack: function() {
 89 |     var playerDamage = getAttackForce(game.player, game.attackFactor);
 90 | 
 91 |     handleDamage(game.player.name, game.monster, playerDamage);
 92 |     runMonsterAttack();
 93 |   },
 94 |   specialAttack: function() {
 95 |     var playerDamage = getAttackForce(game.player, game.specialAttackFactor);
 96 | 
 97 |     handleDamage(game.player.name, game.monster, playerDamage);
 98 |     runMonsterAttack();
 99 |   },
100 |   heal: function() {
101 |     handleHeal(game.player)
102 |     runMonsterAttack();
103 |   },
104 |   giveUp: function() {
105 |     restartGame();
106 |   }
107 | };
108 | 
109 | 
110 | new Vue({
111 |   el: '#app',
112 |   data: data,
113 |   methods: methods
114 | })


--------------------------------------------------------------------------------
/game-project/css/app.css:
--------------------------------------------------------------------------------
 1 | .text-center {
 2 |     text-align: center;
 3 | }
 4 | 
 5 | .healthbar {
 6 |     width: 80%;
 7 |     height: 40px;
 8 |     background-color: #eee;
 9 |     margin: auto;
10 |     transition: width 500ms;
11 | }
12 | 
13 | .controls, .log {
14 |     margin-top: 30px;
15 |     text-align: center;
16 |     padding: 10px;
17 |     border: 1px solid #ccc;
18 |     box-shadow: 0px 3px 6px #ccc;
19 | }
20 | 
21 | .turn {
22 |     margin-top: 20px;
23 |     margin-bottom: 20px;
24 |     font-weight: bold;
25 |     font-size: 22px;
26 | }
27 | 
28 | .log ul {
29 |     list-style: none;
30 |     font-weight: bold;
31 |     text-transform: uppercase;
32 | }
33 | 
34 | .log ul li {
35 |     margin: 5px;
36 | }
37 | 
38 | .log ul .player-turn {
39 |     color: blue;
40 |     background-color: #e4e8ff;
41 | }
42 | 
43 | .log ul .monster-turn {
44 |     color: red;
45 |     background-color: #ffc0c1;
46 | }
47 | 
48 | button {
49 |     font-size: 20px;
50 |     background-color: #eee;
51 |     padding: 12px;
52 |     box-shadow: 0 1px 1px black;
53 |     margin: 10px;
54 | }
55 | 
56 | #start-game {
57 |     background-color: #aaffb0;
58 | }
59 | 
60 | #start-game:hover {
61 |     background-color: #76ff7e;
62 | }
63 | 
64 | #attack {
65 |     background-color: #ff7367;
66 | }
67 | 
68 | #attack:hover {
69 |     background-color: #ff3f43;
70 | }
71 | 
72 | #special-attack {
73 |     background-color: #ffaf4f;
74 | }
75 | 
76 | #special-attack:hover {
77 |     background-color: #ff9a2b;
78 | }
79 | 
80 | #heal {
81 |     background-color: #aaffb0;
82 | }
83 | 
84 | #heal:hover {
85 |     background-color: #76ff7e;
86 | }
87 | 
88 | #give-up {
89 |     background-color: #ffffff;
90 | }
91 | 
92 | #give-up:hover {
93 |     background-color: #c7c7c7;
94 | }


--------------------------------------------------------------------------------
/game-project/css/foundation.min.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:not-allowed}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.foundation-mq{font-family:"small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"}html{font-size:100%;box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{padding:0;margin:0;font-family:Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;font-weight:400;line-height:1.5;color:#0a0a0a;background:#fefefe;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{max-width:100%;height:auto;-ms-interpolation-mode:bicubic;display:inline-block;vertical-align:middle}textarea{height:auto;min-height:50px}select,textarea{border-radius:3px}select{width:100%}#map_canvas embed,#map_canvas img,#map_canvas object,.map_canvas embed,.map_canvas img,.map_canvas object,.mqa-display embed,.mqa-display img,.mqa-display object{max-width:none!important}button{-webkit-appearance:none;-moz-appearance:none;background:transparent;padding:0;border:0;border-radius:3px;line-height:1}[data-whatinput=mouse] button{outline:0}.is-visible{display:block!important}.is-hidden{display:none!important}.row{max-width:62.5rem;margin-left:auto;margin-right:auto}.row:after,.row:before{content:' ';display:table}.row:after{clear:both}.row.collapse>.column,.row.collapse>.columns{padding-left:0;padding-right:0}.row .row{max-width:none;margin-left:-.9375rem;margin-right:-.9375rem}.row .row.collapse{margin-left:0;margin-right:0}.row.expanded{max-width:none}.row.expanded .row{margin-left:auto;margin-right:auto}.column,.columns{width:100%;float:left;padding-left:.9375rem;padding-right:.9375rem}.column:last-child:not(:first-child),.columns:last-child:not(:first-child){float:right}.column.end:last-child:last-child,.end.columns:last-child:last-child{float:left}.column.row.row,.row.row.columns{float:none}.row .column.row.row,.row .row.row.columns{padding-left:0;padding-right:0;margin-left:0;margin-right:0}.small-1{width:8.33333%}.small-push-1{position:relative;left:8.33333%}.small-pull-1{position:relative;left:-8.33333%}.small-offset-0{margin-left:0}.small-2{width:16.66667%}.small-push-2{position:relative;left:16.66667%}.small-pull-2{position:relative;left:-16.66667%}.small-offset-1{margin-left:8.33333%}.small-3{width:25%}.small-push-3{position:relative;left:25%}.small-pull-3{position:relative;left:-25%}.small-offset-2{margin-left:16.66667%}.small-4{width:33.33333%}.small-push-4{position:relative;left:33.33333%}.small-pull-4{position:relative;left:-33.33333%}.small-offset-3{margin-left:25%}.small-5{width:41.66667%}.small-push-5{position:relative;left:41.66667%}.small-pull-5{position:relative;left:-41.66667%}.small-offset-4{margin-left:33.33333%}.small-6{width:50%}.small-push-6{position:relative;left:50%}.small-pull-6{position:relative;left:-50%}.small-offset-5{margin-left:41.66667%}.small-7{width:58.33333%}.small-push-7{position:relative;left:58.33333%}.small-pull-7{position:relative;left:-58.33333%}.small-offset-6{margin-left:50%}.small-8{width:66.66667%}.small-push-8{position:relative;left:66.66667%}.small-pull-8{position:relative;left:-66.66667%}.small-offset-7{margin-left:58.33333%}.small-9{width:75%}.small-push-9{position:relative;left:75%}.small-pull-9{position:relative;left:-75%}.small-offset-8{margin-left:66.66667%}.small-10{width:83.33333%}.small-push-10{position:relative;left:83.33333%}.small-pull-10{position:relative;left:-83.33333%}.small-offset-9{margin-left:75%}.small-11{width:91.66667%}.small-push-11{position:relative;left:91.66667%}.small-pull-11{position:relative;left:-91.66667%}.small-offset-10{margin-left:83.33333%}.small-12{width:100%}.small-offset-11{margin-left:91.66667%}.small-up-1>.column,.small-up-1>.columns{width:100%;float:left}.small-up-1>.column:nth-of-type(1n),.small-up-1>.columns:nth-of-type(1n){clear:none}.small-up-1>.column:nth-of-type(1n+1),.small-up-1>.columns:nth-of-type(1n+1){clear:both}.small-up-1>.column:last-child,.small-up-1>.columns:last-child{float:left}.small-up-2>.column,.small-up-2>.columns{width:50%;float:left}.small-up-2>.column:nth-of-type(1n),.small-up-2>.columns:nth-of-type(1n){clear:none}.small-up-2>.column:nth-of-type(2n+1),.small-up-2>.columns:nth-of-type(2n+1){clear:both}.small-up-2>.column:last-child,.small-up-2>.columns:last-child{float:left}.small-up-3>.column,.small-up-3>.columns{width:33.33333%;float:left}.small-up-3>.column:nth-of-type(1n),.small-up-3>.columns:nth-of-type(1n){clear:none}.small-up-3>.column:nth-of-type(3n+1),.small-up-3>.columns:nth-of-type(3n+1){clear:both}.small-up-3>.column:last-child,.small-up-3>.columns:last-child{float:left}.small-up-4>.column,.small-up-4>.columns{width:25%;float:left}.small-up-4>.column:nth-of-type(1n),.small-up-4>.columns:nth-of-type(1n){clear:none}.small-up-4>.column:nth-of-type(4n+1),.small-up-4>.columns:nth-of-type(4n+1){clear:both}.small-up-4>.column:last-child,.small-up-4>.columns:last-child{float:left}.small-up-5>.column,.small-up-5>.columns{width:20%;float:left}.small-up-5>.column:nth-of-type(1n),.small-up-5>.columns:nth-of-type(1n){clear:none}.small-up-5>.column:nth-of-type(5n+1),.small-up-5>.columns:nth-of-type(5n+1){clear:both}.small-up-5>.column:last-child,.small-up-5>.columns:last-child{float:left}.small-up-6>.column,.small-up-6>.columns{width:16.66667%;float:left}.small-up-6>.column:nth-of-type(1n),.small-up-6>.columns:nth-of-type(1n){clear:none}.small-up-6>.column:nth-of-type(6n+1),.small-up-6>.columns:nth-of-type(6n+1){clear:both}.small-up-6>.column:last-child,.small-up-6>.columns:last-child{float:left}.small-up-7>.column,.small-up-7>.columns{width:14.28571%;float:left}.small-up-7>.column:nth-of-type(1n),.small-up-7>.columns:nth-of-type(1n){clear:none}.small-up-7>.column:nth-of-type(7n+1),.small-up-7>.columns:nth-of-type(7n+1){clear:both}.small-up-7>.column:last-child,.small-up-7>.columns:last-child{float:left}.small-up-8>.column,.small-up-8>.columns{width:12.5%;float:left}.small-up-8>.column:nth-of-type(1n),.small-up-8>.columns:nth-of-type(1n){clear:none}.small-up-8>.column:nth-of-type(8n+1),.small-up-8>.columns:nth-of-type(8n+1){clear:both}.small-up-8>.column:last-child,.small-up-8>.columns:last-child{float:left}.small-collapse>.column,.small-collapse>.columns{padding-left:0;padding-right:0}.expanded.row .small-collapse.row,.small-collapse .row{margin-left:0;margin-right:0}.small-uncollapse>.column,.small-uncollapse>.columns{padding-left:.9375rem;padding-right:.9375rem}.small-centered{float:none;margin-left:auto;margin-right:auto}.small-pull-0,.small-push-0,.small-uncentered{position:static;margin-left:0;margin-right:0;float:left}@media screen and (min-width:40em){.medium-1{width:8.33333%}.medium-push-1{position:relative;left:8.33333%}.medium-pull-1{position:relative;left:-8.33333%}.medium-offset-0{margin-left:0}.medium-2{width:16.66667%}.medium-push-2{position:relative;left:16.66667%}.medium-pull-2{position:relative;left:-16.66667%}.medium-offset-1{margin-left:8.33333%}.medium-3{width:25%}.medium-push-3{position:relative;left:25%}.medium-pull-3{position:relative;left:-25%}.medium-offset-2{margin-left:16.66667%}.medium-4{width:33.33333%}.medium-push-4{position:relative;left:33.33333%}.medium-pull-4{position:relative;left:-33.33333%}.medium-offset-3{margin-left:25%}.medium-5{width:41.66667%}.medium-push-5{position:relative;left:41.66667%}.medium-pull-5{position:relative;left:-41.66667%}.medium-offset-4{margin-left:33.33333%}.medium-6{width:50%}.medium-push-6{position:relative;left:50%}.medium-pull-6{position:relative;left:-50%}.medium-offset-5{margin-left:41.66667%}.medium-7{width:58.33333%}.medium-push-7{position:relative;left:58.33333%}.medium-pull-7{position:relative;left:-58.33333%}.medium-offset-6{margin-left:50%}.medium-8{width:66.66667%}.medium-push-8{position:relative;left:66.66667%}.medium-pull-8{position:relative;left:-66.66667%}.medium-offset-7{margin-left:58.33333%}.medium-9{width:75%}.medium-push-9{position:relative;left:75%}.medium-pull-9{position:relative;left:-75%}.medium-offset-8{margin-left:66.66667%}.medium-10{width:83.33333%}.medium-push-10{position:relative;left:83.33333%}.medium-pull-10{position:relative;left:-83.33333%}.medium-offset-9{margin-left:75%}.medium-11{width:91.66667%}.medium-push-11{position:relative;left:91.66667%}.medium-pull-11{position:relative;left:-91.66667%}.medium-offset-10{margin-left:83.33333%}.medium-12{width:100%}.medium-offset-11{margin-left:91.66667%}.medium-up-1>.column,.medium-up-1>.columns{width:100%;float:left}.medium-up-1>.column:nth-of-type(1n),.medium-up-1>.columns:nth-of-type(1n){clear:none}.medium-up-1>.column:nth-of-type(1n+1),.medium-up-1>.columns:nth-of-type(1n+1){clear:both}.medium-up-1>.column:last-child,.medium-up-1>.columns:last-child{float:left}.medium-up-2>.column,.medium-up-2>.columns{width:50%;float:left}.medium-up-2>.column:nth-of-type(1n),.medium-up-2>.columns:nth-of-type(1n){clear:none}.medium-up-2>.column:nth-of-type(2n+1),.medium-up-2>.columns:nth-of-type(2n+1){clear:both}.medium-up-2>.column:last-child,.medium-up-2>.columns:last-child{float:left}.medium-up-3>.column,.medium-up-3>.columns{width:33.33333%;float:left}.medium-up-3>.column:nth-of-type(1n),.medium-up-3>.columns:nth-of-type(1n){clear:none}.medium-up-3>.column:nth-of-type(3n+1),.medium-up-3>.columns:nth-of-type(3n+1){clear:both}.medium-up-3>.column:last-child,.medium-up-3>.columns:last-child{float:left}.medium-up-4>.column,.medium-up-4>.columns{width:25%;float:left}.medium-up-4>.column:nth-of-type(1n),.medium-up-4>.columns:nth-of-type(1n){clear:none}.medium-up-4>.column:nth-of-type(4n+1),.medium-up-4>.columns:nth-of-type(4n+1){clear:both}.medium-up-4>.column:last-child,.medium-up-4>.columns:last-child{float:left}.medium-up-5>.column,.medium-up-5>.columns{width:20%;float:left}.medium-up-5>.column:nth-of-type(1n),.medium-up-5>.columns:nth-of-type(1n){clear:none}.medium-up-5>.column:nth-of-type(5n+1),.medium-up-5>.columns:nth-of-type(5n+1){clear:both}.medium-up-5>.column:last-child,.medium-up-5>.columns:last-child{float:left}.medium-up-6>.column,.medium-up-6>.columns{width:16.66667%;float:left}.medium-up-6>.column:nth-of-type(1n),.medium-up-6>.columns:nth-of-type(1n){clear:none}.medium-up-6>.column:nth-of-type(6n+1),.medium-up-6>.columns:nth-of-type(6n+1){clear:both}.medium-up-6>.column:last-child,.medium-up-6>.columns:last-child{float:left}.medium-up-7>.column,.medium-up-7>.columns{width:14.28571%;float:left}.medium-up-7>.column:nth-of-type(1n),.medium-up-7>.columns:nth-of-type(1n){clear:none}.medium-up-7>.column:nth-of-type(7n+1),.medium-up-7>.columns:nth-of-type(7n+1){clear:both}.medium-up-7>.column:last-child,.medium-up-7>.columns:last-child{float:left}.medium-up-8>.column,.medium-up-8>.columns{width:12.5%;float:left}.medium-up-8>.column:nth-of-type(1n),.medium-up-8>.columns:nth-of-type(1n){clear:none}.medium-up-8>.column:nth-of-type(8n+1),.medium-up-8>.columns:nth-of-type(8n+1){clear:both}.medium-up-8>.column:last-child,.medium-up-8>.columns:last-child{float:left}.medium-collapse>.column,.medium-collapse>.columns{padding-left:0;padding-right:0}.expanded.row .medium-collapse.row,.medium-collapse .row{margin-left:0;margin-right:0}.medium-uncollapse>.column,.medium-uncollapse>.columns{padding-left:.9375rem;padding-right:.9375rem}.medium-centered{float:none;margin-left:auto;margin-right:auto}.medium-pull-0,.medium-push-0,.medium-uncentered{position:static;margin-left:0;margin-right:0;float:left}}@media screen and (min-width:64em){.large-1{width:8.33333%}.large-push-1{position:relative;left:8.33333%}.large-pull-1{position:relative;left:-8.33333%}.large-offset-0{margin-left:0}.large-2{width:16.66667%}.large-push-2{position:relative;left:16.66667%}.large-pull-2{position:relative;left:-16.66667%}.large-offset-1{margin-left:8.33333%}.large-3{width:25%}.large-push-3{position:relative;left:25%}.large-pull-3{position:relative;left:-25%}.large-offset-2{margin-left:16.66667%}.large-4{width:33.33333%}.large-push-4{position:relative;left:33.33333%}.large-pull-4{position:relative;left:-33.33333%}.large-offset-3{margin-left:25%}.large-5{width:41.66667%}.large-push-5{position:relative;left:41.66667%}.large-pull-5{position:relative;left:-41.66667%}.large-offset-4{margin-left:33.33333%}.large-6{width:50%}.large-push-6{position:relative;left:50%}.large-pull-6{position:relative;left:-50%}.large-offset-5{margin-left:41.66667%}.large-7{width:58.33333%}.large-push-7{position:relative;left:58.33333%}.large-pull-7{position:relative;left:-58.33333%}.large-offset-6{margin-left:50%}.large-8{width:66.66667%}.large-push-8{position:relative;left:66.66667%}.large-pull-8{position:relative;left:-66.66667%}.large-offset-7{margin-left:58.33333%}.large-9{width:75%}.large-push-9{position:relative;left:75%}.large-pull-9{position:relative;left:-75%}.large-offset-8{margin-left:66.66667%}.large-10{width:83.33333%}.large-push-10{position:relative;left:83.33333%}.large-pull-10{position:relative;left:-83.33333%}.large-offset-9{margin-left:75%}.large-11{width:91.66667%}.large-push-11{position:relative;left:91.66667%}.large-pull-11{position:relative;left:-91.66667%}.large-offset-10{margin-left:83.33333%}.large-12{width:100%}.large-offset-11{margin-left:91.66667%}.large-up-1>.column,.large-up-1>.columns{width:100%;float:left}.large-up-1>.column:nth-of-type(1n),.large-up-1>.columns:nth-of-type(1n){clear:none}.large-up-1>.column:nth-of-type(1n+1),.large-up-1>.columns:nth-of-type(1n+1){clear:both}.large-up-1>.column:last-child,.large-up-1>.columns:last-child{float:left}.large-up-2>.column,.large-up-2>.columns{width:50%;float:left}.large-up-2>.column:nth-of-type(1n),.large-up-2>.columns:nth-of-type(1n){clear:none}.large-up-2>.column:nth-of-type(2n+1),.large-up-2>.columns:nth-of-type(2n+1){clear:both}.large-up-2>.column:last-child,.large-up-2>.columns:last-child{float:left}.large-up-3>.column,.large-up-3>.columns{width:33.33333%;float:left}.large-up-3>.column:nth-of-type(1n),.large-up-3>.columns:nth-of-type(1n){clear:none}.large-up-3>.column:nth-of-type(3n+1),.large-up-3>.columns:nth-of-type(3n+1){clear:both}.large-up-3>.column:last-child,.large-up-3>.columns:last-child{float:left}.large-up-4>.column,.large-up-4>.columns{width:25%;float:left}.large-up-4>.column:nth-of-type(1n),.large-up-4>.columns:nth-of-type(1n){clear:none}.large-up-4>.column:nth-of-type(4n+1),.large-up-4>.columns:nth-of-type(4n+1){clear:both}.large-up-4>.column:last-child,.large-up-4>.columns:last-child{float:left}.large-up-5>.column,.large-up-5>.columns{width:20%;float:left}.large-up-5>.column:nth-of-type(1n),.large-up-5>.columns:nth-of-type(1n){clear:none}.large-up-5>.column:nth-of-type(5n+1),.large-up-5>.columns:nth-of-type(5n+1){clear:both}.large-up-5>.column:last-child,.large-up-5>.columns:last-child{float:left}.large-up-6>.column,.large-up-6>.columns{width:16.66667%;float:left}.large-up-6>.column:nth-of-type(1n),.large-up-6>.columns:nth-of-type(1n){clear:none}.large-up-6>.column:nth-of-type(6n+1),.large-up-6>.columns:nth-of-type(6n+1){clear:both}.large-up-6>.column:last-child,.large-up-6>.columns:last-child{float:left}.large-up-7>.column,.large-up-7>.columns{width:14.28571%;float:left}.large-up-7>.column:nth-of-type(1n),.large-up-7>.columns:nth-of-type(1n){clear:none}.large-up-7>.column:nth-of-type(7n+1),.large-up-7>.columns:nth-of-type(7n+1){clear:both}.large-up-7>.column:last-child,.large-up-7>.columns:last-child{float:left}.large-up-8>.column,.large-up-8>.columns{width:12.5%;float:left}.large-up-8>.column:nth-of-type(1n),.large-up-8>.columns:nth-of-type(1n){clear:none}.large-up-8>.column:nth-of-type(8n+1),.large-up-8>.columns:nth-of-type(8n+1){clear:both}.large-up-8>.column:last-child,.large-up-8>.columns:last-child{float:left}.large-collapse>.column,.large-collapse>.columns{padding-left:0;padding-right:0}.expanded.row .large-collapse.row,.large-collapse .row{margin-left:0;margin-right:0}.large-uncollapse>.column,.large-uncollapse>.columns{padding-left:.9375rem;padding-right:.9375rem}.large-centered{float:none;margin-left:auto;margin-right:auto}.large-pull-0,.large-push-0,.large-uncentered{position:static;margin-left:0;margin-right:0;float:left}}.slide-in-down.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:translateY(-100%);transform:translateY(-100%);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-in-down.mui-enter.mui-enter-active{-webkit-transform:translateY(0);transform:translateY(0)}.slide-in-left.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:translateX(-100%);transform:translateX(-100%);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-in-left.mui-enter.mui-enter-active{-webkit-transform:translateX(0);transform:translateX(0)}.slide-in-up.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:translateY(100%);transform:translateY(100%);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-in-up.mui-enter.mui-enter-active{-webkit-transform:translateY(0);transform:translateY(0)}.slide-in-right.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:translateX(100%);transform:translateX(100%);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-in-right.mui-enter.mui-enter-active{-webkit-transform:translateX(0);transform:translateX(0)}.slide-out-down.mui-leave{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:translateY(0);transform:translateY(0);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-out-down.mui-leave.mui-leave-active{-webkit-transform:translateY(100%);transform:translateY(100%)}.slide-out-right.mui-leave{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:translateX(0);transform:translateX(0);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-out-right.mui-leave.mui-leave-active{-webkit-transform:translateX(100%);transform:translateX(100%)}.slide-out-up.mui-leave{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:translateY(0);transform:translateY(0);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-out-up.mui-leave.mui-leave-active{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.slide-out-left.mui-leave{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:translateX(0);transform:translateX(0);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-out-left.mui-leave.mui-leave-active{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.fade-in.mui-enter{transition-duration:.5s;transition-timing-function:linear;opacity:0;transition-property:opacity}.fade-in.mui-enter.mui-enter-active{opacity:1}.fade-out.mui-leave{transition-duration:.5s;transition-timing-function:linear;opacity:1;transition-property:opacity}.fade-out.mui-leave.mui-leave-active{opacity:0}.hinge-in-from-top.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);-webkit-transform-origin:top;transform-origin:top;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-top.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0deg);transform:perspective(2000px) rotate(0deg);opacity:1}.hinge-in-from-right.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);-webkit-transform-origin:right;transform-origin:right;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-right.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0deg);transform:perspective(2000px) rotate(0deg);opacity:1}.hinge-in-from-bottom.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:perspective(2000px) rotateX(90deg);transform:perspective(2000px) rotateX(90deg);-webkit-transform-origin:bottom;transform-origin:bottom;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-bottom.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0deg);transform:perspective(2000px) rotate(0deg);opacity:1}.hinge-in-from-left.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:perspective(2000px) rotateY(90deg);transform:perspective(2000px) rotateY(90deg);-webkit-transform-origin:left;transform-origin:left;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-left.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0deg);transform:perspective(2000px) rotate(0deg);opacity:1}.hinge-in-from-middle-x.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);-webkit-transform-origin:center;transform-origin:center;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-middle-x.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0deg);transform:perspective(2000px) rotate(0deg);opacity:1}.hinge-in-from-middle-y.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);-webkit-transform-origin:center;transform-origin:center;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-middle-y.mui-enter.mui-enter-active,.hinge-out-from-top.mui-leave{-webkit-transform:perspective(2000px) rotate(0deg);transform:perspective(2000px) rotate(0deg);opacity:1}.hinge-out-from-top.mui-leave{transition-duration:.5s;transition-timing-function:linear;-webkit-transform-origin:top;transform-origin:top;transition-property:-webkit-transform,opacity;transition-property:transform,opacity}.hinge-out-from-top.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}.hinge-out-from-right.mui-leave{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:perspective(2000px) rotate(0deg);transform:perspective(2000px) rotate(0deg);-webkit-transform-origin:right;transform-origin:right;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-right.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);opacity:0}.hinge-out-from-bottom.mui-leave{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:perspective(2000px) rotate(0deg);transform:perspective(2000px) rotate(0deg);-webkit-transform-origin:bottom;transform-origin:bottom;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-bottom.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateX(90deg);transform:perspective(2000px) rotateX(90deg);opacity:0}.hinge-out-from-left.mui-leave{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:perspective(2000px) rotate(0deg);transform:perspective(2000px) rotate(0deg);-webkit-transform-origin:left;transform-origin:left;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-left.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateY(90deg);transform:perspective(2000px) rotateY(90deg);opacity:0}.hinge-out-from-middle-x.mui-leave{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:perspective(2000px) rotate(0deg);transform:perspective(2000px) rotate(0deg);-webkit-transform-origin:center;transform-origin:center;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-middle-x.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}.hinge-out-from-middle-y.mui-leave{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:perspective(2000px) rotate(0deg);transform:perspective(2000px) rotate(0deg);-webkit-transform-origin:center;transform-origin:center;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-middle-y.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);opacity:0}.scale-in-up.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:scale(.5);transform:scale(.5);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.scale-in-up.mui-enter.mui-enter-active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.scale-in-down.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:scale(1.5);transform:scale(1.5);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.scale-in-down.mui-enter.mui-enter-active,.scale-out-up.mui-leave{-webkit-transform:scale(1);transform:scale(1);opacity:1}.scale-out-up.mui-leave{transition-duration:.5s;transition-timing-function:linear;transition-property:-webkit-transform,opacity;transition-property:transform,opacity}.scale-out-up.mui-leave.mui-leave-active{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}.scale-out-down.mui-leave{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:scale(1);transform:scale(1);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.scale-out-down.mui-leave.mui-leave-active{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}.spin-in.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:rotate(-270deg);transform:rotate(-270deg);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.spin-in.mui-enter.mui-enter-active,.spin-out.mui-leave{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}.spin-out.mui-leave{transition-duration:.5s;transition-timing-function:linear;transition-property:-webkit-transform,opacity;transition-property:transform,opacity}.spin-in-ccw.mui-enter,.spin-out.mui-leave.mui-leave-active{-webkit-transform:rotate(270deg);transform:rotate(270deg);opacity:0}.spin-in-ccw.mui-enter{transition-duration:.5s;transition-timing-function:linear;transition-property:-webkit-transform,opacity;transition-property:transform,opacity}.spin-in-ccw.mui-enter.mui-enter-active,.spin-out-ccw.mui-leave{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}.spin-out-ccw.mui-leave{transition-duration:.5s;transition-timing-function:linear;transition-property:-webkit-transform,opacity;transition-property:transform,opacity}.spin-out-ccw.mui-leave.mui-leave-active{-webkit-transform:rotate(-270deg);transform:rotate(-270deg);opacity:0}.slow{transition-duration:.75s!important}.fast{transition-duration:.25s!important}.linear{transition-timing-function:linear!important}.ease{transition-timing-function:ease!important}.ease-in{transition-timing-function:ease-in!important}.ease-out{transition-timing-function:ease-out!important}.ease-in-out{transition-timing-function:ease-in-out!important}.bounce-in{transition-timing-function:cubic-bezier(.485,.155,.24,1.245)!important}.bounce-out{transition-timing-function:cubic-bezier(.485,.155,.515,.845)!important}.bounce-in-out{transition-timing-function:cubic-bezier(.76,-.245,.24,1.245)!important}.short-delay{transition-delay:.3s!important}.long-delay{transition-delay:.7s!important}.shake{-webkit-animation-name:a;animation-name:a}@-webkit-keyframes a{0%,10%,20%,30%,40%,50%,60%,70%,80%,90%{-webkit-transform:translateX(7%);transform:translateX(7%)}5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{-webkit-transform:translateX(-7%);transform:translateX(-7%)}}@keyframes a{0%,10%,20%,30%,40%,50%,60%,70%,80%,90%{-webkit-transform:translateX(7%);transform:translateX(7%)}5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{-webkit-transform:translateX(-7%);transform:translateX(-7%)}}.spin-cw{-webkit-animation-name:b;animation-name:b}@-webkit-keyframes b{0%{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}to{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes b{0%{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}to{-webkit-transform:rotate(0);transform:rotate(0)}}.spin-ccw{-webkit-animation-name:b;animation-name:b}@keyframes b{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.wiggle{-webkit-animation-name:c;animation-name:c}@-webkit-keyframes c{40%,50%,60%{-webkit-transform:rotate(7deg);transform:rotate(7deg)}35%,45%,55%,65%{-webkit-transform:rotate(-7deg);transform:rotate(-7deg)}0%,30%,70%,to{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes c{40%,50%,60%{-webkit-transform:rotate(7deg);transform:rotate(7deg)}35%,45%,55%,65%{-webkit-transform:rotate(-7deg);transform:rotate(-7deg)}0%,30%,70%,to{-webkit-transform:rotate(0);transform:rotate(0)}}.shake,.spin-ccw,.spin-cw,.wiggle{-webkit-animation-duration:.5s;animation-duration:.5s}.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.slow{-webkit-animation-duration:.75s!important;animation-duration:.75s!important}.fast{-webkit-animation-duration:.25s!important;animation-duration:.25s!important}.linear{-webkit-animation-timing-function:linear!important;animation-timing-function:linear!important}.ease{-webkit-animation-timing-function:ease!important;animation-timing-function:ease!important}.ease-in{-webkit-animation-timing-function:ease-in!important;animation-timing-function:ease-in!important}.ease-out{-webkit-animation-timing-function:ease-out!important;animation-timing-function:ease-out!important}.ease-in-out{-webkit-animation-timing-function:ease-in-out!important;animation-timing-function:ease-in-out!important}.bounce-in{-webkit-animation-timing-function:cubic-bezier(.485,.155,.24,1.245)!important;animation-timing-function:cubic-bezier(.485,.155,.24,1.245)!important}.bounce-out{-webkit-animation-timing-function:cubic-bezier(.485,.155,.515,.845)!important;animation-timing-function:cubic-bezier(.485,.155,.515,.845)!important}.bounce-in-out{-webkit-animation-timing-function:cubic-bezier(.76,-.245,.24,1.245)!important;animation-timing-function:cubic-bezier(.76,-.245,.24,1.245)!important}.short-delay{-webkit-animation-delay:.3s!important;animation-delay:.3s!important}.long-delay{-webkit-animation-delay:.7s!important;animation-delay:.7s!important}


--------------------------------------------------------------------------------
/game-project/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Monster Slayer</title>
 5 |     <script src="https://npmcdn.com/vue/dist/vue.js"></script>
 6 |     <link rel="stylesheet" href="css/foundation.min.css">
 7 |     <link rel="stylesheet" href="css/app.css">
 8 | </head>
 9 | <body>
10 | <div id="app">
11 |     <section class="row">
12 |         <div class="small-6 columns">
13 |             <h1 class="text-center">YOU</h1>
14 |             <div class="healthbar">
15 |                 <div
16 |                     class="healthbar text-center"
17 |                     style="background-color: green; margin: 0; color: white;"
18 |                     :style="{ width: game.player.health + '%' }"
19 |                 >
20 |                     {{game.player.health}}
21 |                 </div>
22 |             </div>
23 |         </div>
24 |         <div class="small-6 columns">
25 |             <h1 class="text-center">MONSTER</h1>
26 |             <div class="healthbar">
27 |                 <div
28 |                     class="healthbar text-center"
29 |                     style="background-color: green; margin: 0; color: white;"
30 |                     :style="{ width: game.monster.health + '%' }"
31 |                 >
32 |                     {{game.monster.health}}
33 |                 </div>
34 |             </div>
35 |         </div>
36 |     </section>
37 |     <section class="row controls" v-if="!game.running">
38 |         <div class="small-12 columns">
39 |             <button id="start-game" @click="startGame()">START NEW GAME</button>
40 |         </div>
41 |     </section>
42 |     <section class="row controls" v-if="game.running">
43 |         <div class="small-12 columns">
44 |             <button id="attack" @click="attack()">ATTACK</button>
45 |             <button id="special-attack" @click="specialAttack()">SPECIAL ATTACK</button>
46 |             <button id="heal" @click="heal()">HEAL</button>
47 |             <button id="give-up" @click="giveUp()">GIVE UP</button>
48 |         </div>
49 |     </section>
50 |     <section class="row log" v-if="game.events.length > 0">
51 |         <div class="small-12 columns">
52 |             <ul>
53 |                 <li v-for="event in game.events"
54 |                     :class="{ 'monster-turn': event.attacker === game.monster.name, 'player-turn': event.attacker === game.player.name}">
55 |                     {{ event.attacker + ' ' + event.action + ' ' + event.victim + ' for ' + event.actionNumber }}
56 |                 </li>
57 |             </ul>
58 |         </div>
59 |     </section>
60 | </div>
61 | </body>
62 | <script src="app.js"></script>
63 | </html>


--------------------------------------------------------------------------------
/quotes-project/README.md:
--------------------------------------------------------------------------------
 1 | # vue-cli
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | ```
17 | 
18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
19 | 


--------------------------------------------------------------------------------
/quotes-project/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Vue Components</title>
 6 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 7 |     <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>
 8 |   </head>
 9 |   <body>
10 |     <div id="app">
11 |     </div>
12 |     <script src="/dist/build.js"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/quotes-project/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cli",
 3 |   "description": "A Vue.js project",
 4 |   "author": "Maximilian Schwarzmüller <mblacky0@gmail.com>",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
 8 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "^3.3.7",
12 |     "vue": "^2.0.1"
13 |   },
14 |   "devDependencies": {
15 |     "babel-core": "^6.0.0",
16 |     "babel-loader": "^6.0.0",
17 |     "babel-preset-es2015": "^6.0.0",
18 |     "cross-env": "^3.0.0",
19 |     "css-loader": "^0.25.0",
20 |     "file-loader": "^0.9.0",
21 |     "vue-loader": "^9.7.0",
22 |     "webpack": "2.1.0-beta.25",
23 |     "webpack-dev-server": "2.1.0-beta.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/quotes-project/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <app-progress-bar :quoteCount="quotes.length" :maxQuotes="maxQuotes"></app-progress-bar>
 4 |         <app-quote-creation @quoteAdded="newQuote"></app-quote-creation>
 5 |         <app-quotes-list :quotes="quotes" @quoteDeleted="deleteQuote"></app-quotes-list>
 6 |         <app-footer></app-footer>
 7 |     </div>
 8 | </template>
 9 | 
10 | <script>
11 |     import AppProgressBar from './components/ProgressBar.vue';
12 |     import AppQuoteCreation from './components/QuoteCreation.vue';
13 |     import AppQuotesList from './components/QuotesList.vue';
14 |     import AppFooter from './components/Footer.vue';
15 | 
16 |     export default {
17 |         components: {
18 |           AppProgressBar,
19 |           AppQuoteCreation,
20 |           AppQuotesList,
21 |           AppFooter
22 |         },
23 |         data: () => {
24 |           return {
25 |             maxQuotes: 10,
26 |             quotes: []
27 |           }
28 |         },
29 |         methods: {
30 |             newQuote(quote) {
31 |                 if (this.quotes.length >= this.maxQuotes) {
32 |                     return alert('Please delete Quotes first!');
33 |                 }
34 |                 this.quotes.push(quote);
35 |             },
36 |             deleteQuote(index) {
37 |                 this.quotes.splice(index, 1);
38 |             }
39 |         },
40 |     }
41 | </script>
42 | 
43 | <style>
44 | </style>
45 | 


--------------------------------------------------------------------------------
/quotes-project/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/8410fa3428277f129bbbe6339836b9c389deb28e/quotes-project/src/assets/logo.png


--------------------------------------------------------------------------------
/quotes-project/src/components/Footer.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="row">
3 |       <div class="col-sm-12 text-center">
4 |           <div class="alert alert-info">Info: Click on a Quote to delete it!</div>
5 |       </div>
6 |   </div>
7 | </template>
8 | 
9 | <script></script>


--------------------------------------------------------------------------------
/quotes-project/src/components/ProgressBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="row">
 3 |         <div class="col-sm-12">
 4 |             <h3>Quotes Added</h3>
 5 |             <div class="progress">
 6 |                 <div class="progress">
 7 |                     <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
 8 |                         :style="{width: (quoteCount / maxQuotes) * 100 + '%'}">
 9 |                         {{ quoteCount }} / {{ maxQuotes}}
10 |                     </div>
11 |                 </div>
12 |             </div>
13 |         </div>
14 |     </div>
15 | </template>
16 | 
17 | <script>
18 |     export default {
19 |         props: ['quoteCount', 'maxQuotes']
20 |     }
21 | </script>


--------------------------------------------------------------------------------
/quotes-project/src/components/Quote.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="col-sm-6 col-md-4 col-lg-3">
 3 |         <div class="panel panel-default">
 4 |             <div class="panel-body quote">
 5 |                 <slot></slot>
 6 |             </div>
 7 |         </div>
 8 |     </div>
 9 | </template>
10 | 
11 | <script>
12 | </script>
13 | 
14 | <style>
15 |     .panel-body {
16 |         font-family: 'Arizonia', cursive;
17 |         font-size: 24px;
18 |         color: #6e6e6e;
19 |     }
20 | 
21 |     .quote {
22 |         cursor: pointer;
23 |     }
24 | 
25 |     .quote:hover {
26 |         background-color: #ffe2e2;
27 |     }
28 | </style>


--------------------------------------------------------------------------------
/quotes-project/src/components/QuoteCreation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="row">
 3 |         <form>
 4 |             <div class="col-sm-8 col-sm-offset-2 col-xs-12 col-md-6 col-md-offset-3 form-group">
 5 |                 <label>Quote</label>
 6 |                 <textarea class="form-control" rows="3" v-model="quote"></textarea>
 7 |             </div>
 8 |             <div class="col-sm-8 col-sm-offset-2 col-xs-12 col-md-6 col-md-offset-3 form-group">
 9 |                <button class="btn btn-primary" @click.prevent="createNew">Add Quote</button>
10 |             </div>
11 |         </form>
12 |     </div>
13 | </template>
14 | 
15 | <script>
16 |     export default {
17 |         data: function() {
18 |             return {
19 |                 quote: ''
20 |             };
21 |         },
22 |         methods: {
23 |             createNew() {
24 |                 this.$emit('quoteAdded', this.quote);
25 |                 this.quote = '';
26 |             }
27 |         }
28 |     }
29 | </script>
30 | 
31 | <style>
32 | 
33 | </style>


--------------------------------------------------------------------------------
/quotes-project/src/components/QuotesList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="row">
 3 |         <app-quote v-for="(quote, index) in quotes" @click.native="deleteQuote(index)">{{ quote }}</app-quote>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     import Quote from './Quote.vue';
 9 | 
10 |     export default {
11 |         props: ['quotes'],
12 |         components: {
13 |             appQuote: Quote
14 |         },
15 |         methods: {
16 |             deleteQuote(index) {
17 |                 this.$emit('quoteDeleted', index);
18 |             }
19 |         }
20 |     }
21 | </script>
22 | 
23 | <style>
24 | 
25 | </style>


--------------------------------------------------------------------------------
/quotes-project/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: h => h(App)
7 | })
8 | 


--------------------------------------------------------------------------------
/quotes-project/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'build.js'
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.vue$/,
15 |         loader: 'vue',
16 |         options: {
17 |           // vue-loader options go here
18 |         }
19 |       },
20 |       {
21 |         test: /\.js$/,
22 |         loader: 'babel',
23 |         exclude: /node_modules/
24 |       },
25 |       {
26 |         test: /\.(png|jpg|gif|svg)$/,
27 |         loader: 'file',
28 |         options: {
29 |           name: '[name].[ext]?[hash]'
30 |         }
31 |       }
32 |     ]
33 |   },
34 |   resolve: {
35 |     alias: {
36 |       'vue$': 'vue/dist/vue'
37 |     }
38 |   },
39 |   devServer: {
40 |     historyApiFallback: true,
41 |     noInfo: true
42 |   },
43 |   devtool: '#eval-source-map'
44 | }
45 | 
46 | if (process.env.NODE_ENV === 'production') {
47 |   module.exports.devtool = '#source-map'
48 |   // http://vue-loader.vuejs.org/en/workflow/production.html
49 |   module.exports.plugins = (module.exports.plugins || []).concat([
50 |     new webpack.DefinePlugin({
51 |       'process.env': {
52 |         NODE_ENV: '"production"'
53 |       }
54 |     }),
55 |     new webpack.optimize.UglifyJsPlugin({
56 |       compress: {
57 |         warnings: false
58 |       }
59 |     }),
60 |     new webpack.LoaderOptionsPlugin({
61 |       minimize: true
62 |     })
63 |   ])
64 | }
65 | 


--------------------------------------------------------------------------------
/stock-trader/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["es2015", { "modules": false }],
4 |     ["stage-2"]
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/stock-trader/README.md:
--------------------------------------------------------------------------------
 1 | # vue-cli
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | ```
17 | 
18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
19 | 


--------------------------------------------------------------------------------
/stock-trader/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Stock Trader</title>
 6 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |     </div>
11 |     <script src="/dist/build.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/stock-trader/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cli",
 3 |   "description": "A Vue.js project",
 4 |   "author": "Maximilian Schwarzmüller <mblacky0@gmail.com>",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
 8 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "^3.3.7",
12 |     "vue": "^2.0.1",
13 |     "vue-resource": "^1.3.4",
14 |     "vue-router": "^3.0.1",
15 |     "vuex": "^3.0.1"
16 |   },
17 |   "devDependencies": {
18 |     "babel-core": "^6.0.0",
19 |     "babel-loader": "^6.0.0",
20 |     "babel-preset-es2015": "^6.0.0",
21 |     "babel-preset-stage-2": "^6.24.1",
22 |     "cross-env": "^3.0.0",
23 |     "css-loader": "^0.25.0",
24 |     "file-loader": "^0.9.0",
25 |     "vue-loader": "^9.7.0",
26 |     "webpack": "2.1.0-beta.25",
27 |     "webpack-dev-server": "2.1.0-beta.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/stock-trader/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |       <app-header></app-header>
 4 |       <div class="container border mt-3 p-3">
 5 |         <transition name="slide" mode="out-in">
 6 |           <router-view></router-view>
 7 |         </transition>
 8 |       </div>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |     import appHeader from './components/layouts/Header.vue'
14 |     export default {
15 |       components: {
16 |         appHeader
17 |       },
18 |       created() {
19 |         this.$store.dispatch('initStocks')
20 |       }
21 |     }
22 | </script>
23 | 
24 | <style>
25 |     body {
26 |         padding: 30px;
27 |     }
28 | 
29 |     .slide-enter-active {
30 |         animation: slide-in 200ms ease-out forwards;
31 |     }
32 | 
33 |     .slide-leave-active {
34 |         animation: slide-out 200ms ease-out forwards;
35 |     }
36 | 
37 |     @keyframes slide-in {
38 |         from {
39 |             transform: translateY(-30px);
40 |             opacity: 0;
41 |         }
42 |         to {
43 |             transform: translateY(0);
44 |             opacity: 1;
45 |         }
46 |     }
47 | 
48 |     @keyframes slide-out {
49 |         from {
50 |             transform: translateY(0);
51 |             opacity: 1;
52 |         }
53 |         to {
54 |             transform: translateY(-30px);
55 |             opacity: 0;
56 |         }
57 |     }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/stock-trader/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/8410fa3428277f129bbbe6339836b9c389deb28e/stock-trader/src/assets/logo.png


--------------------------------------------------------------------------------
/stock-trader/src/components/features/portfolio/Funds.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <span>{{funds | currency}}</span>
 3 | </template>
 4 | 
 5 | <script>
 6 | import {mapGetters} from 'vuex'
 7 | 
 8 | export default {
 9 |   computed: {
10 |     ...mapGetters(['funds'])
11 |   }
12 | }
13 | </script>
14 | 
15 | <style lang="css">
16 | </style>
17 | 


--------------------------------------------------------------------------------
/stock-trader/src/components/features/portfolio/Item.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="card bg-white mb-3 mr-3" style="max-width: 20rem;">
 3 |     <div class="card-header text-primary">{{stock.name}} <small>(Price: {{stock.price}} | Quantity: {{stock.qty}})</small></div>
 4 |     <div class="card-body">
 5 |       <div class="input-group mb-2 mr-sm-2 mb-sm-1">
 6 |         <input
 7 |           type="number"
 8 |           class="form-control"
 9 |           placeholder="Quantity"
10 |           v-model="qtyToSell"
11 |           :class="{error: insufficientQuantity()}"
12 |           >
13 |         <button
14 |           type="button"
15 |           name="button"
16 |           class="ml-3 btn btn-primary"
17 |           @click="sell"
18 |           :disabled="disableBuy"
19 |         >
20 |           Sell
21 |         </button>
22 |       </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <style scoped>
28 |     .error {
29 |         border: 1px solid red;
30 |     }
31 | </style>
32 | 
33 | <script>
34 |     import {mapActions} from 'vuex';
35 | 
36 |     export default {
37 |         props: ['stock'],
38 |         data() {
39 |             return {
40 |                 qtyToSell: 0
41 |             }
42 |         },
43 |         computed: {
44 |           disableBuy() {
45 |             return this.qtyToSell <= 0 || this.insufficientQuantity()
46 |           }
47 |         },
48 |         methods: {
49 |             ...mapActions({
50 |                 placeSellOrder: 'sellStock'
51 |             }),
52 |             insufficientQuantity() {
53 |               return this.qtyToSell > this.stock.qty
54 |             },
55 |             sell() {
56 |                 const order = {
57 |                     id: this.stock.id,
58 |                     price: this.stock.price,
59 |                     qty: this.qtyToSell
60 |                 };
61 |                 this.placeSellOrder(order);
62 |                 this.qty = 0;
63 |             }
64 |         }
65 |     }
66 | </script>
67 | 


--------------------------------------------------------------------------------
/stock-trader/src/components/features/portfolio/Portfolio.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="container">
 3 |     <portfolio-item v-for="stock in stocks" :stock="stock">
 4 |     </portfolio-item>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | 
10 | import portfolioItem from './Item.vue'
11 | import {mapGetters} from 'vuex'
12 | 
13 | export default {
14 |   computed: {
15 |     ...mapGetters({
16 |       stocks: 'stockPortfolio'
17 |     })
18 |   },
19 |   components: {
20 |     portfolioItem
21 |   }
22 | }
23 | </script>
24 | 
25 | <style lang="css">
26 | </style>
27 | 


--------------------------------------------------------------------------------
/stock-trader/src/components/features/stocks/Item.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="card bg-white mb-3 mr-3" style="max-width: 20rem;">
 3 |     <div class="card-header text-success">{{stock.name}} <small>(Price: {{stock.price}})</small></div>
 4 |     <div class="card-body">
 5 |       <div class="input-group mb-2 mr-sm-2 mb-sm-1">
 6 |         <input
 7 |           type="number"
 8 |           class="form-control"
 9 |           id="inlineFormInputGroupUsername2"
10 |           placeholder="Quantity"
11 |           v-model="stock.qty"
12 |           :class="{error: disableBuy}">
13 |         <button
14 |           type="button"
15 |           name="button"
16 |           class="ml-3 btn btn-success"
17 |           @click="buy"
18 |           :disabled="disableBuy"
19 |         >
20 |           Buy
21 |         </button>
22 |       </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | 
29 | export default {
30 |   props: ['stock'],
31 |   computed: {
32 |     funds() {
33 |       return this.$store.getters.funds
34 |     },
35 |     disableBuy() {
36 |       let insufficientFunds = this.stock.qty * this.stock.price > this.funds
37 |       return this.stock.qty <= 0 || insufficientFunds
38 |     }
39 |   },
40 |   methods: {
41 |     buy() {
42 |       this.$store.dispatch('buyStock', this.stock)
43 |     }
44 |   }
45 | }
46 | </script>
47 | 
48 | <style lang="css" scoped>
49 |   .error {
50 |     border: 1px solid red;
51 |   }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/stock-trader/src/components/features/stocks/List.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <stock-item v-for="stock in stocks" :stock="stock">
 5 |       </stock-item>
 6 |     </div>
 7 | 
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import stockItem from './Item.vue'
13 | 
14 | export default {
15 |   computed: {
16 |     stocks() {
17 |       return this.$store.getters.stocks
18 |     }
19 |   },
20 |   components: {
21 |     stockItem
22 |   }
23 | }
24 | </script>
25 | 
26 | <style lang="css">
27 | </style>
28 | 


--------------------------------------------------------------------------------
/stock-trader/src/components/layouts/Header.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <nav class="navbar navbar-expand-lg navbar-light bg-light">
 3 |     <router-link to="/" class="navbar-brand">
 4 |       Stock Trader
 5 |     </router-link>
 6 |     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 7 |       <span class="navbar-toggler-icon"></span>
 8 |     </button>
 9 | 
10 |     <div class="collapse navbar-collapse" id="navbarSupportedContent">
11 |       <ul class="navbar-nav mr-auto">
12 |         <router-link to="/portfolio" class="nav-link" tag="li" activeClass="active">
13 |           Portfolio
14 |         </router-link>
15 |         <router-link to="/stocks" class="nav-link" tag="li" activeClass="active">
16 |           Stocks
17 |         </router-link>
18 |       </ul>
19 |     </div>
20 |     <div class="d-flex">
21 |       <div class="collapse navbar-collapse">
22 |         <ul class="navbar-nav mr-auto">
23 |           <li class="nav-item">
24 |             <a class="nav-link" @click="endDay">End Day</a>
25 |           </li>
26 |           <li class="nav-item dropdown"
27 |             :class="{show: isDropdownOpen}"
28 |             @click="isDropdownOpen = !isDropdownOpen"
29 |             >
30 |             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
31 |               Save & Load
32 |             </a>
33 |             <div class="dropdown-menu" :class="{show: isDropdownOpen}" aria-labelledby="navbarDropdown">
34 |               <a class="dropdown-item" @click="saveData">Save Data</a>
35 |               <a class="dropdown-item" @click="loadData">Load Data</a>
36 |             </div>
37 |           </li>
38 |         </ul>
39 |       </div>
40 |       <span class="navbar-text">
41 |         <strong>Funds: <funds></funds></strong>
42 |       </span>
43 |     </div>
44 | 
45 |   </nav>
46 | </template>
47 | 
48 | <script>
49 | 
50 | import funds from '../features/portfolio/Funds.vue'
51 | import {mapActions} from 'vuex'
52 | 
53 | export default {
54 |   data() {
55 |     return {
56 |       isDropdownOpen: false
57 |     }
58 |   },
59 |   components: {
60 |     funds
61 |   },
62 |   methods: {
63 |     ...mapActions({
64 |         randomizeStocks: 'randomizeStocks',
65 |         fetchData: 'loadData'
66 |     }),
67 |     endDay() {
68 |         this.randomizeStocks();
69 |     },
70 |     saveData() {
71 |       let data = {
72 |         funds: this.$store.getters.funds,
73 |         stockPortfolio: this.$store.getters.stockPortfolio,
74 |         stocks: this.$store.getters.stocks
75 |       }
76 | 
77 |       this.$http.put('data.json', data)
78 |     },
79 |     loadData() {
80 |       this.fetchData()
81 |     }
82 |   }
83 | }
84 | </script>
85 | 
86 | <style lang="css">
87 | </style>
88 | 


--------------------------------------------------------------------------------
/stock-trader/src/components/layouts/Home.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-sm-12">
 5 |         <h1>Trade or  View your Portfolio</h1>
 6 |         <p>You may Save & Load your Data</p>
 7 |         <p>Click on 'End Day' to begin a new Day!</p>
 8 |       </div>
 9 |       <hr class="col-sm-12 p-0">
10 |       <div class="col-sm-12">
11 |         <h2>Your Funds: <funds></funds></h2>
12 |       </div>
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import funds from '../features/portfolio/Funds.vue'
19 | export default {
20 |   components: {
21 |     funds
22 |   }
23 | }
24 | </script>
25 | 
26 | <style lang="css">
27 | </style>
28 | 


--------------------------------------------------------------------------------
/stock-trader/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import VueResource from 'vue-resource'
 4 | import App from './App.vue'
 5 | import routes from './routes.js'
 6 | import store from './store/store'
 7 | 
 8 | Vue.use(VueRouter)
 9 | Vue.use(VueResource)
10 | 
11 | Vue.http.options.root = 'https://vue-js-stock-trader-8c1cf.firebaseio.com/'
12 | 
13 | Vue.filter('currency', (value) => {
14 |   return `$${value.toLocaleString()}`
15 | })
16 | 
17 | const router = new VueRouter({mode: 'history', routes})
18 | 
19 | new Vue({
20 |   el: '#app',
21 |   render: h => h(App),
22 |   router,
23 |   store
24 | })
25 | 


--------------------------------------------------------------------------------
/stock-trader/src/repositories/stocks.js:
--------------------------------------------------------------------------------
1 | export default [
2 |   { id: 1, name: 'BMW', price: 110 },
3 |   { id: 2, name: 'Google', price: 110 },
4 |   { id: 3, name: 'Apple', price: 110 },
5 |   { id: 4, name: 'Twitter', price: 110 }
6 | ]
7 | 


--------------------------------------------------------------------------------
/stock-trader/src/routes.js:
--------------------------------------------------------------------------------
 1 | import Home from './components/layouts/Home.vue'
 2 | import Portfolio from './components/features/portfolio/Portfolio.vue'
 3 | import Stocks from './components/features/stocks/List.vue'
 4 | 
 5 | export default [
 6 |   { path: '', component: Home },
 7 |   { path: '/portfolio', component: Portfolio },
 8 |   { path: '/stocks', component: Stocks }
 9 | ]
10 | 


--------------------------------------------------------------------------------
/stock-trader/src/store/actions.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | export const loadData = ({commit}) => {
 4 |   Vue.http.get('data.json')
 5 |     .then(response => response.json())
 6 |     .then(data => {
 7 |       if (data) {
 8 |         let stocks = data.stocks
 9 |         let funds = data.funds
10 |         let stockPortfolio = data.stockPortfolio
11 | 
12 |         let portfolio = {
13 |           stockPortfolio,
14 |           funds
15 |         }
16 | 
17 |         commit('setStocks', stocks)
18 | 
19 |         commit('setPortofolio', portfolio)
20 |       }
21 |     })
22 | }
23 | 


--------------------------------------------------------------------------------
/stock-trader/src/store/modules/portfolio.js:
--------------------------------------------------------------------------------
 1 | const state = {
 2 |   funds: 10000,
 3 |   stocks: []
 4 | }
 5 | 
 6 | var findStockById = (id) => {
 7 |   return state.stocks.find(element => element.id === id)
 8 | }
 9 | 
10 | const mutations = {
11 |   buyStock(state, {id, qty, price}) {
12 |     const record = findStockById(id)
13 | 
14 |     if (record) {
15 |       record.qty += qty
16 |       return
17 |     }
18 | 
19 |     state.stocks.push({
20 |       id,
21 |       qty
22 |     })
23 | 
24 |     state.funds -= price * qty
25 |   },
26 |   sellStock(state, {id, qty, price}) {
27 |     const record = findStockById(id)
28 | 
29 |     if (record.qty > qty) {
30 |       record.qty -= qty
31 |       return
32 |     }
33 | 
34 |     state.stocks.splice(state.stocks.indexOf(record), 1)
35 | 
36 |     state.funds += price * qty
37 |   },
38 |   setPortofolio(state, portfolio) {
39 |       state.funds = portfolio.funds;
40 |       state.stocks = portfolio.stockPortfolio ? portfolio.stockPortfolio : [];
41 |   }
42 | }
43 | 
44 | const actions = {
45 |   sellStock({commit}, order) {
46 |     commit('sellStock', order)
47 |   }
48 | }
49 | 
50 | const getters = {
51 |   stockPortfolio(state, getters) {
52 |     return state.stocks.map(stock => {
53 |       const record = getters.stocks.find(element => element.id == stock.id)
54 | 
55 |       return {
56 |         id: stock.id,
57 |         qty: stock.qty,
58 |         name: record.name,
59 |         price: record.price
60 |       }
61 |     })
62 |   },
63 |   funds(state) {
64 |     return state.funds
65 |   }
66 | }
67 | 
68 | export default {
69 |   state,
70 |   mutations,
71 |   getters,
72 |   actions
73 | }
74 | 


--------------------------------------------------------------------------------
/stock-trader/src/store/modules/stocks.js:
--------------------------------------------------------------------------------
 1 | import stocks from '../../repositories/stocks'
 2 | 
 3 | const state = {
 4 |   stocks: []
 5 | }
 6 | 
 7 | const mutations = {
 8 |   setStocks (state, stocks) {
 9 |     state.stocks = stocks
10 |   },
11 |   randomStocks (state) {
12 |     state.stocks.forEach(stock => {
13 |         stock.price = Math.round(stock.price * (1 + Math.random() - 0.5))
14 |     })
15 |   }
16 | }
17 | 
18 | const actions = {
19 |   buyStock: ({commit}, order) => {
20 |     commit('buyStock', order)
21 |   },
22 |   initStocks: ({commit}) => {
23 |     commit('setStocks', stocks)
24 |   },
25 |   randomizeStocks: ({commit}) => {
26 |     commit('randomStocks')
27 |   }
28 | }
29 | 
30 | const getters = {
31 |   stocks: (state) => {
32 |     return state.stocks
33 |   }
34 | }
35 | 
36 | export default {
37 |   state,
38 |   mutations,
39 |   actions,
40 |   getters
41 | }
42 | 


--------------------------------------------------------------------------------
/stock-trader/src/store/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import stocks from './modules/stocks'
 4 | import portfolio from './modules/portfolio'
 5 | 
 6 | import * as actions from './actions';
 7 | 
 8 | Vue.use(Vuex)
 9 | 
10 | export default new Vuex.Store({
11 |   actions,
12 |   modules: {
13 |     stocks,
14 |     portfolio
15 |   }
16 | })
17 | 


--------------------------------------------------------------------------------
/stock-trader/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'build.js'
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.vue$/,
15 |         loader: 'vue',
16 |         options: {
17 |           // vue-loader options go here
18 |         }
19 |       },
20 |       {
21 |         test: /\.js$/,
22 |         loader: 'babel',
23 |         exclude: /node_modules/
24 |       },
25 |       {
26 |         test: /\.(png|jpg|gif|svg)$/,
27 |         loader: 'file',
28 |         options: {
29 |           name: '[name].[ext]?[hash]'
30 |         }
31 |       }
32 |     ]
33 |   },
34 |   resolve: {
35 |     alias: {
36 |       'vue$': 'vue/dist/vue'
37 |     }
38 |   },
39 |   devServer: {
40 |     historyApiFallback: true,
41 |     noInfo: true
42 |   },
43 |   devtool: '#eval-source-map'
44 | }
45 | 
46 | if (process.env.NODE_ENV === 'production') {
47 |   module.exports.devtool = '#source-map'
48 |   // http://vue-loader.vuejs.org/en/workflow/production.html
49 |   module.exports.plugins = (module.exports.plugins || []).concat([
50 |     new webpack.DefinePlugin({
51 |       'process.env': {
52 |         NODE_ENV: '"production"'
53 |       }
54 |     }),
55 |     new webpack.optimize.UglifyJsPlugin({
56 |       compress: {
57 |         warnings: false
58 |       }
59 |     }),
60 |     new webpack.LoaderOptionsPlugin({
61 |       minimize: true
62 |     })
63 |   ])
64 | }
65 | 


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