0frasure/index.html

## index.html
<!DOCTYPE html>
<html>
<body>

<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Roboto', sans-serif;
}

a {
  display: inline-block;
  color: grey;
  background-color: lightgrey;
  width: 40px;
  text-align: center;
  margin: 1px .2px .2px .2px;
}

.e {
  display: inline-block;
  width: 129px;
  color: #eee;
  background-color: #66CCFF;
}

.f {
  color: #eee;
  background-color: #66FF66;
}

.c {
  color: #eee;
  background-color: #FF5C5C;
}

#header {
  display: inline-block;
  width: 170px;
  text-align: right;
  height: 50px;
}
</style>


<h1 id="header">0</h1>

<br>

<a onclick="f1()"> 1</a>
<a onclick="f2()"> 2</a>
<a onclick="f3()"> 3</a>
<a class="f"> + </a>
<br>
<a onclick="f4()"> 4</a>
<a onclick="f5()"> 5</a>
<a onclick="f6()"> 6</a>
<a class="f"> - </a>
<br>
<a onclick="f7()"> 7</a>
<a onclick="f8()"> 8</a>
<a onclick="f9()"> 9</a>
<a class="f"> × </a>
<br>
<a onclick="de()"> .</a>
<a onclick="f0()"> 0</a>
<a onclick="ne()"> -</a>
<a class="f"> ÷ </a>

<br>

<a class="e"> = </a>
<a class="c" onclick="f0()"> CLR </a>

<script>

function f0() {
var nuA = "0";
var element = document.getElementById("header");
element.innerHTML = "0";
}

function f1() {
var nuB = "1";
var element = document.getElementById("header");
element.innerHTML = "1";
}

function f2() {
var nuC = "2";
var element = document.getElementById("header");
element.innerHTML = "2";
}

function f3() {
var nuC = "3";
var element = document.getElementById("header");
element.innerHTML = "3";
}

function f4() {
var element = document.getElementById("header");
element.innerHTML = "4";
}
function f5() {
var element = document.getElementById("header");
element.innerHTML = "5";
}

function f6() {
var element = document.getElementById("header");
element.innerHTML = "6";
}

function f7() {
var element = document.getElementById("header");
element.innerHTML = "7";
}

function f8() {
var element = document.getElementById("header");
element.innerHTML = "8";
}

function f9() {
var element = document.getElementById("header");
element.innerHTML = "9";
}

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
	<style>
	body {
	font-family: 'Roboto', sans-serif;
	}

	a {
	display: inline-block;
	color: grey;
	background-color: lightgrey;
	width: 40px;
	text-align: center;
	margin: 1px .2px .2px .2px;
	}

	.e {
	display: inline-block;
	width: 129px;
	color: #eee;
	background-color: #66CCFF;
	}

	.f {
	color: #eee;
	background-color: #66FF66;
	}

	.c {
	color: #eee;
	background-color: #FF5C5C;
	}

	#header {
	display: inline-block;
	width: 170px;
	text-align: right;
	height: 50px;
	}
	</style>


	<h1 id="header">0</h1>

	<br>

	<a onclick="f1()"> 1</a>
	<a onclick="f2()"> 2</a>
	<a onclick="f3()"> 3</a>
	<a class="f"> + </a>
	<br>
	<a onclick="f4()"> 4</a>
	<a onclick="f5()"> 5</a>
	<a onclick="f6()"> 6</a>
	<a class="f"> - </a>
	<br>
	<a onclick="f7()"> 7</a>
	<a onclick="f8()"> 8</a>
	<a onclick="f9()"> 9</a>
	<a class="f"> × </a>
	<br>
	<a onclick="de()"> .</a>
	<a onclick="f0()"> 0</a>
	<a onclick="ne()"> -</a>
	<a class="f"> ÷ </a>

	<br>

	<a class="e"> = </a>
	<a class="c" onclick="f0()"> CLR </a>

	<script>

	function f0() {
	var nuA = "0";
	var element = document.getElementById("header");
	element.innerHTML = "0";
	}

	function f1() {
	var nuB = "1";
	var element = document.getElementById("header");
	element.innerHTML = "1";
	}

	function f2() {
	var nuC = "2";
	var element = document.getElementById("header");
	element.innerHTML = "2";
	}

	function f3() {
	var nuC = "3";
	var element = document.getElementById("header");
	element.innerHTML = "3";
	}

	function f4() {
	var element = document.getElementById("header");
	element.innerHTML = "4";
	}
	function f5() {
	var element = document.getElementById("header");
	element.innerHTML = "5";
	}

	function f6() {
	var element = document.getElementById("header");
	element.innerHTML = "6";
	}

	function f7() {
	var element = document.getElementById("header");
	element.innerHTML = "7";
	}

	function f8() {
	var element = document.getElementById("header");
	element.innerHTML = "8";
	}

	function f9() {
	var element = document.getElementById("header");
	element.innerHTML = "9";
	}

	</script>

	</body>
	</html>