Homework SourseNotes 1this is web programming HTML 2I need the calculator
Notes
1-this is web programming ... HTML
2-I need the calculator look exacly what in the picture .
3-when you done please do not take a picture for the code .... just simply copy and past the code here , so it easy to me have it .
4- please used the requirments for this program .. thanks in advance,,..
this is a demo code ( not complet ), please complete it and make it look like in the picture
In this assignment, you will develop a simple calculator similar to the following example 7 8 9 CSolution
<!DOCTYPE html>
<html>
<head>
<style>
table {
//border-spacing: 0;
//width: 400px;
//height: 400px;
background-color: #81C7D4;
}
/*tr {
height: 200px;
}
td {
padding: 0;
margin: 0;
height: 200px;
} */
#monitor {
margin: 20px;
width: 780px;
height: 160px;
border: 0px;
background-color: white;
font-family: monospace;
text-align: right;
font-size: 160px;
}
div.button1 {
position: relative;
margin: 20px;
width: 160px;
height: 360px;
border: 0;
background-color: #A5DEE4;
font-family: monospace;
font-size: 150px;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
div.button2 {
position: relative;
margin: 20px;
width: 360px;
height: 160px;
border: 0;
background-color: #A5DEE4;
font-family: monospace;
font-size: 150px;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
div.button {
position: relative;
margin: 20px;
width: 160px;
height: 160px;
border: 0;
background-color: #A5DEE4;
font-family: monospace;
font-size: 150px;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
div.button:hover {
position: relative;
top: -5px;
left: -5px;
box-shadow: 10px 10px 10px;
}
div.button:active {
position: relative;
top: 5px;
left: 5px;
box-shadow: 0 0 0;
}
div.button1:hover {
position: relative;
top: -5px;
left: -5px;
box-shadow: 10px 10px 10px;
}
div.button1:active {
position: relative;
top: 5px;
left: 5px;
box-shadow: 0 0 0;
}
div.button2:hover {
position: relative;
top: -5px;
left: -5px;
box-shadow: 10px 10px 10px;
}
div.button2:active {
position: relative;
top: 5px;
left: 5px;
box-shadow: 0 0 0;
}
</style>
<meta charset=\"utf-8\">
<title>Demo</title>
</head>
<script>
var number = 0;
var lastAction = 0;
function update() {
document.getElementById(\"monitor\").innerHTML = number;
}
function update(actionString) {
document.getElementById(\"monitor\").innerHTML = actionString;
}
function addOne() {
number++;
update();
}
function add(actionString) {
//alert(actionString);
if(isNaN(actionString)){
if(actionString == \"+\"){
lastAction = \"+\";
}else if(actionString == \"-\"){
lastAction = \"-\";
}else if(actionString == \"*\"){
lastAction = \"*\";
}else if(actionString == \"/\"){
lastAction = \"/\";
}else if(actionString == \"C\"){
number = \"0\";
lastAction = \"0\";
update(number);
}else if(actionString == \"=\"){
number = \"0\";
lastAction = \"0\";
}else if(actionString == \".\"){
number = number + \".\";
update(number);
lastAction = \"0\";
}
}else{
//alert(\"last action \"+lastAction);
if(lastAction == \"+\"){
number = parseInt(number) + parseInt(actionString);
}else if(lastAction == \"-\"){
number = parseInt(number) - parseInt(actionString);
}else if(lastAction == \"*\"){
number = parseInt(number) * parseInt(actionString);
}else if(lastAction == \"/\"){
number = parseInt(number) / parseInt(actionString);
}else if(lastAction == \"0\"){
if(number == \"0\"){
//alert(\"number\" + number);
number = actionString;
}else{
number = number + actionString;
}
}
update(number);
lastAction = \"0\";
}
}
function minusOne() {
number--;
update();
}
</script>
<body>
<table>
<tr>
<td>
<table align=\"right\">
<tr>
<td >
<div id=\"monitor\">0</div>
</td>
</tr>
</table>
<td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<div class=\"button\" onclick=\"add(\'+\')\">+</div>
</td>
<td>
<div class=\"button\" onclick=\"add(\'-\')\">-</div>
</td>
<td>
<div class=\"button\" onclick=\"add(\'*\')\">*</div>
</td>
<td>
<div class=\"button\" onclick=\"add(\'/\')\">/</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
<div class=\"button\" onclick=\"add(\'7\')\">7</div>
</td>
<td>
<div class=\"button\" onclick=\"add(\'8\')\">8</div>
</td>
<td>
<div class=\"button\" onclick=\"add(\'9\')\">9</div>
</td>
</tr>
<tr>
<td>
<div class=\"button\" onclick=\"add(\'4\')\">4</div>
</td>
<td>
<div class=\"button\" onclick=\"add(\'5\')\">5</div>
</td>
<td>
<div class=\"button\" onclick=\"add(\'6\')\">6</div>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<div class=\"button1\" onclick=\"add(\'C\')\">C</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
<div class=\"button\" onclick=\"add(\'1\')\">1</div>
</td>
<td>
<div class=\"button\" onclick=\"add(\'2\')\">2</div>
</td>
<td>
<div class=\"button\" onclick=\"add(\'3\')\">3</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<div class=\"button2\" onclick=\"add(\'0\')\">0</div>
</td>
<td>
<div class=\"button\" onclick=\"add(\'.\')\">.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<div class=\"button1\" >=</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Output - Tested and every thing is find. calculator is completly working as per expectation
