Skip to content

Commit bb3e655

Browse files
pp-sittpp-sitt
committed
Add the main files
1 parent 27e6602 commit bb3e655

11 files changed

+620
-0
lines changed

‎calculator.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Calculator</title>
5+
<link href="css/css.css" type="text/css" rel="stylesheet">
6+
</head>
7+
<body>
8+
<div class="calculator">
9+
<div class=displaybox>
10+
<div class="display">Calculator</div>
11+
<span class="operator">=</span>
12+
</div>
13+
<div class=buttons>
14+
<div class="numbers">
15+
<button class="b1">1</button>
16+
<button class="b2">2</button>
17+
<button class="b3">3</button>
18+
<button class="b4">4</button>
19+
<button class="b5">5</button>
20+
<button class="b6">6</button>
21+
<button class="b7">7</button>
22+
<button class="b8">8</button>
23+
<button class="b9">9</button>
24+
</div>
25+
<button class="zero">0</button>
26+
<button class="plus">+</button>
27+
<button class="minus">-</button>
28+
<button class="multiple">*</button>
29+
<button class="divide">/</button>
30+
<button class="decimal">.</button>
31+
<button class="equal">=</button>
32+
<button id="clear"class="clear">C</button>
33+
<button id="backspace"class="backspace">&lt;</button>
34+
</div>
35+
<a href="https://github.com/SplayD027/Calculator" class="githubicon"><span></span></a>
36+
</div>
37+
<script src="script/script.js"></script>
38+
</body>
39+
</html>

‎css/css.css

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
@font-face {
2+
font-family: 'digital-7';
3+
font-style: normal;
4+
font-weight: 400;
5+
src: url('../font/digital-7.eot') format('embedded-opentype'), /* IE6-IE8 */
6+
url('../font/digital-7.woff2') format('woff2'), /* Super Modern Browsers */
7+
url('../font/digital-7.woff') format('woff'), /* Pretty Modern Browsers */
8+
url('../font/digital-7.tff') format('truetype'), /* Safari, Android, iOS */
9+
url('../font/digital-7.svg') format('svg'); /* Legacy iOS */
10+
}
11+
* {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
font-weight: bold;
16+
font-size: 50px;
17+
font-family: 'digital-7', sans-serif;
18+
}
19+
body {
20+
height: 100vh;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
background: #f5f8fa;
25+
}
26+
.calculator {
27+
position: relative;
28+
border: solid 1px #d4d4d4;
29+
height: 750px;
30+
width: 600px;
31+
padding-top: 30px;
32+
box-sizing: content-box;
33+
border-radius: 2%;
34+
background: #f0f0f0;
35+
}
36+
.displaybox {
37+
position: relative;
38+
}
39+
.display {
40+
border: solid 1px #d4d4d4;
41+
height: 100px;
42+
margin: 40px 30px 0;
43+
background: white;
44+
display: flex;
45+
justify-content: flex-end;
46+
align-items: center;
47+
padding: 10px;
48+
font-size: 1.2em;
49+
}
50+
.operator {
51+
position: absolute;
52+
left: 35px;
53+
top: 15px;
54+
font-size: 1.5em;
55+
}
56+
.buttons {
57+
height: 515px;
58+
margin: 40px 30px 0;
59+
display: grid;
60+
grid: repeat(4,1fr) / repeat(5,1fr);
61+
grid-template-areas:
62+
"clear oper1 oper2 oper3 oper4"
63+
"num num num equal equal"
64+
"num num num zero deci"
65+
"num num num zero back";
66+
grid-gap: 5px;
67+
background-color: #f0f0f0;
68+
}
69+
.buttons button {
70+
border: none;
71+
background-color:#fbfbfb;
72+
color:#454545;
73+
border-radius: 7%;
74+
}
75+
.buttons button:focus{outline: none;}
76+
.buttons button:hover{background: #dddddd;}
77+
.buttons button:active{background: #bfbfbf;}
78+
79+
.numbers {
80+
grid-area: num;
81+
display: grid;
82+
grid: repeat(3,1fr) / repeat(3,1fr);
83+
grid-gap: 5px;
84+
}
85+
.zero { grid-area: zero;}
86+
.equal {grid-area: equal;}
87+
.decimal {grid-area: deci;}
88+
89+
#clear {
90+
grid-area: clear;
91+
background-color:#e82e2e;
92+
color:white;
93+
}
94+
#clear:hover {background-color:#c92626;}
95+
#clear:active {background-color:#b41515;}
96+
97+
#backspace {
98+
grid-area: back;
99+
background:#e0670e;
100+
color: black;
101+
}
102+
#backspace:hover {background:#cc5700;}
103+
#backspace:active {background:#b74d00;}
104+
105+
.plus,.minus,.multiple,.divide {font-size: 1.2em;}
106+
.plus {grid-area: oper1;}
107+
.minus {grid-area: oper2;}
108+
.multiple {grid-area: oper3;}
109+
.divide {grid-area: oper4;}
110+
111+
.githubicon{
112+
background-image: url("https://image.flaticon.com/icons/png/512/3/3641.png");
113+
background-size: 30px;
114+
background-repeat: no-repeat;
115+
width: 40px;
116+
height: 40px;
117+
position: absolute;
118+
right: 0px;
119+
bottom: 0px;
120+
opacity: 0.9;
121+
}
122+
.githubicon:hover{
123+
background-size: 35px;
124+
right: 3px;
125+
bottom: 3px;
126+
opacity: 1;
127+
}
128+
.githubicon:active{
129+
background-size: 40px;
130+
right: 5px;
131+
bottom: 5px;
132+
}

‎font/Calculator.ttf

21.1 KB
Binary file not shown.

‎font/digital-7.eot

29.1 KB
Binary file not shown.

‎font/digital-7.svg

+263
Loading

‎font/digital-7.ttf

33.6 KB
Binary file not shown.

‎font/digital-7.woff

8.52 KB
Binary file not shown.

‎font/digital-7.woff2

6.06 KB
Binary file not shown.

‎font/original-digital-7.ttf

28.9 KB
Binary file not shown.

‎font/readme.txt

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
True Type Fonts: DIGITAL-7 version 1.02
2+
3+
4+
EULA
5+
-==-
6+
The fonts Digital-7 is freeware for home using.
7+
8+
9+
DESCRIPTION
10+
-=========-
11+
12+
This font created specially for program Calculator-7 (download shareware version: http://www.styleseven.com/ and use 7 days fo free).
13+
14+
The program Calculator-7 offers you the following possibilities:
15+
* calculate using seven operator: addition, subtraction, multiply, divide, percent, square root, 1 divide to X;
16+
* set decimal position (0, 2, 3, float) and round type (up, mathematical, down);
17+
* customize an appearance of work window: scale, fonts for digital panel and buttons, background color;
18+
* customize an appearance of number in digital panel: leading zero for decimal, thousand separator, decimal separator, digit grouping;
19+
* calculate total from clipboard (copy data to clipboard from table or text and press one button).
20+
21+
22+
Files in digital-7_font.zip:
23+
readme.txt this file;
24+
digital-7.ttf digital-7 regular font;
25+
digital-7 (italic).ttf digital-7 italic font;
26+
digital-7 (mono).ttf digital-7 mono font;
27+
digital-7 (mono italic).ttf digital-7 mono font.
28+
29+
Please visit http://www.styleseven.com/ for download our other products as freeware as shareware.
30+
We will welcome any useful suggestions and comments; please send them to ms-7@styleseven.com
31+
32+
33+
FREEWARE USE (NOTES)
34+
-=================-
35+
Also you may:
36+
* Use the font in freeware software (credit needed);
37+
* Use the font for your education process.
38+
39+
40+
COMMERCIAL OR BUSINESS USE
41+
-========================-
42+
43+
You can buy font for commercial use here ($24.95): http://store.esellerate.net/s.aspx?s=STR0331655240
44+
You may:
45+
* Include the font to your installation;
46+
* Use one license up to 100 computers in your office.
47+
Please contact us for any questions.
48+
49+
50+
WHAT IS NEW?
51+
-==========-
52+
53+
Version 1.01 April 05 2009
54+
--------------------------
55+
* Change Typeface name for fonts "Digital-7 (mono)" and "Digital-7 (italic)" (now available all fonts for select in application, for example Word Pad).
56+
* Corrected symbol ':'.
57+
58+
Version 1.01 April 07 2011
59+
--------------------------
60+
* Embedding is allowed.
61+
62+
Version 1.1 June 07 2013
63+
--------------------------
64+
* Mono Italic font is added.
65+
66+
67+
AUTHOR
68+
-====-
69+
70+
Sizenko Alexander
71+
Style-7
72+
http://www.styleseven.com
73+
Created: October 7 2008

‎script/script.js

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/* Global Variable */
2+
let a = 0,b = 0;
3+
let display = document.getElementsByClassName('display')[0];
4+
let oper = document.querySelector('.operator');
5+
let numpad = Array.from(document.querySelectorAll('.numbers button'));
6+
let zero = document.getElementsByClassName('zero')[0];
7+
let clearbutton = document.querySelector('.clear');
8+
let equal = document.querySelector('.equal');
9+
let plus = document.querySelector('.plus');
10+
let minus = document.querySelector('.minus');
11+
let multiple = document.querySelector('.multiple');
12+
let divide = document.querySelector('.divide');
13+
let decimal = document.querySelector('.decimal');
14+
let back = document.querySelector('.backspace');
15+
16+
/* Actions */
17+
numpad.forEach(num=>{num.addEventListener('click',()=>{Numpad(num.textContent)})});
18+
zero.addEventListener('click',()=>{Numpad(zero.textContent)});
19+
clearbutton.addEventListener('click',()=>{Clear()});
20+
equal.addEventListener('click',()=>{Equal()});
21+
plus.addEventListener('click',()=>{Operators('+')});
22+
minus.addEventListener('click',()=>{Operators('-')});
23+
multiple.addEventListener('click',()=>{Operators('*')});
24+
divide.addEventListener('click',()=>{Operators('/')});
25+
back.addEventListener('click',()=>{Backspace()});
26+
decimal.addEventListener('click',()=>{Decimal()});
27+
window.addEventListener('keydown',(e)=>{Keyboard(e.key)});
28+
29+
function Display(input){
30+
display.textContent = input;
31+
}
32+
function Numpad(num){
33+
if(display.textContent.length==20)return;
34+
a = String(a);
35+
if(a[0]==0){
36+
if(a.search(/\./)!=-1)a += num;
37+
else a = num;
38+
}
39+
else a += num;
40+
Display(a);
41+
}
42+
function Operators(input){
43+
if(a==0)return;
44+
b = a,a = 0;
45+
if(input=='+')oper.textContent = '+';
46+
if(input=='-')oper.textContent = '-';
47+
if(input=='*')oper.textContent = '*';
48+
if(input=='/')oper.textContent = '/';
49+
Display(a);
50+
}
51+
function Equal(){
52+
if(oper.textContent=='=')return;
53+
if(oper.textContent=='+')a = Number(a)+Number(b);
54+
if(oper.textContent=='-')a = Number(b)-Number(a);
55+
if(oper.textContent=='*')a = Number(a)*Number(b);
56+
if(oper.textContent=='/')a = Number(b)/Number(a);
57+
oper.textContent = '=';
58+
Display(a);
59+
}
60+
function Clear(){
61+
a = 0,b = 0;
62+
display.textContent = a;
63+
oper.textContent = '=';
64+
}
65+
function Decimal(){
66+
a = String(a);
67+
if(a.length==19)return;
68+
if(a.search(/\./)!=-1)return;
69+
a += '.';
70+
Display(a);
71+
}
72+
function Backspace(){
73+
a = String(a);
74+
if(a.length==1)a=0;
75+
else a = a.substr(0,a.length-1);
76+
Display(a);
77+
}
78+
function Keyboard(key){
79+
console.log(key);
80+
switch(key){
81+
case 'Backspace':
82+
case 'Delete':
83+
Backspace();
84+
break;
85+
case 'Enter':
86+
Equal();
87+
break;
88+
case 'C':
89+
case 'c':
90+
Clear();
91+
break;
92+
case ".":
93+
Decimal();
94+
break;
95+
case '+':
96+
case '-':
97+
case '*':
98+
case '/':
99+
Operators(key);
100+
break;
101+
case "0":
102+
case "1":
103+
case "2":
104+
case "3":
105+
case "4":
106+
case "5":
107+
case "6":
108+
case "7":
109+
case "8":
110+
case "9":
111+
Numpad(key);
112+
}
113+
}

0 commit comments

Comments
 (0)