04wakeup/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="ES6 in Action: New String Methods [3]">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>ES6 in Action: New String Methods</title>

<style id="jsbin-css">
.income{
  color: blue;
}
.money
{
  color:red;
}
.moneyLost
{
  color:green;
}
.moneyFinal
{
  color:blue;
}
.moneyHeader
{
  color:gold;
}
</style>
</head>
<body>
  <h1>Income calculator</h1>
  <h2 id = "income" class = "income">This is your income<h2>
    <h2 id = "change" class="money">Your Current Bank Account</h2>
  <button style="button" onclick="myAwesomeFunction2()">Add income</button><br><br>
  <button style="button" onclick="myAwesomFunction()">Calculate money debt</button><br><br>

  <h2 class="moneyHeader"> Money you owe</h2>
  <p id = "rent" class="moneyLost">Rent</p>
  <p id = "car" class="moneyLost">Car</p>
  <p id = "food" class="moneyLost">Food</p>
  <p id = "entertainment" class="moneyLost">Entertainment</p>
  <h2 id = "result" class="moneyLost">Money you have left</h2>

  <script>

    var incomeMoney = 0, bankAccount = 0, debt = 0, rent = 800, car = 200, food = 300, entertainment = 200;  // Income Variables

    debt = rent + car + food + entertainment;

    function myAwesomFunction()
    {

      document.getElementById("rent").innerHTML= "Rent Per month =$" + rent + " Total rent: $" + rent;
      document.getElementById("car").innerHTML= "Car Per month =$" + car + " Total car: $" + car;
      document.getElementById("food").innerHTML= "Food Per month =$" + food + " Total food: $" + food;
      document.getElementById("entertainment").innerHTML= "Entertainment Per month =$" + entertainment + " Total entertainment: $" + entertainment;

      document.getElementById("result").innerHTML= "This is how much money you have left: $" + (bankAccount - debt); // write new balance
      bankAccount = bankAccount - debt;  // dept equation
      document.getElementById("change").innerHTML= "Bank Account: $" + bankAccount;  // print new bank account number

      rent = rent + 800;
      car = car + 200;
      food = food + 300;
      entertainment = entertainment + 200;
    }

    function myAwesomeFunction2(){
      incomeMoney = incomeMoney + 2500;  // calculate new gross income
      bankAccount = bankAccount + 2500;  // calculate new bank account number
      document.getElementById("change").innerHTML= "Bank Account: $" + bankAccount;  // print new bank account number
      document.getElementById("income").innerHTML = "This is your total income: $" + incomeMoney; // print total income to screen.

    }
  </script>
     <script id="jsbin-javascript">
"use strict";
</script>


<script id="jsbin-source-javascript" type="text/javascript"> </script><script id="jsbin-javascript">
"use strict";
</script>


<script id="jsbin-source-css" type="text/css">.income{
  color: blue;
}
.money
{
  color:red;
}
.moneyLost
{
  color:green;
}
.moneyFinal
{
  color:blue;
}
.moneyHeader
{
  color:gold;
}</script>

<script id="jsbin-source-javascript" type="text/javascript"> </script></body>
</html>

## jsbin.hunuhos.css
.income{
  color: blue;
}
.money
{
  color:red;
}
.moneyLost
{
  color:green;
}
.moneyFinal
{
  color:blue;
}
.moneyHeader
{
  color:gold;
}

## jsbin.hunuhos.js
"use strict";
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="ES6 in Action: New String Methods [3]">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>ES6 in Action: New String Methods</title>

	<style id="jsbin-css">
	.income{
	color: blue;
	}
	.money
	{
	color:red;
	}
	.moneyLost
	{
	color:green;
	}
	.moneyFinal
	{
	color:blue;
	}
	.moneyHeader
	{
	color:gold;
	}
	</style>
	</head>
	<body>
	<h1>Income calculator</h1>
	<h2 id = "income" class = "income">This is your income<h2>
	<h2 id = "change" class="money">Your Current Bank Account</h2>
	<button style="button" onclick="myAwesomeFunction2()">Add income</button><br><br>
	<button style="button" onclick="myAwesomFunction()">Calculate money debt</button><br><br>

	<h2 class="moneyHeader"> Money you owe</h2>
	<p id = "rent" class="moneyLost">Rent</p>
	<p id = "car" class="moneyLost">Car</p>
	<p id = "food" class="moneyLost">Food</p>
	<p id = "entertainment" class="moneyLost">Entertainment</p>
	<h2 id = "result" class="moneyLost">Money you have left</h2>

	<script>

	var incomeMoney = 0, bankAccount = 0, debt = 0, rent = 800, car = 200, food = 300, entertainment = 200; // Income Variables

	debt = rent + car + food + entertainment;

	function myAwesomFunction()
	{

	document.getElementById("rent").innerHTML= "Rent Per month =$" + rent + " Total rent: $" + rent;
	document.getElementById("car").innerHTML= "Car Per month =$" + car + " Total car: $" + car;
	document.getElementById("food").innerHTML= "Food Per month =$" + food + " Total food: $" + food;
	document.getElementById("entertainment").innerHTML= "Entertainment Per month =$" + entertainment + " Total entertainment: $" + entertainment;

	document.getElementById("result").innerHTML= "This is how much money you have left: $" + (bankAccount - debt); // write new balance
	bankAccount = bankAccount - debt; // dept equation
	document.getElementById("change").innerHTML= "Bank Account: $" + bankAccount; // print new bank account number

	rent = rent + 800;
	car = car + 200;
	food = food + 300;
	entertainment = entertainment + 200;
	}

	function myAwesomeFunction2(){
	incomeMoney = incomeMoney + 2500; // calculate new gross income
	bankAccount = bankAccount + 2500; // calculate new bank account number
	document.getElementById("change").innerHTML= "Bank Account: $" + bankAccount; // print new bank account number
	document.getElementById("income").innerHTML = "This is your total income: $" + incomeMoney; // print total income to screen.

	}
	</script>
	<script id="jsbin-javascript">
	"use strict";
	</script>


	<script id="jsbin-source-javascript" type="text/javascript"> </script><script id="jsbin-javascript">
	"use strict";
	</script>


	<script id="jsbin-source-css" type="text/css">.income{
	color: blue;
	}
	.money
	{
	color:red;
	}
	.moneyLost
	{
	color:green;
	}
	.moneyFinal
	{
	color:blue;
	}
	.moneyHeader
	{
	color:gold;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript"> </script></body>
	</html>