├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── components
    │   ├── IncomeList.vue
    │   ├── HeaderView.vue
    │   ├── IncomeItem.vue
    │   └── FormView.vue
    └── App.vue
├── babel.config.js
├── vue.config.js
├── .gitignore
├── jsconfig.json
├── README.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neto112/income-tracker/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neto112/income-tracker/HEAD/src/assets/logo.png


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


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   transpileDependencies: true
4 | })
5 | 


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


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-income
 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 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/components/IncomeList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="income-list">
 3 |     <IncomeItem v-for="data in state.sortedIncome" :key="data.id" :income="data" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import IncomeItem from "./IncomeItem.vue";
 9 | export default {
10 |   components: {
11 |     IncomeItem,
12 |   },
13 |   props: {
14 |     state: Object,
15 |   },
16 | };
17 | </script>
18 | 
19 | <style scoped>
20 | .income-list {
21 |   margin-top: 30px;
22 |   padding: 15px;
23 | }
24 | </style>


--------------------------------------------------------------------------------
/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/components/HeaderView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header>
 3 |     <h1>Income Tracker</h1>
 4 |     <div class="total-income">£{{ totalIncome }}</div>
 5 |   </header>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: {
11 |     totalIncome: Number,
12 |   },
13 | };
14 | </script>
15 | 
16 | <style scoped>
17 | header {
18 |   display: flex;
19 |   justify-content: space-between;
20 |   align-items: center;
21 |   padding: 15px 30px;
22 |   background-color: #313131;
23 |   border-bottom: 5px solid #ffce00;
24 | }
25 | header h1 {
26 |   color: #eee;
27 |   font-size: 28px;
28 | }
29 | header .total-income {
30 |   font-family: "Fira Code", "Fira Sans", sans-serif;
31 |   background-color: #ffce00;
32 |   color: #fff;
33 |   font-size: 20px;
34 |   font-weight: 900;
35 |   padding: 5px 10px;
36 |   min-width: 100px;
37 |   text-align: center;
38 |   border-radius: 8px;
39 |   box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);
40 |   text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
41 | }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-income",
 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 |     "core-js": "^3.8.3",
12 |     "vue": "^3.2.13"
13 |   },
14 |   "devDependencies": {
15 |     "@babel/core": "^7.12.16",
16 |     "@babel/eslint-parser": "^7.12.16",
17 |     "@vue/cli-plugin-babel": "~5.0.0",
18 |     "@vue/cli-plugin-eslint": "~5.0.0",
19 |     "@vue/cli-service": "~5.0.0",
20 |     "eslint": "^7.32.0",
21 |     "eslint-plugin-vue": "^8.0.3"
22 |   },
23 |   "eslintConfig": {
24 |     "root": true,
25 |     "env": {
26 |       "node": true
27 |     },
28 |     "extends": [
29 |       "plugin:vue/vue3-essential",
30 |       "eslint:recommended"
31 |     ],
32 |     "parserOptions": {
33 |       "parser": "@babel/eslint-parser"
34 |     },
35 |     "rules": {}
36 |   },
37 |   "browserslist": [
38 |     "> 1%",
39 |     "last 2 versions",
40 |     "not dead",
41 |     "not ie 11"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/IncomeItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="income-item">
 3 |     <div class="removeItem" @click="removeItem">x</div>
 4 |     <div class="desc">{{ income.desc }}</div>
 5 |     <div class="price">£{{ income.value }}</div>
 6 |     <div class="date">{{ formattedDate }}</div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   props: {
13 |     income: Object,
14 |   },
15 |   setup(props, { emit }) {
16 |     let date = new Date(props.income.date);
17 |     let day = date.getDate();
18 |     let month = date.getMonth();
19 |     let year = date.getFullYear();
20 | 
21 |     let formattedDate = day + "/" + month + "/" + year;
22 | 
23 |     function removeItem() {
24 |       emit("remove-item", props.income.id);
25 |     }
26 |     return {
27 |       formattedDate,
28 |       removeItem,
29 |     };
30 |   },
31 | };
32 | </script>
33 | 
34 | <style scoped>
35 | .income-item {
36 |   position: relative;
37 |   display: flex;
38 |   padding: 15px 15px 15px 0px;
39 |   background-color: #fff;
40 |   border-radius: 8px;
41 |   max-width: 600px;
42 |   margin: 0 auto 30px;
43 | }
44 | .removeItem {
45 |   color: #ef2d2d;
46 |   font-weight: 600;
47 |   font-size: 20px;
48 |   line-height: 1;
49 |   text-align: center;
50 |   margin: 0 15px;
51 | }
52 | .desc {
53 |   color: #666;
54 |   flex: 1 1 100%;
55 |   font-size: 20px;
56 | }
57 | .price {
58 |   color: #666;
59 |   min-width: 100px;
60 |   font-size: 20px;
61 | }
62 | .date {
63 |   color: #666;
64 |   text-align: right;
65 |   font-size: 20px;
66 | }
67 | </style>


--------------------------------------------------------------------------------
/src/components/FormView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="FormHandler">
 3 |     <input type="text" placeholder="Description..." v-model="formData.desc" />
 4 |     <input type="number" placeholder="Value..." v-model="formData.value" />
 5 |     <input type="date" placeholder="Date..." v-model="formData.date" />
 6 |     <input type="submit" value="SUBMIT" />
 7 |   </form>
 8 | </template>
 9 | 
10 | <script>
11 | import { reactive } from "vue";
12 | export default {
13 |   props: {
14 |     state: Object,
15 |   },
16 |   setup(props, { emit }) {
17 |     const formData = reactive({
18 |       desc: null,
19 |       value: null,
20 |       date: null,
21 |     });
22 | 
23 |     function FormHandler() {
24 |       emit("add-income", {
25 |         desc: formData.desc,
26 |         value: formData.value,
27 |         date: formData.date,
28 |       });
29 | 
30 |       formData.desc = null;
31 |       formData.value = null;
32 |       formData.date = null;
33 |     }
34 |     return {
35 |       FormHandler,
36 |       formData,
37 |     };
38 |   },
39 | };
40 | </script>
41 | 
42 | <style scoped>
43 | form {
44 |   display: flex;
45 |   justify-content: center;
46 |   margin-top: 30px;
47 | }
48 | form input {
49 |   color: #888;
50 |   border: none;
51 |   outline: none;
52 |   font-size: 20px;
53 | }
54 | form input::placeholder {
55 |   color: #aaa;
56 | }
57 | form input:not([type="submit"]) {
58 |   display: block;
59 |   background: #fff;
60 |   border: none;
61 |   outline: none;
62 |   padding: 5px 15px;
63 | }
64 | form input[type="submit"] {
65 |   display: block;
66 |   background: none;
67 |   border: none;
68 |   outline: none;
69 |   color: #fff;
70 |   font-weight: 500;
71 |   text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
72 |   padding: 5px 15px;
73 |   background-color: #ffce00;
74 |   cursor: pointer;
75 | }
76 | form input:first-of-type {
77 |   border-radius: 8px 0px 0px 8px;
78 | }
79 | form input:last-of-type {
80 |   border-radius: 0px 8px 8px 0px;
81 | }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <HeaderView :totalIncome="state.totalIncome" />
 4 |     <FormView  :state="state" @add-income="AddIncome" />
 5 |     <IncomeList :state="state" @remove-item="removeItem" />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import { reactive, computed } from "vue";
11 | import HeaderView from "./components/HeaderView.vue";
12 | import FormView from "./components/FormView.vue";
13 | import IncomeList from "./components/IncomeList.vue"
14 | 
15 | export default {
16 |   setup() {
17 |     const state = reactive({
18 |       income: [],
19 |       sortedIncome: computed(() => {
20 |         let temp = [];
21 |         
22 |         temp = state.income.sort((a, b) => {
23 |           return b.date - a.date;
24 |         });
25 |         return temp;
26 |       }),
27 | 
28 |       totalIncome: computed(() => {
29 |         let temp = 0;
30 |         if (state.income.length > 0) {
31 |           for (let i = 0; i < state.income.length; i++) {
32 |             temp += state.income[i].value;
33 |           }
34 |         return temp;
35 |         } else {
36 |           return 0;
37 |         }
38 |       }),
39 |     });
40 | 
41 |     function AddIncome(data) {
42 |       let d = data.date.split("-")
43 |       console.log("d >>>", d);
44 |       console.log(new Date());
45 |       let newD = new Date(d[0], d[1] -1, d[2])
46 |       console.log("newD >>>", newD);
47 | 
48 |       state.income = [...state.income, {
49 |       id: Date.now(),
50 |       desc: data.desc,
51 |       value: parseInt(data.value),
52 |       date: newD.getTime()
53 |       }]
54 |       // console.log(state.income);
55 |     }
56 |     return {
57 |       state,
58 |       AddIncome
59 |     };
60 |   },
61 |   components: {
62 |     HeaderView,
63 |     FormView,
64 |     IncomeList
65 |   },
66 | };
67 | </script>
68 | 
69 | <style>
70 | * {
71 |   margin: 0;
72 |   padding: 0;
73 |   box-sizing: border-box;
74 |   font-family: "Fira Sans", sans-serif;
75 | }
76 | 
77 | body {
78 |   background: #eee;
79 | }
80 | </style>
81 | 


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