├── .gitignore ├── components-start ├── .gitignore ├── .babelrc ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── components │ │ ├── Header.vue │ │ ├── Footer.vue │ │ └── ServerList.vue │ └── App.vue ├── README.md ├── index.html ├── package.json └── webpack.config.js ├── forms-exercise ├── .babelrc ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── components │ │ ├── FullName.vue │ │ └── SignUp.vue │ └── App.vue ├── README.md ├── index.html ├── package.json └── webpack.config.js ├── components-ex-2 ├── .babelrc ├── src │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Shared │ │ │ ├── Header.vue │ │ │ └── Footer.vue │ │ └── Server │ │ │ ├── Server.vue │ │ │ ├── Servers.vue │ │ │ └── ServerDetails.vue │ ├── main.js │ └── App.vue ├── README.md ├── index.html ├── package.json └── webpack.config.js ├── directive-exercise ├── .babelrc ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ └── App.vue ├── README.md ├── index.html ├── package.json └── webpack.config.js ├── dynamic-components ├── .babelrc ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── components │ │ ├── Red.vue │ │ ├── Blue.vue │ │ └── Green.vue │ └── App.vue ├── README.md ├── index.html ├── package.json └── webpack.config.js ├── filters-mixins-exercise ├── .babelrc ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── textCounter.js │ └── App.vue ├── README.md ├── index.html ├── package.json └── webpack.config.js ├── stock-trader ├── .babelrc ├── src │ ├── assets │ │ └── logo.png │ ├── repositories │ │ └── stocks.js │ ├── components │ │ ├── features │ │ │ ├── portfolio │ │ │ │ ├── Funds.vue │ │ │ │ ├── Portfolio.vue │ │ │ │ └── Item.vue │ │ │ └── stocks │ │ │ │ ├── List.vue │ │ │ │ └── Item.vue │ │ └── layouts │ │ │ ├── Home.vue │ │ │ └── Header.vue │ ├── store │ │ ├── store.js │ │ ├── actions.js │ │ └── modules │ │ │ ├── stocks.js │ │ │ └── portfolio.js │ ├── routes.js │ ├── main.js │ └── App.vue ├── README.md ├── index.html ├── package.json └── webpack.config.js ├── quotes-project ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── components │ │ ├── Footer.vue │ │ ├── QuotesList.vue │ │ ├── Quote.vue │ │ ├── ProgressBar.vue │ │ └── QuoteCreation.vue │ └── App.vue ├── README.md ├── index.html ├── package.json └── webpack.config.js ├── README.md ├── LICENSE └── game-project ├── css ├── app.css └── foundation.min.css ├── index.html └── app.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | *.log 4 | *dist/ -------------------------------------------------------------------------------- /components-start/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | *.log 4 | *dist/ -------------------------------------------------------------------------------- /forms-exercise/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /components-ex-2/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /components-start/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /directive-exercise/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /dynamic-components/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /filters-mixins-exercise/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /stock-trader/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }], 4 | ["stage-2"] 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /stock-trader/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/HEAD/stock-trader/src/assets/logo.png -------------------------------------------------------------------------------- /components-ex-2/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/HEAD/components-ex-2/src/assets/logo.png -------------------------------------------------------------------------------- /forms-exercise/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/HEAD/forms-exercise/src/assets/logo.png -------------------------------------------------------------------------------- /quotes-project/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/HEAD/quotes-project/src/assets/logo.png -------------------------------------------------------------------------------- /components-start/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/HEAD/components-start/src/assets/logo.png -------------------------------------------------------------------------------- /directive-exercise/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/HEAD/directive-exercise/src/assets/logo.png -------------------------------------------------------------------------------- /dynamic-components/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/HEAD/dynamic-components/src/assets/logo.png -------------------------------------------------------------------------------- /filters-mixins-exercise/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FabricioFFC/learning-vuejs/HEAD/filters-mixins-exercise/src/assets/logo.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /components-start/src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /quotes-project/src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /components-start/src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /components-ex-2/src/components/Shared/Header.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 13 | 14 | 17 | -------------------------------------------------------------------------------- /stock-trader/src/components/features/portfolio/Funds.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | 15 | 17 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /components-ex-2/src/components/Shared/Footer.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 13 | 14 | 17 | -------------------------------------------------------------------------------- /dynamic-components/src/components/Red.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /dynamic-components/src/components/Blue.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /dynamic-components/src/components/Green.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /forms-exercise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Forms 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /components-ex-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Components 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /components-start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Components 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /directive-exercise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Directives 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /dynamic-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Components 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /stock-trader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Stock Trader 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /filters-mixins-exercise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Filters & Mixins 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /components-start/src/components/ServerList.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /stock-trader/src/components/features/stocks/List.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | 26 | 28 | -------------------------------------------------------------------------------- /components-start/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /stock-trader/src/components/features/portfolio/Portfolio.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 24 | 25 | 27 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /quotes-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Components 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /components-ex-2/src/components/Server/Server.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | 22 | 27 | -------------------------------------------------------------------------------- /quotes-project/src/components/QuotesList.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | 23 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /quotes-project/src/components/Quote.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 13 | 14 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /stock-trader/src/components/layouts/Home.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 25 | 26 | 28 | -------------------------------------------------------------------------------- /components-ex-2/src/components/Server/Servers.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | 30 | 32 | -------------------------------------------------------------------------------- /quotes-project/src/components/ProgressBar.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | -------------------------------------------------------------------------------- /components-ex-2/src/App.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | 30 | 33 | -------------------------------------------------------------------------------- /components-ex-2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli", 3 | "description": "A Vue.js project", 4 | "author": "Maximilian Schwarzmüller ", 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/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli", 3 | "description": "A Vue.js project", 4 | "author": "Maximilian Schwarzmüller ", 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/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli", 3 | "description": "A Vue.js project", 4 | "author": "Maximilian Schwarzmüller ", 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/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli", 3 | "description": "A Vue.js project", 4 | "author": "Maximilian Schwarzmüller ", 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/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli", 3 | "description": "A Vue.js project", 4 | "author": "Maximilian Schwarzmüller ", 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/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli", 3 | "description": "A Vue.js project", 4 | "author": "Maximilian Schwarzmüller ", 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/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli", 3 | "description": "A Vue.js project", 4 | "author": "Maximilian Schwarzmüller ", 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /components-ex-2/src/components/Server/ServerDetails.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 33 | 34 | 37 | -------------------------------------------------------------------------------- /stock-trader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli", 3 | "description": "A Vue.js project", 4 | "author": "Maximilian Schwarzmüller ", 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 | -------------------------------------------------------------------------------- /forms-exercise/src/components/FullName.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | -------------------------------------------------------------------------------- /directive-exercise/src/App.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 34 | 35 | 37 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /quotes-project/src/components/QuoteCreation.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | 31 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /stock-trader/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | 24 | 59 | -------------------------------------------------------------------------------- /quotes-project/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 42 | 43 | 45 | -------------------------------------------------------------------------------- /stock-trader/src/components/features/stocks/Item.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 47 | 48 | 53 | -------------------------------------------------------------------------------- /dynamic-components/src/App.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 38 | 39 | 41 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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/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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /forms-exercise/src/App.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 49 | 50 | 52 | -------------------------------------------------------------------------------- /filters-mixins-exercise/src/App.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 57 | 58 | 60 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /forms-exercise/src/components/SignUp.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | -------------------------------------------------------------------------------- /stock-trader/src/components/features/portfolio/Item.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 32 | 33 | 67 | -------------------------------------------------------------------------------- /game-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Monster Slayer 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |

YOU

14 |
15 |
20 | {{game.player.health}} 21 |
22 |
23 |
24 |
25 |

MONSTER

26 |
27 |
32 | {{game.monster.health}} 33 |
34 |
35 |
36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 |
44 | 45 | 46 | 47 | 48 |
49 |
50 |
51 |
52 |
    53 |
  • 55 | {{ event.attacker + ' ' + event.action + ' ' + event.victim + ' for ' + event.actionNumber }} 56 |
    • 57 |
58 |
59 |
60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /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 | }) -------------------------------------------------------------------------------- /stock-trader/src/components/layouts/Header.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 85 | 86 | 88 | -------------------------------------------------------------------------------- /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} --------------------------------------------------------------------------------