├── _config.yml
├── LICENSE
├── script.js
├── styles.css
└── index.html
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | BSD 3-Clause License
2 |
3 | Copyright (c) 2022, S Sidharth
4 | All rights reserved.
5 |
6 | Redistribution and use in source and binary forms, with or without
7 | modification, are permitted provided that the following conditions are met:
8 |
9 | 1. Redistributions of source code must retain the above copyright notice, this
10 | list of conditions and the following disclaimer.
11 |
12 | 2. Redistributions in binary form must reproduce the above copyright notice,
13 | this list of conditions and the following disclaimer in the documentation
14 | and/or other materials provided with the distribution.
15 |
16 | 3. Neither the name of the copyright holder nor the names of its
17 | contributors may be used to endorse or promote products derived from
18 | this software without specific prior written permission.
19 |
20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
23 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
24 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
26 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
27 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
28 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | var operation=0,operationValue=0;
2 |
3 | function clearValue() {
4 | document.getElementById("output-screen").value="";
5 | }
6 | function buttonClicked(valueFromButton) {
7 | var oldValue=document.getElementById("output-screen").value;
8 | document.getElementById("output-screen").value = oldValue+valueFromButton;
9 | }
10 | function addition() {
11 | operation=1;
12 | operationValue=parseFloat(document.getElementById("output-screen").value);
13 | document.getElementById("output-screen").value="";
14 | }
15 | function subtraction() {
16 | operation=2;
17 | operationValue=parseFloat(document.getElementById("output-screen").value);
18 | document.getElementById("output-screen").value="";
19 | }
20 | function multiplication() {
21 | operation=3;
22 | operationValue=parseFloat(document.getElementById("output-screen").value);
23 | document.getElementById("output-screen").value="";
24 | }
25 | function division() {
26 | operation=4;
27 | operationValue=parseFloat(document.getElementById("output-screen").value);
28 | document.getElementById("output-screen").value="";
29 | }
30 | function equals() {
31 | if(operation==1) {
32 | operationValue=operationValue+parseFloat(document.getElementById("output-screen").value);
33 | document.getElementById("output-screen").value=operationValue.toFixed(3);
34 | operation=0;
35 | operationValue=0;
36 | }
37 | else if(operation==2) {
38 | operationValue=operationValue-parseFloat(document.getElementById("output-screen").value);
39 | document.getElementById("output-screen").value=operationValue.toFixed(3);
40 | operation=0;
41 | operationValue=0;
42 | }
43 | else if(operation==3) {
44 | operationValue=operationValue*parseFloat(document.getElementById("output-screen").value);
45 | document.getElementById("output-screen").value=operationValue.toFixed(3);
46 | operation=0;
47 | operationValue=0;
48 | }
49 | else if(operation==4) {
50 | operationValue=operationValue/parseFloat(document.getElementById("output-screen").value);
51 | if(parseInt(document.getElementById("output-screen").value)==0) {
52 | document.getElementById("output-screen").value= "∞ " ;
53 | }
54 | else {
55 | document.getElementById("output-screen").value=operationValue.toFixed(3);
56 | }
57 | operation=0;
58 | operationValue=0;
59 | }
60 | }
61 | function point() {
62 | oldValue=document.getElementById("output-screen").value;
63 | document.getElementById("output-screen").value = oldValue+".";
64 | }
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin :0px;
3 | padding-top :3px;
4 | background-color: #000000;
5 | }
6 | p {
7 | font-size:70px;
8 | font-family: serif;
9 | margin-left: 35%;
10 | text-shadow: 1px 1px 5px rgb(255, 0, 0), 0 0 25px rgb(255, 0, 0), 0 0 5px rgb(139, 0, 0);
11 | }
12 | #main-body {
13 | width :400px;
14 | height :500px;
15 | background-color :rgb(0, 0, 0);
16 | border-radius: 50px;
17 | margin-top: 10px;
18 | margin-left: 35%;
19 | padding-top: 15px;
20 | box-shadow: 0px 0px 10px 5px red;
21 | padding-left: 10px;
22 | }
23 | .button-box {
24 | width: 80px;
25 | height: 80px;
26 | padding: 0px;
27 | border-radius: 50%;
28 | box-shadow: 0px 0px 10px 5px rgb(0, 26, 255);
29 | float: left;
30 | margin: 6px;
31 | margin-top: 12px;
32 | }
33 | .button-box :hover{
34 | width: 80px;
35 | height: 80px;
36 | box-shadow: 0px 0px 10px 5px rgb(0, 26, 255);
37 | background-image: radial-gradient(rgb(0, 0, 0),rgb(0, 17, 255));
38 | transition-duration: 0.5s;
39 | transform-style: preserve-3d;
40 | }
41 | .number-button {
42 | width: 80px;
43 | height: 80px;
44 | border-radius: 50%;
45 | color: rgb(255, 255, 255);
46 | font-family: arial;
47 | font-size: 60px;
48 | background-color: rgb(0, 0, 0);
49 | text-shadow: 1px 1px 5px rgb(255, 0, 0), 0 0 25px rgb(255, 0, 0), 0 0 5px rgb(139, 0, 0);
50 | }
51 | .number-button-main-box {
52 | border-radius: 50px;
53 | width: 370px;
54 | height: 415px;
55 | padding :10px;
56 | padding-top: 22px;
57 | }
58 | #output-box {
59 | border-radius: 50px;
60 | width: 390px;
61 | height: 50px;
62 | }
63 | #output-screen {
64 | height: 40px;
65 | width: 270px;
66 | margin-top: 10px;
67 | margin-left: 20px;
68 | float: left;
69 | color: aliceblue;
70 | font-size: 60px;
71 | text-align: right;
72 | font-family: serif;
73 | border: black;
74 | }
75 | #output-box {
76 | padding-top: 0px;
77 | }
78 | #backspace {
79 | text-shadow: 1px 1px 15px rgb(0, 17, 255), 0 0 25px rgb(38, 0, 255), 0 0 5px rgb(21, 0, 139);
80 | font-size: 50px;
81 | color: wheat;
82 | float: right;
83 | margin-right: 15px;
84 | border: black;
85 |
86 | }
87 | #backspace:hover {
88 | text-shadow: 1px 1px 15px rgb(0, 17, 255), 0 0 25px rgb(38, 0, 255), 0 0 5px rgb(21, 0, 139);
89 | font-size: 50px;
90 | color: rgb(255, 0, 0);
91 | float: right;
92 | margin-right: 15px;
93 |
94 | }
95 | a:link {
96 | text-decoration: none;
97 | font-size: 10px;
98 | color: white;
99 | float: left;
100 | margin-right: 1%;
101 |
102 |
103 | }
104 | a:visited {
105 | text-decoration: none;
106 | color: white;
107 | }
108 |
109 |
110 | a:hover {
111 | text-decoration: underline;
112 | }
113 |
114 | a:active {
115 | text-decoration: none;
116 | }
117 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Animated calculator
8 |
9 |
10 |
11 |
12 |
13 | Calculator
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |