oliverbth05/app.css

## app.css
#table {
  width: 400px;
  margin: auto;
  text-align: center;
}

#inputForm{
  width: 400px;
  margin: auto;
  margin-top: 50px;
}

#headers{
  background: rgb(220, 220, 220);
  font-size: 17px;
  font-family: "Raleway", sans-serif;
  text-align: center;
}

#clockHeader{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align:center;
  width: 50%;
  margin: auto;
}

.positive{
  background: rgb(230, 240, 230);
  color: rgb(50, 100, 50);
}

.negative{
  background: rgb(240, 230, 230);
  color: rgb(100, 50, 50);
}


## app.js
new Vue({
	el: "#app",
  data:{
  	entries:[],
     amount:"",
     reference:'',
     isPositive: true,
     isNegative: false


  },
  methods: {
  	pushEntry: function(){

		if(parseFloat(this.amount) > 0){
    	this.isPositive = true;
      this.isNegative = false;
    } else {
    this.isPositive = false;
    this.isNegative = true;
    }


    var Entry = {
    	amount: parseFloat(this.amount),
      reference: this.reference,
      date: new Date(),
      positive: this.isPositive,
      negative: this.isNegative

    }

    this.entries.push(Entry);
    this.amount = '';
    this.reference = '';
    this.positive = true;
    this.negative = false;

    }
  },
  computed:{


  	balance: function(){
    	var sum = 0;
			this.entries.forEach( function(entry){
      sum += entry.amount;})
      return sum;
      },

    expenses: function(){
    	var expense = 0;
      this.entries.forEach( function(entry){

      if(entry.amount < 0){
      	expense = expense - entry.amount
      }else{
      console.log(entry.amount);
      }

      });
       return expense;

    },
    gain: function(){
    var gain = 0;
      this.entries.forEach( function(entry){

      if(entry.amount > 0){
      	gain = gain + entry.amount
      }else{

      }

      });
       return gain;
    }
      }

      })


var myVar = setInterval(myTimer, 1000);

function myTimer() {
    var d = new Date();
    document.getElementById("clockHeader").innerHTML = d.toLocaleTimeString();
}

## index.html
<head>
  <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</head>


<body>

<div id = "app">

<h1 id = "clockHeader">

</h1>
<h3>

 Balance: {{balance}}

</h3>

<h4>
 Gain: {{gain}}
</h4>

<h4>
 Expenditure: {{expenses}}
</h4>
<div id = "table">

<table>
  <tr id = "headers">
    <th>Amount</th>
    <th>Reference</th>
    <th>Date</th>
  </tr>

  <tr v-for = "entry in entries" :class = "{'positive': entry.positive, 'negative': entry.negative}">

   <td>{{parseFloat(entry.amount)}}</td>
    <td>{{entry.reference}}</td>
    <td>{{entry.date.getMonth() + "/" + entry.date.getDay() + "/" + entry.date.getFullYear() + " " + entry.date.getHours() + ":" + entry.date.getMinutes()}}</td>

  </tr>


</table>


</div>

<div id = "inputForm">
<input v-model="amount" placeholder = "Amount">
<input v-model="reference" placeholder = "Reference">
<button @click = "pushEntry" class="waves-effect waves-light btn">
Add Data
</button>
</div>


</div>

</body>
	#table {
	width: 400px;
	margin: auto;
	text-align: center;
	}

	#inputForm{
	width: 400px;
	margin: auto;
	margin-top: 50px;
	}

	#headers{
	background: rgb(220, 220, 220);
	font-size: 17px;
	font-family: "Raleway", sans-serif;
	text-align: center;
	}

	#clockHeader{
	padding-top: 20px;
	padding-bottom: 20px;
	text-align:center;
	width: 50%;
	margin: auto;
	}

	.positive{
	background: rgb(230, 240, 230);
	color: rgb(50, 100, 50);
	}

	.negative{
	background: rgb(240, 230, 230);
	color: rgb(100, 50, 50);
	}
	new Vue({
	el: "#app",
	data:{
	entries:[],
	amount:"",
	reference:'',
	isPositive: true,
	isNegative: false



	},
	methods: {
	pushEntry: function(){

	if(parseFloat(this.amount) > 0){
	this.isPositive = true;
	this.isNegative = false;
	} else {
	this.isPositive = false;
	this.isNegative = true;
	}


	var Entry = {
	amount: parseFloat(this.amount),
	reference: this.reference,
	date: new Date(),
	positive: this.isPositive,
	negative: this.isNegative

	}

	this.entries.push(Entry);
	this.amount = '';
	this.reference = '';
	this.positive = true;
	this.negative = false;

	}
	},
	computed:{


	balance: function(){
	var sum = 0;
	this.entries.forEach( function(entry){
	sum += entry.amount;})
	return sum;
	},

	expenses: function(){
	var expense = 0;
	this.entries.forEach( function(entry){

	if(entry.amount < 0){
	expense = expense - entry.amount
	}else{
	console.log(entry.amount);
	}

	});
	return expense;

	},
	gain: function(){
	var gain = 0;
	this.entries.forEach( function(entry){

	if(entry.amount > 0){
	gain = gain + entry.amount
	}else{

	}

	});
	return gain;
	}
	}

	})









	var myVar = setInterval(myTimer, 1000);

	function myTimer() {
	var d = new Date();
	document.getElementById("clockHeader").innerHTML = d.toLocaleTimeString();
	}
	<head>
	<!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

	<!-- Compiled and minified JavaScript -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
	</head>


	<body>

	<div id = "app">

	<h1 id = "clockHeader">

	</h1>
	<h3>

	Balance: {{balance}}

	</h3>

	<h4>
	Gain: {{gain}}
	</h4>

	<h4>
	Expenditure: {{expenses}}
	</h4>
	<div id = "table">

	<table>
	<tr id = "headers">
	<th>Amount</th>
	<th>Reference</th>
	<th>Date</th>
	</tr>

	<tr v-for = "entry in entries" :class = "{'positive': entry.positive, 'negative': entry.negative}">

	<td>{{parseFloat(entry.amount)}}</td>
	<td>{{entry.reference}}</td>
	<td>{{entry.date.getMonth() + "/" + entry.date.getDay() + "/" + entry.date.getFullYear() + " " + entry.date.getHours() + ":" + entry.date.getMinutes()}}</td>

	</tr>



	</table>



	</div>

	<div id = "inputForm">
	<input v-model="amount" placeholder = "Amount">
	<input v-model="reference" placeholder = "Reference">
	<button @click = "pushEntry" class="waves-effect waves-light btn">
	Add Data
	</button>
	</div>


	</div>

	</body>