├── style.css
├── LICENSE
├── README.md
├── script.js
└── index.html
/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | padding:0;
3 | margin:0;
4 | box-sizing:border-box;
5 | }
6 | body{
7 | background:rgb(0, 8, 7);
8 | color:rgb(42, 42, 42);
9 | font-family:Arial, sans-serif;
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 | height: 100vh;
14 | }
15 | .container {
16 | width: 400px;
17 | background: #fff;
18 | box-shadow: 0 20px 40px rgba(0,0,0,0.1);
19 | }
20 | input{
21 | padding:16px 10px;
22 | width:100%;
23 | border:0;
24 | font-size:2em;
25 | background-color:#333;
26 | color:#eee;
27 | text-align:right;
28 | }
29 | table{
30 | border-collapse:collapse;
31 | width: 100%;
32 | }
33 | td{
34 | font-size:2em;
35 | padding:0.7em;
36 | text-align: center;
37 | cursor:default;
38 | transition:0.2s;
39 | }
40 | td:hover{
41 | background-color:rgb(199, 199, 199);
42 | }
43 | .vari{
44 | background-color:rgb(70, 70, 70);
45 | color: #eee;
46 | }
47 | .vari:hover{
48 | background-color:#222;
49 | }
50 | .equalbtn {
51 | background: rgb(255, 160, 51);
52 | }
53 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Dhruv Sharma
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Digital-Calculator
2 | Overview:
3 | Digital-Calculator is a sleek, user-friendly calculator developed using only HTML, CSS, and JavaScript. This project aims to provide a minimalist yet powerful calculator experience entirely within the web browser, without any external dependencies. Whether you're a student needing quick math calculations or a professional looking for a handy tool, Digital-Calculator has got you covered.
4 |
5 | Features:
6 | Clean User Interface: Designed for simplicity and ease of use.
7 | Basic Arithmetic Operations: Addition, subtraction, multiplication, and division.
8 | Keyboard Support: Type calculations directly using your keyboard.
9 | Responsive Design: Works flawlessly across desktop and mobile devices.
10 |
11 | How to Use:
12 | Opening PureCalc: Simply open the index.html file in your web browser.
13 | Performing Calculations: Click on the buttons to input numbers and operators, or use your keyboard.
14 | Clearing Input: Press 'C' to clear the current input, or 'AC' to clear all.
15 | Enjoy Calculating: Start crunching numbers with ease!
16 |
17 | Technologies Used:
18 | HTML: Structuring the calculator layout.
19 | CSS: Styling for an elegant appearance and responsiveness.
20 | JavaScript: Implementing the calculator logic for accurate calculations.
21 |
22 | Screenshots:
23 |
24 | Contributing:
25 | If you'd like to contribute to PureCalc, feel free to fork this repository, make your changes, and submit a pull request. Any improvements or bug fixes are highly appreciated!
26 |
27 | Contact:
28 | For any inquiries or feedback, please contact [dhruvsharma4054@gmail.com].
29 |
30 | Thank you for using Digital-Calculator! Make sure to start this repository ! Happy calculating! 🎉🔢
31 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | /* Reset CSS */
2 | * {
3 | padding: 0;
4 | margin: 0;
5 | box-sizing: border-box;
6 | }
7 |
8 | body {
9 | background: linear-gradient(135deg, #1e3c72, #2a5298);
10 | color: #fff;
11 | font-family: 'Roboto', sans-serif;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | justify-content: flex-start;
16 | height: 100vh;
17 | margin: 0;
18 | overflow: hidden;
19 | animation: backgroundAnimation 15s ease infinite;
20 | }
21 |
22 | @keyframes backgroundAnimation {
23 | 0% {
24 | background: linear-gradient(135deg, #1e3c72, #2a5298);
25 | }
26 | 50% {
27 | background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b);
28 | }
29 | 100% {
30 | background: linear-gradient(135deg, #1e3c72, #2a5298);
31 | }
32 | }
33 |
34 | .header {
35 | display: flex;
36 | justify-content: space-between;
37 | width: 350px;
38 | margin-bottom: 10px;
39 | }
40 |
41 | .container {
42 | width: 350px;
43 | max-height: 80vh;
44 | overflow-y: auto;
45 | background: #ffffff33;
46 | border-radius: 10px;
47 | box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
48 | padding: 10px;
49 | }
50 |
51 | input {
52 | padding: 20px 10px;
53 | width: 100%;
54 | border: none;
55 | font-size: 1.5em;
56 | background-color: #00000080;
57 | color: #fff;
58 | text-align: right;
59 | margin-bottom: 10px;
60 | border-radius: 5px;
61 | }
62 |
63 | table {
64 | border-collapse: collapse;
65 | width: 100%;
66 | }
67 |
68 | td {
69 | font-size: 1.2em;
70 | padding: 10px;
71 | text-align: center;
72 | cursor: pointer;
73 | transition: 0.3s;
74 | border-radius: 5px;
75 | }
76 |
77 | td:hover {
78 | transform: scale(1.1);
79 | transition: transform 0.2s;
80 | }
81 |
82 | .vari {
83 | background-color: #ff8c00;
84 | color: #fff;
85 | }
86 |
87 | .vari:hover {
88 | background-color: #ff6500;
89 | }
90 |
91 | .equalbtn {
92 | background: #50c878;
93 | color: #fff;
94 | font-weight: bold;
95 | }
96 |
97 | .equalbtn:hover {
98 | background: #47a86b;
99 | }
100 |
101 | /* Advanced Mode */
102 | .advanced-row {
103 | display: none;
104 | }
105 |
106 | .container.advanced .advanced-row {
107 | display: table-row;
108 | }
109 |
110 | /* History Section */
111 | .history {
112 | background: #00000080;
113 | color: #fff;
114 | padding: 10px;
115 | margin-bottom: 10px;
116 | border-radius: 5px;
117 | max-height: 150px;
118 | overflow-y: auto;
119 | }
120 |
121 | .history h3 {
122 | margin-bottom: 5px;
123 | }
124 |
125 | .history ul {
126 | list-style: none;
127 | padding: 0;
128 | }
129 |
130 | .history li {
131 | margin: 5px 0;
132 | }
133 |
134 | /* Voice Input Button */
135 | .voice-input {
136 | background: #50c878;
137 | color: #fff;
138 | border: none;
139 | padding: 10px;
140 | cursor: pointer;
141 | border-radius: 5px;
142 | margin-bottom: 10px;
143 | }
144 |
145 | .voice-input:hover {
146 | background: #47a86b;
147 | }
148 |
149 | /* Export and Clear History Buttons */
150 | .export-history, .clear-history {
151 | background: #ff8c00;
152 | color: #fff;
153 | border: none;
154 | padding: 10px;
155 | cursor: pointer;
156 | border-radius: 5px;
157 | margin-top: 10px;
158 | }
159 |
160 | .export-history:hover, .clear-history:hover {
161 | background: #ff6500;
162 | }
163 |
164 | /* Converter Button */
165 | .converter {
166 | background: #00aced;
167 | color: #fff;
168 | border: none;
169 | padding: 10px;
170 | cursor: pointer;
171 | border-radius: 5px;
172 | margin-bottom: 10px;
173 | }
174 |
175 | .converter:hover {
176 | background: #0084b4;
177 | }
178 |
179 | /* Customize Button */
180 | .customize {
181 | background: #9b59b6;
182 | color: #fff;
183 | border: none;
184 | padding: 10px;
185 | cursor: pointer;
186 | border-radius: 5px;
187 | }
188 |
189 | .customize:hover {
190 | background: #8e44ad;
191 | }
192 |
193 | /* Responsive Design */
194 | @media (max-width: 600px) {
195 | .container {
196 | width: 90%;
197 | }
198 | .header {
199 | width: 90%;
200 | }
201 | td {
202 | padding: 10px;
203 | font-size: 1em;
204 | }
205 | input {
206 | font-size: 1.2em;
207 | }
208 | }
209 |
210 | /* Button Animation */
211 | td.active {
212 | background-color: #fff;
213 | color: #333;
214 | transition: background-color 0.2s, color 0.2s;
215 | }
216 |
217 | /* Input Focus Animation */
218 | input:focus {
219 | outline: none;
220 | box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
221 | transition: box-shadow 0.3s ease-in-out;
222 | }
223 |
224 | /* Dark Theme */
225 | body.dark {
226 | background: linear-gradient(135deg, #0d0d0d, #434343);
227 | color: #fff;
228 | }
229 |
230 | .container.dark {
231 | background: #33333388;
232 | }
233 |
234 | /* Light Theme */
235 | body.light {
236 | background: linear-gradient(135deg, #ffffff, #e6e6e6);
237 | color: #000;
238 | }
239 |
240 | .container.light {
241 | background: #f9f9f9;
242 | box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
243 | }
244 |
245 | /* Toggle Theme Button */
246 | .toggle-theme, .toggle-mode {
247 | background: #50c878;
248 | color: #fff;
249 | border: none;
250 | padding: 10px;
251 | cursor: pointer;
252 | border-radius: 5px;
253 | }
254 |
255 | .toggle-theme:hover, .toggle-mode:hover {
256 | background: #47a86b;
257 | }
258 |
259 | /* Accessibility Focus */
260 | td:focus {
261 | outline: 2px solid #50c878;
262 | }
263 |
264 | /* Button Feedback */
265 | td:active {
266 | transform: scale(0.9);
267 | transition: transform 0.1s;
268 | }
269 |
270 | /* Modal Styles */
271 | .modal {
272 | display: none;
273 | position: fixed;
274 | z-index: 1;
275 | padding-top: 60px;
276 | left: 0;
277 | top: 0;
278 | width: 100%;
279 | height: 100%;
280 | overflow: auto;
281 | background-color: rgb(0, 0, 0);
282 | background-color: rgba(0, 0, 0, 0.4);
283 | }
284 |
285 | .modal .modal-content {
286 | background-color: #fefefe;
287 | margin: auto;
288 | padding: 20px;
289 | border: 1px solid #888;
290 | width: 80%;
291 | border-radius: 10px;
292 | }
293 |
294 | .modal .close {
295 | color: #aaa;
296 | float: right;
297 | font-size: 28px;
298 | font-weight: bold;
299 | }
300 |
301 | .modal .close:hover,
302 | .modal .close:focus {
303 | color: black;
304 | text-decoration: none;
305 | cursor: pointer;
306 | }
307 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Advanced Calculator | Simplified Learner
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
History
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | | ( |
34 | ) |
35 | ← |
36 | + |
37 |
38 |
39 | | 7 |
40 | 8 |
41 | 9 |
42 | - |
43 |
44 |
45 | | 4 |
46 | 5 |
47 | 6 |
48 | * |
49 |
50 |
51 | | 1 |
52 | 2 |
53 | 3 |
54 | / |
55 |
56 |
57 | | C |
58 | 0 |
59 | . |
60 | = |
61 |
62 |
63 |
64 | | √ |
65 | ^ |
66 | sin |
67 | cos |
68 |
69 |
70 | | tan |
71 | log |
72 | n! |
73 | Graph |
74 |
75 |
76 |
77 | | MC |
78 | MR |
79 | M+ |
80 | M- |
81 |
82 |
83 |
84 | | $ |
85 | Prog |
86 | Matrix |
87 | Stat |
88 |
89 |
90 |
91 |
93 |
94 | ×
95 |
Unit and Currency Converter
96 |
97 |
98 |
100 |
101 | ×
102 |
Customize Calculator
103 |
104 |
105 |
107 |
108 | ×
109 |
Financial Calculator
110 |
111 |
112 |
114 |
115 | ×
116 |
Programming Calculator
117 |
118 |
119 |
121 |
122 | ×
123 |
Matrix Operations
124 |
125 |
126 |
128 |
129 | ×
130 |
Statistics
131 |
132 |
133 |