66 < meta name ="viewport " content ="width=device-width, height=device-height, initial-scale=1 user-scalable=no, shrink-to-fit=no ">
77 < meta http-equiv ="X-UA-Compatible " content ="ie=edge ">
88 < title > Simple Calculator Harsh Trivedi</ title >
9- < link rel ="stylesheet " href ="style.css ">
9+ < link rel ="stylesheet " href ="./styles/ style.css ">
1010 < link href ="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap " rel ="stylesheet ">
11- <!-- Global site tag (gtag.js) - Google Analytics -->
12- < script async src ="https://www.googletagmanager.com/gtag/js?id=UA-70447982-5 "> </ script >
13- < script >
14- window . dataLayer = window . dataLayer || [ ] ;
15- function gtag ( ) { dataLayer . push ( arguments ) ; }
16- gtag ( 'js' , new Date ( ) ) ;
17-
18- gtag ( 'config' , 'UA-70447982-5' ) ;
19- </ script >
20-
2111 <!-- Common Tags -->
2212 < meta content ='#171825 ' name ='theme-color ' />
23-
2413 < meta name ="keywords "
2514 content ="Simple JavaScript Calculator, Harsh, JavaScript, Calculator, JavaScript Calculator, JSCalci, JavaScriptCalci, Harsh Trivedi ">
26-
2715 <!-- Open Graph general (Facebook, Pinterest & Google+) -->
2816 < meta property ="og:title " content ="Simple JavaScript Calculator " />
2917 < meta property ="og:description "
3018 content ="Simple JavaScript Calculator by Harsh Trivedi " />
3119 < meta property ="og:image "
32- content ="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/meta.jpg " />
20+ content ="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/images/ meta.jpg " />
3321 < meta property ="og:url " content ="https://harsh98trivedi.github.io/Simple-JavaScript-Calculator/ " />
3422 < meta property ="og:site_name " content ="Simple JavaScript Calculator " />
3523 < meta property ="og:locale " content ="en_US " />
4129 < meta property ="description "
4230 content ="Simple JavaScript Calculator by Harsh Trivedi " />
4331 < meta property ="image "
44- content ="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/meta.jpg " />
32+ content ="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/images/ meta.jpg " />
4533 <!-- Schema.org for Google -->
4634 < meta itemprop ="name " content ="Simple JavaScript Calculator " />
4735 < meta itemprop ="description "
4836 content ="Simple JavaScript Calculator by Harsh Trivedi " />
4937 < meta itemprop ="image "
50- content ="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/meta.jpg " />
38+ content ="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/images/ meta.jpg " />
5139 <!-- Twitter -->
5240 < meta property ="twitter:card " content ="summary_large_image " />
5341 < meta property ="twitter:title " content ="Simple JavaScript Calculator " />
5644 < meta property ="twitter:creator " content ="@harsh98trivedi " />
5745 < meta property ="twitter:creator:id " content ="@harsh98trivedi " />
5846 < meta property ="twitter:image:src "
59- content ="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/meta.jpg " />
47+ content ="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/images/ meta.jpg " />
6048 < meta property ="twitter:image " content ="Calculator by Harsh Trivedi " />
61-
62- < link rel ='icon ' type ='image/x-icon ' href ='favicon.png ' />
49+ < link rel ='icon ' type ='image/x-icon ' href ='./images/favicon.ico ' />
6350</ head >
64-
6551< body >
66- < div class ="toggle-container ">
52+ < div class ="toggle-container ">
6753 < label class ="toggle-switch ">
6854 < input type ="checkbox " id ="toggle-mode " />
6955 < span class ="toggle-slider "> </ span >
7056 </ label >
7157 </ div >
7258 < div class ="container ">
73- < h1 > < a style ="text-decoration: none; color: #f1c40f; margin-left: 1.25rem; " href ="" onclick ="location.reload(); "> CALCULATOR</ a >
74- < img id ="historybutton " src ="history.png "> </ h1 >
75-
76-
77-
78-
79- <!-- </h1 > -->
80- < div class ="calculator ">
81- < input type ="text " name ="screen " id ="answer " readonly >
82- < table >
83- < tr >
84- < td > < button > (</ button > </ td >
85- < td > < button > )</ button > </ td >
86- <!-- <td><button style="background-color: #f01600; font-weight: bold; color: #ecf0f1;" onclick="deleteLastEntry()">C</button></td> -->
87- < td >
88- < div class ="row ">
89- < div class ="col ">
90- < button style ="background-color: #f01600; font-weight: bold; color: #ecf0f1; width: 8vw; " onclick ="clearAll() "> C</ button >
91- </ div >
92- < div class ="col ">
93- < button style ="background-color: #f01600; font-weight: bold; color: #ecf0f1;width: 8vw; " onclick ="deleteLastEntry() "> CE</ button >
94- </ div >
95- </ div >
96-
97- </ td >
98-
99-
100- <!-- <td colspan="2"><button style="background-color: #f01600; font-weight: bold; color: #ecf0f1;" onclick="deleteLastEntry()">C</button></td>
101- </td> -->
102-
103- < td > < button > %</ button > </ td >
104- </ tr >
105- < tr >
106- < td > < button > 7</ button > </ td >
107- < td > < button > 8</ button > </ td >
108- < td > < button > 9</ button > </ td >
109- < td > < button > X</ button > </ td >
110- </ tr >
111- < tr >
112- < td > < button > 4</ button > </ td >
113- < td > < button > 5</ button > </ td >
114- < td > < button > 6</ button > </ td >
115- < td > < button > -</ button > </ td >
116- </ tr >
117- < tr >
118- < td > < button > 1</ button > </ td >
119- < td > < button > 2</ button > </ td >
120- < td > < button > 3</ button > </ td >
121- < td > < button > +</ button > </ td >
122- </ tr >
123- < tr >
124- < td > < button > 0</ button > </ td >
125- < td > < button style ="font-weight: bold; "> .</ button > </ td >
126- < td > < button > /</ button > </ td >
127- < td > < button style ="background-color: #25db72; font-weight: bold; color: #ecf0f1; "> =</ button > </ td >
128- </ tr >
129- </ table >
130- < hr style ="max-width: 50vw; ">
131- < div style ="font-size:1rem; display: flex; align-items: center; justify-content: center; "> Made with < img style ="margin: 0.15rem; " src ="heart.png "> by< a style ="text-decoration: none; color: #f1c40f; margin-left: 0.25rem; "
132- target ="_blank " href ="https://harsh98trivedi.github.io "> Harsh Trivedi</ a > </ div >
133- </ div >
134- </ div >
135- < div id ="bar1 " class = "bars "> </ div >
136- < div id ="bar2 " class = "bars "> </ div >
137- < div id ="history ">
59+ < h1 >
60+ < a style ="text-decoration: none; color: #f1c40f; margin-left: 1.25rem; cursor: pointer; " onclick ="location.reload(); "> CALCULATOR</ a >
61+ < img id ="historybutton " src ="./images/history.png ">
62+ </ h1 >
63+ < div class ="calculator ">
64+ < input type ="text " name ="screen " id ="answer " readonly >
65+ < table >
66+ < tr >
67+ < td > < button > (</ button > </ td >
68+ < td > < button > )</ button > </ td >
69+ < td >
70+ < div class ="row ">
71+ < div class ="col ">
72+ < button style ="background-color: #f01600; font-weight: bold; color: #ecf0f1; width: 8vw; " onclick ="clearAll() "> C</ button >
73+ </ div >
74+ < div class ="col ">
75+ < button style ="background-color: #f01600; font-weight: bold; color: #ecf0f1;width: 8vw; " onclick ="deleteLastEntry() "> CE</ button >
76+ </ div >
77+ </ div >
78+ </ td >
79+ < td > < button > %</ button > </ td >
80+ </ tr >
81+ < tr >
82+ < td > < button > 7</ button > </ td >
83+ < td > < button > 8</ button > </ td >
84+ < td > < button > 9</ button > </ td >
85+ < td > < button > X</ button > </ td >
86+ </ tr >
87+ < tr >
88+ < td > < button > 4</ button > </ td >
89+ < td > < button > 5</ button > </ td >
90+ < td > < button > 6</ button > </ td >
91+ < td > < button > -</ button > </ td >
92+ </ tr >
93+ < tr >
94+ < td > < button > 1</ button > </ td >
95+ < td > < button > 2</ button > </ td >
96+ < td > < button > 3</ button > </ td >
97+ < td > < button > +</ button > </ td >
98+ </ tr >
99+ < tr >
100+ < td > < button > 0</ button > </ td >
101+ < td > < button style ="font-weight: bold; "> .</ button > </ td >
102+ < td > < button > /</ button > </ td >
103+ < td > < button style ="background-color: #25db72; font-weight: bold; color: #ecf0f1; "> =</ button > </ td >
104+ </ tr >
105+ </ table >
106+ < hr style ="max-width: 50vw; ">
107+ < div style ="font-size:1rem; display: flex; align-items: center; justify-content: center; ">
108+ Made with < img style ="margin: 0.15rem; " src ="./images/heart.png "> by < a style ="text-decoration: none; color: #f1c40f; margin-left: 0.25rem; " target ="_blank " href ="https://harsh98trivedi.github.io "> Harsh Trivedi</ a >
109+ </ div >
110+ </ div >
138111 </ div >
112+ < div id ="bar1 " class = "bars "> </ div >
113+ < div id ="bar2 " class = "bars "> </ div >
114+ < div id ="history "> </ div >
139115 < div id ="turn ">
140- PLEASE TURN YOUR DEVICE
141- </ div >
116+ PLEASE TURN YOUR DEVICE
117+ </ div >
142118</ body >
143- < script src ="hist.js "> </ script >
144- < script src ="calc.js "> </ script >
119+
120+ < script src ="./scripts/hist.js "> </ script >
121+ < script src ="./scripts/calc.js "> </ script >
122+ <!-- Global site tag (gtag.js) - Google Analytics -->
123+ < script async src ="https://www.googletagmanager.com/gtag/js?id=UA-70447982-5 "> </ script >
124+ < script >
125+ window . dataLayer = window . dataLayer || [ ] ;
126+ function gtag ( ) { dataLayer . push ( arguments ) ; }
127+ gtag ( 'js' , new Date ( ) ) ;
128+ gtag ( 'config' , 'UA-70447982-5' ) ;
129+ </ script >
145130< script >
146131 const toggleMode = document . getElementById ( 'toggle-mode' ) ;
147132 const container = document . querySelector ( '.container' ) ;
148133
149134 toggleMode . addEventListener ( 'change' , function ( ) {
150135 container . classList . toggle ( 'dark-mode' ) ;
151136 } ) ;
152- document . addEventListener ( 'keydown' , function ( event ) {
153- handleKeyPress ( event . key ) ;
154- } ) ;
155- // This function will be responsible for handling the button press from the keyboard..Try thses key also if want you can also chnage these settings,...
156- function handleKeyPress ( key ) {
157- // "Enter" key is pressed, trigger the "=" button press
158- if ( key === 'Enter' ) {
159- handleButtonPress ( '=' ) ;
160- }
161137
162- // "Delete" or "Backspace" key is pressed, trigger the "CE" button press
163- if ( key === 'Delete' || key === 'Backspace' ) {
164- handleButtonPress ( 'CE' ) ;
165- }
138+ document . addEventListener ( 'keydown' , function ( event ) {
139+ handleKeyPress ( event . key ) ;
140+ } ) ;
166141
167- //number key is pressed, trigger the corresponding number button press
168- if ( / [ 0 - 9 ] / . test ( key ) ) {
169- handleButtonPress ( key ) ;
170- }
171-
172- // operator key is pressed (+, -, *, /), trigger the corresponding operator button press
173- if ( / [ \+ \- \* \/ % ] / . test ( key ) ) {
174- handleButtonPress ( key ) ;
175- }
142+ // This function will be responsible for handling the button press from the keyboard..Try thses key also if want you can also chnage these settings,...
143+ function handleKeyPress ( key ) {
144+ // "Enter" key is pressed, trigger the "=" button press
145+ if ( key === 'Enter' ) {
146+ handleButtonPress ( '=' ) ;
176147 }
177-
178- function handleButtonPress ( value ) {
179- // This function simulates the button press of the calculator for the given value
180-
181- // Find the corresponding button element based on the value
182- const button = document . querySelector ( `button[value="${ value } "]` ) ;
183- if ( button ) {
184- button . click ( ) ;
185- }
148+ // "Delete" or "Backspace" key is pressed, trigger the "CE" button press
149+ if ( key === 'Delete' || key === 'Backspace' ) {
150+ handleButtonPress ( 'CE' ) ;
151+ }
152+ //number key is pressed, trigger the corresponding number button press
153+ if ( / [ 0 - 9 ] / . test ( key ) ) {
154+ handleButtonPress ( key ) ;
155+ }
156+ // operator key is pressed (+, -, *, /), trigger the corresponding operator button press
157+ if ( / [ \+ \- \* \/ % ] / . test ( key ) ) {
158+ handleButtonPress ( key ) ;
159+ }
160+ }
161+ function handleButtonPress ( value ) {
162+ // This function simulates the button press of the calculator for the given value
163+ // Find the corresponding button element based on the value
164+ const button = document . querySelector ( `button[value="${ value } "]` ) ;
165+ if ( button ) {
166+ button . click ( ) ;
186167 }
187-
168+ }
188169</ script >
189- </ html >
170+ </ html >
0 commit comments