Notes1-this is web programming ... HTML2-I need the calculator l.pdf

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-size: 150px;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
div.button2 {
position: relative;
margin: 20px;
width: 360px;
height: 160px;
border: 0;
font-size: 150px;
text-align: center;
cursor: pointer;
}
div.button {
position: relative;
margin: 20px;
width: 160px;
height: 160px;
border: 0;

font-size: 150px;
text-align: center;
cursor: pointer;
}
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;
}
Demo
0
+
-
*
/
7
8
9
4
5
6
C
1
2
3
0
.
= In this assignment, you will develop a simple calculator similar to the following example 7 8 9

C
Solution
HTML:
Del%+
789-
456x
123/
0.=
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;
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;
screen.innerHTML = screen.innerHTML.concat("");
}
else if(output) {
screen.innerHTML = output.concat(operator);
}
},false);

Notes1-this is web programming ... HTML2-I need the calculator l.pdf

Recommended

Recommended

More Related Content

Similar to Notes1-this is web programming ... HTML2-I need the calculator l.pdf

Similar to Notes1-this is web programming ... HTML2-I need the calculator l.pdf (20)

More from aminbijal86

More from aminbijal86 (20)

Recently uploaded

Recently uploaded (20)

Notes1-this is web programming ... HTML2-I need the calculator l.pdf