├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html └── src ├── App.vue ├── assets ├── logo.png └── sass │ ├── base │ └── _variables.sass │ ├── components │ └── _home.sass │ └── index.sass ├── components └── PetTable.vue ├── data ├── cats.js └── dogs.js ├── main.js ├── router.js ├── store ├── actions.js ├── getters.js ├── index.js ├── mutations.js └── state.js └── views ├── Cats.vue ├── Dogs.vue ├── Home.vue └── Pet.vue /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | 'space-before-function-paren': 'off' 14 | }, 15 | parserOptions: { 16 | parser: 'babel-eslint' 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # adopt-pets 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "adopt-pets", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@fortawesome/fontawesome-svg-core": "^1.2.17", 12 | "@fortawesome/free-solid-svg-icons": "^5.8.1", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "bootstrap-vue": "2.0.0-rc.14", 15 | "vue": "^2.6.6", 16 | "vue-router": "^3.0.1", 17 | "vuex": "^3.0.1" 18 | }, 19 | "devDependencies": { 20 | "@vue/cli-plugin-babel": "^3.5.0", 21 | "@vue/cli-plugin-eslint": "^3.5.0", 22 | "@vue/cli-service": "^3.5.0", 23 | "@vue/eslint-config-standard": "^4.0.0", 24 | "babel-eslint": "^10.0.1", 25 | "eslint": "^5.8.0", 26 | "eslint-plugin-vue": "^5.0.0", 27 | "node-sass": "^4.9.0", 28 | "sass-loader": "^7.1.0", 29 | "vue-template-compiler": "^2.5.21" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gwenf/vue-adopt-pets/2bf6b042dbad6573b84efe7d25a4aafc79a92c2d/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | adopt-pets 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 33 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gwenf/vue-adopt-pets/2bf6b042dbad6573b84efe7d25a4aafc79a92c2d/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/sass/base/_variables.sass: -------------------------------------------------------------------------------- 1 | // fonts 2 | $main-font: 'Helvetica', sans-serif 3 | 4 | // colors 5 | $blue: #782398 6 | -------------------------------------------------------------------------------- /src/assets/sass/components/_home.sass: -------------------------------------------------------------------------------- 1 | .home-view-container 2 | color: $blue -------------------------------------------------------------------------------- /src/assets/sass/index.sass: -------------------------------------------------------------------------------- 1 | // libraries 2 | 3 | // base 4 | @import 'base/variables' 5 | 6 | // components 7 | @import 'components/home' 8 | -------------------------------------------------------------------------------- /src/components/PetTable.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 22 | -------------------------------------------------------------------------------- /src/data/cats.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | name: 'Fish', 4 | breed: 'tuxedo', 5 | species: 'cat', 6 | gender: 'male', 7 | age: 20, 8 | color: 'black/white', 9 | weight: 13, 10 | location: 'fourside', 11 | notes: 'Sweet kitty. He loves getting his belly rubbed.' 12 | }, 13 | { 14 | name: 'Henry', 15 | breed: 'tabby', 16 | species: 'cat', 17 | gender: 'male', 18 | age: 20, 19 | color: 'orange/white', 20 | weight: 17, 21 | location: 'threed', 22 | notes: 'Super friendly' 23 | }, 24 | { 25 | name: 'Roger', 26 | breed: 'tabby', 27 | species: 'cat', 28 | gender: 'male', 29 | age: 20, 30 | color: 'gray', 31 | weight: 15, 32 | location: 'threed', 33 | notes: 'Super friendly' 34 | }, 35 | { 36 | name: 'Kitkat', 37 | breed: 'bombay', 38 | species: 'cat', 39 | gender: 'female', 40 | age: .9, 41 | color: 'black', 42 | weight: 9, 43 | location: 'threed', 44 | notes: 'Super friendly' 45 | } 46 | ] 47 | -------------------------------------------------------------------------------- /src/data/dogs.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | name: 'Sheeba', 4 | breed: 'collie', 5 | gender: 'female', 6 | age: 7, 7 | color: 'black/white', 8 | weight: 34, 9 | location: 'fourside', 10 | notes: 'Pure breed. Trained for competitions.' 11 | }, 12 | { 13 | name: 'Hillary', 14 | breed: 'mut', 15 | gender: 'female', 16 | age: 17, 17 | color: 'orange/white', 18 | weight: 37, 19 | location: 'threed', 20 | notes: 'Super friendly' 21 | }, 22 | { 23 | name: 'Zeus', 24 | breed: 'afghan hound', 25 | gender: 'male', 26 | age: 9, 27 | color: 'gray', 28 | weight: 68, 29 | location: 'threed', 30 | notes: 'Super friendly' 31 | }, 32 | { 33 | name: 'Katie', 34 | breed: 'golden retriever', 35 | gender: 'female', 36 | age: 2, 37 | color: 'black', 38 | weight: 44, 39 | location: 'threed', 40 | notes: 'Super friendly' 41 | } 42 | ] 43 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import BootstrapVue from 'bootstrap-vue' 3 | 4 | import 'bootstrap/dist/css/bootstrap.css' 5 | import 'bootstrap-vue/dist/bootstrap-vue.css' 6 | import './assets/sass/index.sass' 7 | 8 | import App from './App.vue' 9 | import router from './router' 10 | import store from './store' 11 | 12 | import { library } from "@fortawesome/fontawesome-svg-core"; 13 | import { faCat, faDog } from "@fortawesome/free-solid-svg-icons"; 14 | import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; 15 | 16 | library.add(faCat, faDog); 17 | 18 | Vue.component("font-awesome-icon", FontAwesomeIcon); 19 | 20 | Vue.use(BootstrapVue) 21 | 22 | Vue.config.productionTip = false 23 | 24 | new Vue({ 25 | router, 26 | store, 27 | render: h => h(App) 28 | }).$mount('#app') 29 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Home from './views/Home.vue' 4 | import Cats from './views/Cats.vue' 5 | import Dogs from './views/Dogs.vue' 6 | import Pet from './views/Pet.vue' 7 | 8 | Vue.use(Router) 9 | 10 | export default new Router({ 11 | mode: 'history', 12 | base: process.env.BASE_URL, 13 | routes: [ 14 | { 15 | path: '/', 16 | name: 'home', 17 | component: Home 18 | }, 19 | { 20 | path: '/cats', 21 | name: 'cats', 22 | component: Cats 23 | }, 24 | { 25 | path: '/dogs', 26 | name: 'dogs', 27 | component: Dogs 28 | }, 29 | { 30 | path: '/pets/:species/:id', 31 | name: 'pet', 32 | component: Pet 33 | } 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | export default { 2 | addPet: ({ commit }, payload) => { 3 | commit('appendPet', payload) 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/store/getters.js: -------------------------------------------------------------------------------- 1 | export default { 2 | animalsCount: (state) => { 3 | return state.cats.length + state.dogs.length; 4 | }, 5 | getAllCats: (state) => { 6 | return state.cats; 7 | }, 8 | getAllDogs: (state) => { 9 | return state.dogs; 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | import state from './state' 5 | import mutations from './mutations' 6 | import actions from './actions' 7 | import getters from './getters' 8 | 9 | Vue.use(Vuex) 10 | 11 | export default new Vuex.Store({ 12 | state, 13 | mutations, 14 | actions, 15 | getters 16 | }) 17 | -------------------------------------------------------------------------------- /src/store/mutations.js: -------------------------------------------------------------------------------- 1 | export default { 2 | appendPet: (state, { species, pet }) => { 3 | state[species].push(pet) 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/store/state.js: -------------------------------------------------------------------------------- 1 | import cats from '../data/cats' 2 | import dogs from '../data/dogs' 3 | 4 | export default { 5 | cats, 6 | dogs, 7 | pets: [...cats, ...dogs] 8 | } 9 | -------------------------------------------------------------------------------- /src/views/Cats.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 28 | -------------------------------------------------------------------------------- /src/views/Dogs.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 28 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 92 | -------------------------------------------------------------------------------- /src/views/Pet.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 30 | --------------------------------------------------------------------------------