Note: this is web programming class, I asked to create a calculator as in the pi
ID: 3798189 • Letter: N
Question
Note: this is web programming class, I asked to create a calculator as in the picture, and I did it but is not the same that I need it ( I will put mu code ) ... so all I need is two things,,..
1-I need the screen mointor of the calculator it show zero as a default for example ( if you have iphone or any other phone and you open the calculator you will see a zero number in the screen.
2- the size of the calculator is not correct in my code i think it has a problem , I need the size as in asked in the requirment ...
that's all . thanks in advance ..
this is my code ...
1-!DOCTYPE html>
2-html>
3-head>
4-style>
table.maintable {
border-spacing: 0;
width: 100px;
height: 200px;
background-color: #81C7D4;
}
#monitor {
margin: 20px;
width: 750px;
height: 160px;
border: 0px;
background-color: white;
font-family: monospace;
text-align: right;
font-size: 160px;
}
input.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;
}
input.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;
}
input.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;
}
input.button:hover,input.button1:hover,input.button2:hover {
position: relative;
top: -5px;
left: -5px;
box-shadow: 10px 10px 10px;
}
in.button:active {
position: relative;
top: 5px;
left: 5px;
box-shadow: 0 0 0;
}
</style>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<form Name="calc">
<table border=0>
<table class="maintable">
<tr>
<td colspan=4><input id="monitor" name="display" type="text"></td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input class="button" type=button value="+"></td>
<td><input class="button" type=button value="-"></td>
<td><input class="button" type=button value="*"></td>
<td><input class="button" type=button value="/"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td><input class="button" type=button value="1"></td>
<td><input class="button" type=button value="2"></td>
<td><input class="button" type=button value="3"></td>
</tr>
<tr>
<td><input class="button" type=button value="4"></td>
<td><input class="button" type=button value="5"></td>
<td><input class="button" type=button value="6"></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td><input class="button1" type=button value="C"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td><input class="button" type=button value="7"></td>
<td><input class="button" type=button value="8"></td>
<td><input class="button" type=button value="9"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input class="button2" type=button value="0"></td>
<td><input class="button" type=button value="."></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td><input class="button1" type=button value="="></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</form>
</body>
</html>
Explanation / Answer
<html>
<head></head>
<body>
<h3>Simple Calculator</h3>
<br/>
<style>
#calc{width:400px;height:600px;}
#btn{width:100%;height:40px;font-size:20px;}
</style>
<form Name="calc">
<table id="calc" border=2>
<tr>
<td colspan=5><input id="btn" name="display" type="text"></td>
<td><input name="M" type="number"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MC"></td>
<td><input id="btn" type=button value="0"></td>
<td><input id="btn" type=button value="1"></td>
<td><input id="btn" type=button value="2"></td>
<td><input id="btn" type=button value="+"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MS"></td>
<td><input id="btn" type=button value="3"></td>
<td><input id="btn" type=button value="4"></td>
<td><input id="btn" type=button value="5"></td>
<td><input id="btn" type=button value="-"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MR"></td>
<td><input id="btn" type=button value="6"></td>
<td><input id="btn" type=button value="7"></td>
<td><input id="btn" type=button value="8"></td>
<td><input id="btn" type=button value="x"></td>
</tr>
<tr>
<td><input id="btn" type=button value="M+"></td>
<td><input id="btn" type=button value="9"></td>
<td><input id="btn" type=button value="±"
>
</td>
<td><input id="btn" type=button value="="></td>
<td><input id="btn" type=button value="/"></td>
</tr>
<tr>
<td><input id="btn" type=button value="1/x"></td>
<td><input id="btn" type=button value="."></td>
<td><input id="btn" type=button value="x2"></td>
<td><input id="btn" type=button value=""></td>
<td><input id="btn" type=button value="C"></td>
</tr>
</table>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.