*****************************************************************
jsDynamic.html file Contents
*****************************************************************

<!DOCTYPE html>
<html lang='en' class=''>
<head>
<script type="text/javascript" src="js/function.js"></script>
<link rel="stylesheet" href="css/calc.css">
</head>

<body>
<div class="mycalc">
<form name="calculator" id="calculator">
<input type="text" name="inputwindow" id="inputwindow">
<div>
<input type="button" id="one" value="1" onclick="takeValue(document.getElementById('one').value)">
<input type="button" id="two" value="2" onclick="takeValue(document.getElementById('two').value)">
<input type="button" id="three" value="3" onclick="takeValue(document.getElementById('three').value)">
<input type="button" id="plus" value="+" onclick="takeValue(document.getElementById('plus').value)">
</div>

<div>
<input type="button" id="four" value="4" onclick="takeValue(document.getElementById('four').value)">
<input type="button" id="five" value="5" onclick="takeValue(document.getElementById('five').value)">
<input type="button" id="six" value="6" onclick="takeValue(document.getElementById('six').value)">
<input type="button" id="minus" value="-" onclick="takeValue(document.getElementById('minus').value)">
</div>

<div>
<input type="button" id="seven" value="7" onclick="takeValue(document.getElementById('seven').value)">
<input type="button" id="eight" value="8" onclick="takeValue(document.getElementById('eight').value)">
<input type="button" id="nine" value="9" onclick="takeValue(document.getElementById('nine').value)">
<input type="button" id="by" value="*" onclick="takeValue(document.getElementById('by').value)">
</div>

<div>
<input type="button" id="zero" value="0" onclick="takeValue(document.getElementById('zero').value)">
<input type="button" id="decimal" value="." onclick="takeValue(document.getElementById('decimal').value)">
<input type="button" id="devide" value="/" onclick="takeValue(document.getElementById('devide').value)">
<input type="button" id="percent" value="%" onclick="takeValue(document.getElementById('percent').value)">	
</div>

<div class="results">
<input type="button" id="equal" value="=" onclick="calculateResult()">
<button type="button" id="clear" value="" onclick="clearInput(document.getElementById('clear').value)">Clear</button>
</div>

</form>	
</div>

<script >function takeValue(x) {
	document.getElementById('inputwindow').value += x;
}

function clearInput(y) {
	document.getElementById('inputwindow').value = y;
}

function calculateResult() {
	var result = eval(document.getElementById('inputwindow').value);
	document.getElementById('inputwindow').value = result;
}
</script>
</body>
</html>













*****************************************************************
calc.css file Contents (place this file in the css folder)
*****************************************************************
body {
	background-color: #000;
}

body div.mycalc {
	text-align: center;
	width: 214px;
	margin: 0 auto;
}

div input[type='button'], button {
	width: 50px;
	height: 50px;
	margin: 2px 0;
}

div input[type="text"] {
	height: 50px;
	width: 100%;
	background-color: #999;
	color: #fff;
	padding: 12px 20px;
    margin-top: 100px;
    margin-bottom: 4px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #777;
}

div.results input, div.results button {
	height: 50px;
	width: 104px;
}

div.results button {
	background-color: red;
	color: #fff;
	border: 1px solid red;
}

div.results input {
	background-color: #fd7202;
	color: #fff;
	border: 1px solid #fd7202;
}

#plus, #minus, #by, #devide, #percent {
	background-color: green;
	color: #fff;
	border: 1px solid green;
	font-size: 16px;
}









*****************************************************************
function.js file Contents (place this file in the js folder)
*****************************************************************

function takeValue(x) {
	document.getElementById('inputwindow').value += x;
}

function clearInput(y) {
	document.getElementById('inputwindow').value = y;
}

function calculateResult() {
	var result = eval(document.getElementById('inputwindow').value);
	document.getElementById('inputwindow').value = result;
}

