<html lang="en">
<head>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
<title>Javascript Calculator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta name="msvalidate.01" content="2367568A0F0A5309B8181861E7644841" />
</head>
<body style="background-color: #e5e5ff;">
<nav class="navbar navbar-static-top navbar-inverse" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.drewbryan.com" target="_blank">DrewBryan.com</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.drewbryan.com">Home</a></li>
<li><a href="#about" target="_blank">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://twitter.com/drewbryandrewb1" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://goo.gl/2lwBKC" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://github.com/DrewStephen" target="_blank"><i class="fa fa-github"></i></a></li>
<li><a href="https://www.freecodecamp.com/drewstephen" target="_blank"><i class="fa fa-fire fa-fw"></i></a></li>
</ul>
</div>
</nav>
<div class="div1">
<div class="container">
<div class="row">
<div class="col-md-3 center-block" style="float:none">
<h3 class="serif" style="text-align: center"><strong>HTML/Javascript Calculator</strong></h3>
<br/>
<form Name="calc">
<div class="panel panel-default">
<div class="table-responsive table-bordered">
<table class="table" border=16>
<div style="text-align:center;">
<tr>
<td colspan=4 ><input class="btn btn-default" type="button" Name="display"></td>
</tr>
</div>
<tr>
<td><input class="btn btn-primary" type="button" value="C" OnClick="calc.display.value=''"></td>
<td><input class="btn btn-primary" type="button" value="π" OnClick="calc.display.value+='3.141592653589793'"></td>
<td><input class="btn btn-primary" type="button" value="%" OnClick="calc.display.value+='%'"></td>
<td><input class="btn btn-primary" type="button" value="/" OnClick="calc.display.value+='/'"></td>
</tr>
<tr>
<td><input class="btn btn-primary" type="button" value="7" OnClick="calc.display.value+='7'"></td>
<td><input class="btn btn-primary" type="button" value="8" OnClick="calc.display.value+='8'"></td>
<td><input class="btn btn-primary" type="button" value="9" OnClick="calc.display.value+='9'"></td>
<td><input class="btn btn-primary" type="button" value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr>
<td><input class="btn btn-primary" type="button" value="4" OnClick="calc.display.value+='4'"></td>
<td><input class="btn btn-primary" type="button" value="5" OnClick="calc.display.value+='5'"></td>
<td><input class="btn btn-primary" type="button" value="6" OnClick="calc.display.value+='6'"></td>
<td><input class="btn btn-primary" type="button" value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input class="btn btn-primary" type="button" value="1" OnClick="calc.display.value+='1'"></td>
<td><input class="btn btn-primary" type="button" value="2" OnClick="calc.display.value+='2'"></td>
<td><input class="btn btn-primary" type="button" value="3" OnClick="calc.display.value+='3'"</td>
<td><input class="btn btn-primary" type="button" value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input class="btn btn-primary" type="button" value="." OnClick="calc.display.value+='.'"></td>
<td><input class="btn btn-primary" type="button" value="0" OnClick="calc.display.value+='0'"></td>
<td><input class="btn btn-primary" type="button" value="τ" OnClick="calc.display.value+='6.283185307179586'"></td>
<td><input class="btn btn-primary" type="button" value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<br></br>
</div>
</div>
<h6>
<footer class="container-fluid text-center">
<p>© 2015 Andrew Bryan · All Rights Reserved ·</p>
</footer>
</h6>
</body>
</html>
<style type="text/css">
.div1 {
background-color: #99ccff;
}
td {
background-color: #e5e5ff;
color: white;
}
.btn {
background-color: #000080;
color: white;
width: 100%;
}
.btn:hover { background-color: #000033; }
.table {
max-width: none;
table-layout: fixed;;
}
.navbar {
display: inline-block;
width: 100%;
}
h3.serif {font-family: Arial, Helvetica, sans-serif;;}
h4 {
text-align: center;
}
.myHeader {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.table-bordered
{
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
.table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child
{
-webkit-border-top-left-radius: 20px;
border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
}
.table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered tfoot:last-child tr:last-child > td:first-child, .table-bordered tfoot:last-child tr:last-child > th:first-child
{
-webkit-border-bottom-left-radius: 20px;
border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
}
footer {
background-color: #000;
color: white;
padding: 15px;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
right: 0;
height: 44px;
}
</style>
