├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── About.vue
    │   └── Home.vue
    ├── main.js
    ├── components
    │   ├── NatureItemCard.vue
    │   ├── HelloWorld.vue
    │   └── NatureItemCardContainer.vue
    ├── App.vue
    └── router
    │   └── index.js
├── docs
    └── images
    │   └── Sketch.png
├── babel.config.js
├── .gitignore
├── README.md
├── LICENSE
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CompSciLauren/naturedex/main/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CompSciLauren/naturedex/main/src/assets/logo.png


--------------------------------------------------------------------------------
/docs/images/Sketch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CompSciLauren/naturedex/main/docs/images/Sketch.png


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


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import 'bootstrap/dist/css/bootstrap.min.css'
4 | import router from './router'
5 | 
6 | createApp(App).use(router).mount('#app')
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/components/NatureItemCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="natureItemCard">
 3 |       <h1>{{title}}</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'NatureItemCard',
10 |   props: {
11 |     title: String
12 |   }
13 | }
14 | </script>
15 | 
16 | <!-- Add "scoped" attribute to limit CSS to this component only -->
17 | <style scoped>
18 | h1 {
19 |     font-size: 28px;
20 | }
21 | 
22 | .natureItemCard {
23 |   color: #42b983;
24 |   border: #43b983 solid 2px;
25 |   width: 50%;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Naturedex
 2 | 
 3 | > Interactive app for tracking and identifying the wildlife you encounter.
 4 | 
 5 | ## Project setup
 6 | 
 7 | ```
 8 | npm install
 9 | ```
10 | 
11 | ### Compiles and hot-reloads for development
12 | 
13 | ```
14 | npm run serve
15 | ```
16 | 
17 | ### Compiles and minifies for production
18 | 
19 | ```
20 | npm run build
21 | ```
22 | 
23 | ### Lints and fixes files
24 | 
25 | ```
26 | npm run lint
27 | ```
28 | 
29 | ### Customize configuration
30 | 
31 | See [Configuration Reference](https://cli.vuejs.org/config/).
32 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img alt="Vue logo" src="../assets/logo.png">
 4 |     <HelloWorld appTitle="Naturedex"/>
 5 |     <NatureItemCardContainer/>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | // @ is an alias to /src
11 | import HelloWorld from '@/components/HelloWorld.vue'
12 | import NatureItemCardContainer from '@/components/NatureItemCardContainer.vue'
13 | 
14 | export default {
15 |   name: 'Home',
16 |   components: {
17 |     HelloWorld,
18 |     NatureItemCardContainer
19 |   }
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ appTitle }}</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'HelloWorld',
10 |   props: {
11 |     appTitle: String
12 |   }
13 | }
14 | </script>
15 | 
16 | <!-- Add "scoped" attribute to limit CSS to this component only -->
17 | <style scoped>
18 | h3 {
19 |   margin: 40px 0 0;
20 | }
21 | ul {
22 |   list-style-type: none;
23 |   padding: 0;
24 | }
25 | li {
26 |   display: inline-block;
27 |   margin: 0 10px;
28 | }
29 | a {
30 |   color: #42b983;
31 | }
32 | </style>
33 | 


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


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


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import Home from '../views/Home.vue'
 3 | 
 4 | const routes = [
 5 |   {
 6 |     path: '/',
 7 |     name: 'Home',
 8 |     component: Home
 9 |   },
10 |   {
11 |     path: '/about',
12 |     name: 'About',
13 |     // route level code-splitting
14 |     // this generates a separate chunk (about.[hash].js) for this route
15 |     // which is lazy-loaded when the route is visited.
16 |     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
17 |   }
18 | ]
19 | 
20 | const router = createRouter({
21 |   history: createWebHistory(process.env.BASE_URL),
22 |   routes
23 | })
24 | 
25 | export default router
26 | 


--------------------------------------------------------------------------------
/src/components/NatureItemCardContainer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="natureItemCardContainer">
 3 |     <NatureItemCard title="Snakes"/>
 4 |     <NatureItemCard title="Lizards"/>
 5 |     <NatureItemCard title="Frogs"/>
 6 |     <NatureItemCard title="Spiders"/>
 7 |     <NatureItemCard title="Birds"/>
 8 |     <NatureItemCard title="Plants"/>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import NatureItemCard from '@/components/NatureItemCard.vue'
14 | 
15 | export default {
16 |   name: 'NatureItemCardContainer',
17 |   props: {
18 |     title: String
19 |   },
20 |   components: {
21 |     NatureItemCard
22 |   }
23 | }
24 | </script>
25 | 
26 | <!-- Add "scoped" attribute to limit CSS to this component only -->
27 | <style scoped>
28 | .natureItemCardContainer {
29 |   display: flex;
30 |   flex-wrap: wrap;
31 |   color: #42b983;
32 |   border: black solid 2px;
33 |   width: 40%;
34 |   margin: auto;
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Lauren Stephenson
 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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "naturedex",
 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 |     "bootstrap": "^5.1.0",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^3.0.0",
14 |     "vue-router": "^4.0.0-0"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.5.0",
18 |     "@vue/cli-plugin-eslint": "~4.5.0",
19 |     "@vue/cli-plugin-router": "^4.5.13",
20 |     "@vue/cli-service": "~4.5.0",
21 |     "@vue/compiler-sfc": "^3.0.0",
22 |     "babel-eslint": "^10.1.0",
23 |     "eslint": "^6.7.2",
24 |     "eslint-plugin-vue": "^7.0.0"
25 |   },
26 |   "eslintConfig": {
27 |     "root": true,
28 |     "env": {
29 |       "node": true
30 |     },
31 |     "extends": [
32 |       "plugin:vue/vue3-essential",
33 |       "eslint:recommended"
34 |     ],
35 |     "parserOptions": {
36 |       "parser": "babel-eslint"
37 |     },
38 |     "rules": {}
39 |   },
40 |   "browserslist": [
41 |     "> 1%",
42 |     "last 2 versions",
43 |     "not dead"
44 |   ]
45 | }
46 | 


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