Notes 1-this is web programming ... HTML 2-I need the calculator look exacly wha
ID: 3794631 • Letter: N
Question
Notes
1-this is web programming ... HTML
2-I need the calculator look exacly what in the picture with buttons 1 through 9( see the picture )
3- I have tried to do it but is not complete and my code ( the calculator acting wrong )
4- for example if I enter ( 9*9 ) I should get 81 and so on..... make sure ( - , + , / , and * ) working like other calculator please
5- here is the picture of the calculator with the requierments and my code also...
6- once you done, please copy and paste the code here. not provide code with picture. thanks in advance...
1-!DOCTYPE html
2-html
3-head
4-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: 360px;
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;
}
</style>
<meta charset="utf-8">
<title>Demo</title>
</head>
<script>
var number = 0;
function update() {
document.getElementById("monitor").innerHTML = number;
}
function addOne() {
number++;
update();
}
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">+</div>
</td>
<td>
<div class="button">-</div>
</td>
<td>
<div class="button">*</div>
</td>
<td>
<div class="button">/</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
<div class="button">7</div>
</td>
<td>
<div class="button">8</div>
</td>
<td>
<div class="button">9</div>
</td>
</tr>
<tr>
<td>
<div class="button">4</div>
</td>
<td>
<div class="button">5</div>
</td>
<td>
<div class="button">6</div>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<div class="button1">C</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
<div class="button">1</div>
</td>
<td>
<div class="button">2</div>
</td>
<td>
<div class="button">3</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<div class="button2">0</div>
</td>
<td>
<div class="button">.</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>
Explanation / Answer
HTML:
<div id="background"><!-- Main background -->
<div id="result"></div>
<div id="main">
<div id="first-rows">
<button class="del-bg" id="delete">Del</button>
<button value="%" class="btn-style operator opera-bg fall-back">%</button>
<button value="+" class="btn-style opera-bg value align operator">+</button>
</div>
<div class="rows">
<button value="7" class="btn-style num-bg num first-child">7</button>
<button value="8" class="btn-style num-bg num">8</button>
<button value="9" class="btn-style num-bg num">9</button>
<button value="-" class="btn-style opera-bg operator">-</button>
</div>
<div class="rows">
<button value="4" class="btn-style num-bg num first-child">4</button>
<button value="5" class="btn-style num-bg num">5</button>
<button value="6" class="btn-style num-bg num">6</button>
<button value="*" class="btn-style opera-bg operator">x</button>
</div>
<div class="rows">
<button value="1" class="btn-style num-bg num first-child">1</button>
<button value="2" class="btn-style num-bg num">2</button>
<button value="3" class="btn-style num-bg num">3</button>
<button value="/" class="btn-style opera-bg operator">/</button>
</div>
<div class="rows">
<button value="0" class="num-bg zero" id="delete">0</button>
<button value="." class="btn-style num-bg period fall-back">.</button>
<button value="=" id="eqn-bg" class="eqn align">=</button>
</div>
</div>
</div>
CSS:
body {
background:#777;
}
#background {
width:300px;
height:400px;
background:gray;
margin:50px auto;
-webkit-animation:bgChange 2s 2s alternate infinite;
transition: all 2s ease;
}
button {
border:0;
color:#fff;
}
#result {
display:block;
font-family: sans-serif;
width:230px;
height:40px;
margin:10px auto;
text-align: right;
border:0;
background:#3b3535;
color:#fff;
padding-top:20px;
font-size:20px;
margin-left: 25px;
outline: none;
overflow: hidden;
letter-spacing: 4px;
position: relative;
top:10px;
}
#result:hover {
cursor: text;
}
#first-rows {
margin-bottom: 20px;
position: relative;
top:10px;
}
.rows {
width:300px;
margin-top:10px;
}
#delete {
width:110px;
height:50px;
margin-left:25px;
border-radius:4px;
}
/* Aligning the division and dot button properly */
.fall-back {
margin-left:3px !important;
}
/* Aligning the addition and equals to button properly */
.align {
margin-left: 6px !important;
}
/* Button styling */
.btn-style {
width:50px;
height:50px;
margin-left:5px;
border-radius:4px;
}
.eqn {
width:50px;
height:50px;
margin-left:5px;
border-radius:4px;
}
.first-child {
margin-left:25px;
}
/* Adding background color to the number values */
.num-bg {
background:#000;
color:#fff;
font-size:26px;
cursor:pointer;
outline:none;
border-bottom:3px solid #333;
}
.num-bg:active {
background:#000;
color:#fff;
font-size:26px;
cursor:pointer;
outline:none;
box-shadow: inset 5px 5px 5px #555;
}
/*Adding background color to the operator values */
.opera-bg {
background:#333;
color:#fff;
font-size:26px;
cursor: pointer;
outline:none;
border-bottom:3px solid #555;
}
.opera-bg:active {
background:#333;
color:#fff;
font-size:26px;
cursor: pointer;
outline:none;
box-shadow: inset 4px 4px 4px #555;
}
/*Adding a background color to the delete button */
.del-bg {
background:#24b4de;
color:#fff;
font-size:26px;
cursor: pointer;
outline:none;
border-bottom:3px solid #399cb9;
}
.del-bg:active {
background:#24b4de;
color:#fff;
font-size:26px;
cursor: pointer;
outline:none;
box-shadow: inset 4px 4px 4px #399cb9;
}
/*Adding a background color to the equals to button */
#eqn-bg {
background:#17a928;
color:#fff;
font-size:26px;
cursor: pointer;
outline:none;
border-bottom:3px solid #1f7a29;
}
#eqn-bg:active {
background:#17a928;
color:#fff;
font-size:26px;
cursor: pointer;
outline:none;
box-shadow: inset 4px 4px 4px #1f7a29;
}
@-webkit-keyframes bgChange {
0% {
background:#24b4de;
}
50% {
background:#17a928;
}
100% {
background:#399cb9;
}
}
JS:
window.onload = function() {
var current,
screen,
output,
limit,
zero,
period,
operator;
screen = document.getElementById("result");
var elem = document.querySelectorAll(".num");
var len = elem.length;
for(var i = 0; i < len; i++ ) {
elem[i].addEventListener("click",function() {
num = this.value;
output = screen.innerHTML +=num;
limit = output.length;
if(limit > 16 ) {
alert("Sorry no more input is allowed");
}
},false);
}
document.querySelector(".zero").addEventListener("click",function() {
zero = this.value;
if(screen.innerHTML === "") {
output = screen.innerHTML = zero;
}
else if(screen.innerHTML === output) {
output = screen.innerHTML +=zero;
}
},false);
document.querySelector(".period").addEventListener("click",function() {
period = this.value;
if(screen.innerHTML === "") {
output = screen.innerHTML = screen.innerHTML.concat("0.");
}
else if(screen.innerHTML === output) {
screen.innerHTML = screen.innerHTML.concat(".");
}
},false);
document.querySelector("#eqn-bg").addEventListener("click",function() {
if(screen.innerHTML === output) {
screen.innerHTML = eval(output);
}
else {
screen.innerHTML = "";
}
},false);
document.querySelector("#delete").addEventListener("click",function() {
screen.innerHTML = "";
},false);
var elem1 = document.querySelectorAll(".operator");
var len1 = elem1.length;
for(var i = 0; i < len1; i++ ) {
elem1[i].addEventListener("click",function() {
operator = this.value;
if(screen.innerHTML === "") {
screen.innerHTML = screen.innerHTML.concat("");
}
else if(output) {
screen.innerHTML = output.concat(operator);
}
},false);
}
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.