Skip to content

Commit f18ced3

Browse files
author
Joe Hanley
committed
Calculator grpahic is mostly done
1 parent 57d1708 commit f18ced3

File tree

3 files changed

+208
-0
lines changed

3 files changed

+208
-0
lines changed

‎Calculator.css

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
.calculator .background {
2+
/* Webkit (Safari/Chrome 10) */
3+
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DDDDDD), color-stop(1, #AFAFAF));
4+
5+
/* Webkit (Chrome 11+) */
6+
background-image: -webkit-linear-gradient(top, #DDDDDD 0%, #AFAFAF 100%);
7+
background-color:#ADADAD;
8+
width:427px;
9+
height:521px;
10+
position: absolute;
11+
}
12+
.calculator input[type=text]{
13+
background-color:#F0FBC8;
14+
border:none;
15+
font-size:28;
16+
text-align:right;
17+
width:374px;
18+
height: 94px;
19+
left: 24px;
20+
top: 8px;
21+
}
22+
.calculator .screen{
23+
width:374px;
24+
height:94px;
25+
background-color:#F0FBC8;
26+
border-radius:10px;
27+
border-style:inset;
28+
border-width:4px;
29+
left: 24px;
30+
top: 8px;
31+
position:relative;
32+
}
33+
34+
35+
.calculator .smallbutton {
36+
width: 90px;
37+
height: 55px;
38+
position: relative;
39+
left: 13px;
40+
top: 24px;
41+
background-color:#D8D5D0;
42+
border-radius:8px;
43+
border:outset;
44+
font-size:18pt;
45+
margin: 3px;
46+
font-family: 'Lucida Grande', 'Helvetica';
47+
color:#2F2F2F;
48+
}
49+
50+
51+
.calculator .tallbutton {
52+
width: 91px;
53+
height: 118px;
54+
position: relative;
55+
left: 16px;
56+
top: 25px;
57+
background-color:#D8D5D0;
58+
border-radius:8px;
59+
border:outset;
60+
font-size:18pt;
61+
font-family: 'Arial', 'Helvetica';
62+
color:#2F2F2F
63+
64+
}
65+
66+
.calculator .widebutton {
67+
width:193px;
68+
height: 55px;
69+
position: relative;
70+
left: 13px;
71+
top: 25px;
72+
background-color:#D8D5D0;
73+
border-radius:8px;
74+
border:outset;
75+
font-size:18pt;
76+
font-family:'Arial', 'Helvetica';
77+
color:#2F2F2F
78+
}
79+
80+
.calculator #row2 button {
81+
position: relative;
82+
top: 28px;
83+
}
84+
.calculator #row3 button {
85+
position: relative;
86+
top: 32px;
87+
}
88+
.calculator #row4 button {
89+
position: relative;
90+
top: 39px;
91+
}
92+
.calculator #row5 .tallbutton {
93+
position: relative;
94+
top: 46px;
95+
}
96+
.calculator #row5 .smallbutton {
97+
position: relative;
98+
top: 17px;
99+
}
100+
101+
.calculator #row6 button {
102+
position: relative;
103+
top: -10px;
104+
}
105+
106+
h{
107+
position:realtive;
108+
top:32;
109+
}
110+

‎Calculator.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<html>
2+
<head>
3+
<link href="Calculator.css" rel="stylesheet">
4+
</script>
5+
</head>
6+
<body>
7+
<div class = calculator>
8+
<div class = background>
9+
<div class = screen>
10+
<div class="entry">
11+
<input type="text" size=50>
12+
</input>
13+
</div>
14+
<div class="output">
15+
</div>
16+
</div>
17+
<div class="row" id="row1">
18+
<button class="smallbutton">MC</button>
19+
<button class="smallbutton">M+</button>
20+
<button class="smallbutton">M-</button>
21+
<button class="smallbutton">MR</button>
22+
</div>
23+
<div class="row" id="row2">
24+
<button class="smallbutton">C</button>
25+
<button class="smallbutton">&#177;</button>
26+
<button class="smallbutton">&divide;</button>
27+
<button class="smallbutton">&#215;</button>
28+
</class>
29+
</class>
30+
31+
</div>
32+
<div class="row" id="row3">
33+
<button class="smallbutton">7</button>
34+
<button class="smallbutton">8</button>
35+
<button class="smallbutton">9</button>
36+
<button class="smallbutton">&#8722;</button>
37+
</div>
38+
<div class="row" id="row4">
39+
<button class="smallbutton">4</button>
40+
<button class="smallbutton">5</button>
41+
<button class="smallbutton">6</button>
42+
<button class="smallbutton">+</button>
43+
</div>
44+
<div class="row" id="row5">
45+
<class="offset">
46+
<button class="smallbutton">1</button>
47+
<button class="smallbutton">2</button>
48+
<button class="smallbutton">3</button>
49+
</class>
50+
<button class="tallbutton"><h>=</h></button>
51+
</div>
52+
<div class="row" id="row6">
53+
<button class="widebutton">0</button>
54+
<button class="smallbutton">.</button>
55+
</div>
56+
<div class="row" id="row4"></div>
57+
<div class="row" id="row5"></div>
58+
<div class="row" id="row6"></div>
59+
</div>
60+
</div>
61+
</body>
62+
</html>

‎Day2.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
h1{
2+
font-family:'Helvetica', sans-serif;
3+
text-align:center;
4+
margin-bottom:64px;
5+
color:rgb(255,255,255);
6+
}
7+
/*Comments*/
8+
body{
9+
background-color: rgb(210,230,240);
10+
}
11+
.calculator {
12+
font-size:24pt;
13+
text-align:center;
14+
15+
}
16+
17+
.calculator button {
18+
font-size:24pt;
19+
width:256px;
20+
height:64px;
21+
22+
}
23+
.calculator input[type='text'] {
24+
font-size:28pt;
25+
border-radius:20px;
26+
padding:20px;
27+
28+
}
29+
.calculator input[type='text']:hover {
30+
border-width: 1px;
31+
border-color: rgb(139,137,137);
32+
}
33+
34+
.calculator .output {
35+
background-color:rgb(200,200,200);
36+
}

0 commit comments

Comments
 (0)