├── README.md
├── Screenshot 2022-11-03 230453.png
├── green-sand-paper_53876-86281.webp
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | calculator using HTML,CSS,JAVASCRIPT
2 |
--------------------------------------------------------------------------------
/Screenshot 2022-11-03 230453.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sudharsanan123/Calculator-using-HTML-CSS-JAVASCRIPT/03b79e209069a6716d0aa9db2feab8b7b705c2ef/Screenshot 2022-11-03 230453.png
--------------------------------------------------------------------------------
/green-sand-paper_53876-86281.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sudharsanan123/Calculator-using-HTML-CSS-JAVASCRIPT/03b79e209069a6716d0aa9db2feab8b7b705c2ef/green-sand-paper_53876-86281.webp
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Calculator
8 |
9 |
10 |
11 |
12 |
13 | Calculator
14 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | // alert('Connected')
2 | function insert(num){
3 | document.form.textview.value=document.form.textview.value+num;
4 | }
5 |
6 | function equals(){
7 | var txt=document.form.textview.value;
8 | if(txt)
9 | document.form.textview.value=eval(txt);
10 | else
11 | document.form.textview.value='ERROR'
12 |
13 | }
14 |
15 | function clean(){
16 | document.form.textview.value="";
17 | }
18 |
19 | function back(){
20 | var txt=document.form.textview.value;
21 | document.form.textview.value=txt.substring(0,txt.length-1);
22 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | /* background: url(http://www.inkspilldesign.com/demo/wood-tile-background.jpg); */
3 | /* background-color: #424242; */
4 | /* font-family: Tahoma; */
5 | background-image: url("green-sand-paper_53876-86281.webp");
6 | /* background-image: url("Scooter.jpg"); */
7 | }
8 |
9 | .textview{
10 | display: inline-block;
11 | margin: 2px;
12 | width: 198px;
13 | height: 29px;
14 | font-size: 20px;
15 | font-weight: bold;
16 | background-color: rgba(245, 242, 237, 0.589);
17 | /* background:none */
18 | /* border-radius: 10px; */
19 | border: none;
20 | }
21 |
22 | .equalButton {
23 | cursor: pointer;
24 | display: inline-block;
25 | margin: 2px;
26 | width: 42px;
27 | height:91px;
28 | outline: none;
29 | font-size: 20px;
30 | font-weight: bold;
31 | border-radius: 10px;
32 |
33 | }
34 |
35 | .button {
36 | cursor: pointer;
37 | display: inline-block;
38 | margin: 2px;
39 | width: 42px;
40 | height: 42px;
41 | font-size: 20px;
42 | font-weight: bold;
43 | border-radius: 10px;
44 | outline: none;
45 |
46 | }
47 |
48 | .button:active, .allclearButton:active,.equalButton:active{
49 | background-color: #69996b;
50 | box-shadow: 0 3px #666;
51 | transform: translateY(4px);
52 | }
53 |
54 |
55 |
56 | .button:hover,.equalButton:hover {
57 | background-color: #FFBA75;
58 | box-shadow: 0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;
59 | border-top: 2px solid #FFF;
60 | border-right: 2px solid #FFF;
61 | border-bottom: 2px solid #AE5700;
62 | border-left: 2px solid #AE5700;
63 | }
64 |
65 | .allclearButton {
66 | border-radius: 10px;
67 | color: #FFF;
68 | margin: 2px;
69 | width: 42px;
70 | height: 42px;
71 | text-shadow: -1px -1px 0px #44006F;
72 | background-color: #D20000;
73 | border-top: 2px solid #FF8484;
74 | border-right: 2px solid #FF8484;
75 | border-bottom: 2px solid #800000;
76 | border-left: 2px solid #800000;
77 | box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #B00000;
78 | outline: none;
79 | }
80 |
81 | h1{
82 | color:#59647c;
83 | font-size: 52px;
84 | text-justify: newspaper;
85 | text-align: center;
86 |
87 | }
88 | .container{
89 | background: rgba(82, 78, 78, 0.589);
90 | /* background-size: 100px 80px; */
91 | background-size: cover;
92 | position:absolute;
93 | top:50%;
94 | left:50%;
95 | transform:translateX(-50%) translateY(-50%)
96 | }
97 |
98 |
99 |
100 |
--------------------------------------------------------------------------------