├── .vscode ├── launch.json └── settings.json ├── LICENSE ├── README.md ├── images ├── favicon.ico ├── heart.png ├── history.png └── meta.jpg ├── index.html ├── scripts ├── calc.js └── hist.js └── styles └── style.css /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://localhost:8080", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [2023] [harsh98trivedi] 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simple JavaScript Calculator 2 | 3 | [![Simple Javascript Calculator](https://raw.githubusercontent.com/harsh98trivedi/Simple-JavaScript-Calculator/master/images/meta.jpg)](https://harsh98trivedi.github.io/Simple-JavaScript-Calculator) 4 | 5 | A simple JavaScript Calculator made by [Harsh Trivedi](https://harsh98trivedi.github.io). 6 | 7 | ## Overview 8 | 9 | The Simple JavaScript Calculator is a straightforward web-based calculator built using JavaScript. It provides basic arithmetic operations to help users perform calculations quickly and efficiently. 10 | 11 | ## Usage 12 | 13 | You can access the Simple JavaScript Calculator by visiting the following link: [Simple JavaScript Calculator](https://harsh98trivedi.github.io/Simple-JavaScript-Calculator) 14 | 15 | Simply enter your mathematical expressions and use the calculator's features to perform calculations with ease. 16 | 17 | ## Contributors 18 | 19 | Contributors are always welcome to make contributions to this project and help improve it. If you'd like to contribute or work on available issues, feel free to do so. Let's collaborate and make this calculator even better! 20 | 21 | ## Happy Coding! 22 | 23 | We hope you find this Simple JavaScript Calculator useful and enjoy using it for your calculations. If you have any questions or suggestions, please don't hesitate to reach out to [Harsh Trivedi](https://harsh98trivedi.github.io). 24 | 25 | Happy coding! 26 | -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harsh98trivedi/Simple-JavaScript-Calculator/0d82ff4a695b392640df28dec46a6f0e4c46deaa/images/favicon.ico -------------------------------------------------------------------------------- /images/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harsh98trivedi/Simple-JavaScript-Calculator/0d82ff4a695b392640df28dec46a6f0e4c46deaa/images/heart.png -------------------------------------------------------------------------------- /images/history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harsh98trivedi/Simple-JavaScript-Calculator/0d82ff4a695b392640df28dec46a6f0e4c46deaa/images/history.png -------------------------------------------------------------------------------- /images/meta.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harsh98trivedi/Simple-JavaScript-Calculator/0d82ff4a695b392640df28dec46a6f0e4c46deaa/images/meta.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Simple Calculator Harsh Trivedi 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 19 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 31 | 33 | 34 | 35 | 37 | 39 | 40 | 41 | 42 | 44 | 45 | 46 | 48 | 49 | 50 | 51 | 52 | 53 |
54 |

55 |
56 | 60 |
61 | CALCULATOR 62 | 63 |

64 |
65 | 66 | 67 | 68 | 69 | 70 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 |
71 |
72 |
73 | 74 |
75 |
76 | 77 |
78 |
79 |
107 |
108 |
109 | Made with by Harsh Trivedi 110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 | PLEASE TURN YOUR DEVICE 118 |
119 | 120 | 121 | 122 | 123 | 124 | 125 | 131 | 175 | -------------------------------------------------------------------------------- /scripts/calc.js: -------------------------------------------------------------------------------- 1 | console.log( 2 | "Javascript Calculator Made by Harsh Trivedi\nhttps://harsh98trivedi.github.io" 3 | ); 4 | 5 | let flag = 0; 6 | 7 | function isNumber(char) { 8 | return /^\d$/.test(char); 9 | } 10 | 11 | document.getElementById("answer").readOnly = true; 12 | let screen = document.getElementById("answer"); 13 | buttons = document.querySelectorAll("button"); 14 | let screenValue = ""; 15 | let lastScreenValue = ""; 16 | let maxItems = 6; 17 | let isSign = true; 18 | 19 | for (item of buttons) { 20 | item.addEventListener("click", (e) => { 21 | buttonText = e.target.innerText; 22 | if (buttonText == "X" && !isSign) { 23 | if (flag == 1) { 24 | flag = 0; 25 | } 26 | buttonText = "*"; 27 | isSign = true; 28 | screenValue += buttonText; 29 | screen.value = screenValue; 30 | } else if (buttonText == "C") { 31 | if (flag == 1) { 32 | flag = 0; 33 | } 34 | screenValue = ""; 35 | screen.value = screenValue; 36 | screen.classList.remove("negative"); // Remove negative class 37 | isSign = true; 38 | } else if (buttonText == "=") { 39 | checkForBracketMulti(); 40 | if (parseFloat(screen.value) < 0) { 41 | screen.classList.add("negative"); 42 | } else { 43 | screen.classList.remove("negative"); 44 | } 45 | } else if(buttonText=="(" || buttonText==")") { 46 | if(flag==1){ 47 | flag =0; 48 | } 49 | screenValue+=buttonText; 50 | screen.value=screenValue; 51 | } 52 | else if (isNumber(buttonText)) { 53 | if (flag == 1) { 54 | screenValue = buttonText; 55 | flag = 0; 56 | } else { 57 | screenValue += buttonText; 58 | } 59 | screen.value = screenValue; 60 | isSign = false; 61 | screen.classList.remove("negative"); // Remove negative class 62 | } else { 63 | if (flag == 1) { 64 | flag = 0; 65 | } 66 | if (!isSign) { 67 | screenValue = screen.value + buttonText; 68 | screen.value = screenValue; 69 | isSign = true; 70 | } 71 | screen.classList.remove("negative"); // Remove negative class 72 | } 73 | }); 74 | } 75 | 76 | document.addEventListener("keydown", function (event) { 77 | // ... (same code as before) 78 | }); 79 | 80 | window.onerror = function () { 81 | alert("PLEASE INPUT VALID EXPRESSION"); 82 | screenValue = ""; 83 | screen.value = screenValue; 84 | screen.classList.remove("negative"); // Remove negative class 85 | console.clear(); 86 | }; 87 | 88 | // ... (same code as before) 89 | 90 | function checkForBracketMulti() { 91 | // ... (same code as before) 92 | 93 | if (eval(screenValue) !== undefined) { 94 | if (!Number.isInteger(eval(screenValue))){ 95 | screen.value = eval(screenValue).toFixed(2); 96 | } 97 | else { 98 | screen.value = eval(screenValue); 99 | } 100 | 101 | lastScreenValue = screenValue; 102 | screenValue = screen.value; 103 | if (parseFloat(screen.value) < 0) { 104 | screen.classList.add("negative"); 105 | } else { 106 | screen.classList.remove("negative"); 107 | } 108 | // ... (same code as before) 109 | } 110 | flag = 1; 111 | } 112 | -------------------------------------------------------------------------------- /scripts/hist.js: -------------------------------------------------------------------------------- 1 | let historybutton = document.getElementById('historybutton'); 2 | let history = document.getElementById('history'); 3 | let bar1 = document.getElementById('bar1'); 4 | let bar2 = document.getElementById('bar2'); 5 | let dis = document.getElementById('answer'); 6 | 7 | function showHistory() { 8 | let calcHistory = JSON.parse(localStorage.getItem("calcHistory")) || []; 9 | let len = calcHistory.length; 10 | 11 | history.innerHTML = ''; 12 | 13 | bar1.style.display = 'block'; 14 | bar2.style.display = 'block'; 15 | if (len === 0) { 16 | let historyItem = document.createElement('div'); 17 | historyItem.innerHTML = "There's no history yet."; 18 | historyItem.className = 'historyelement his'; 19 | historyItem.style.fontSize = '25px'; 20 | history.appendChild(historyItem); 21 | } else { 22 | for (let index = len-1; index >= 0; index--) { 23 | const element = calcHistory[index]; 24 | let historyItem = document.createElement('div'); 25 | historyItem.className = 'historyelement'; 26 | historyItem.innerHTML = `${element.lastScreenValue} = ${element.result}`;//Actually I have added this that makes red color in the history section ............. 27 | history.appendChild(historyItem); 28 | if (index > 0) history.appendChild(document.createElement('hr')); 29 | } 30 | } 31 | 32 | history.style.display = 'block'; 33 | } 34 | 35 | historybutton.addEventListener('click', showHistory); 36 | 37 | function clearAll(){ 38 | dis.value = ''; 39 | } 40 | 41 | function hide(){ 42 | history.style.display = 'none'; 43 | bar1.style.display = 'none'; 44 | bar2.style.display = 'none'; 45 | } 46 | function deleteLastEntry() { 47 | let calcHistory = JSON.parse(localStorage.getItem("calcHistory")) || []; 48 | if (calcHistory.length > 0) { 49 | calcHistory.pop(); 50 | localStorage.setItem("calcHistory", JSON.stringify(calcHistory)); 51 | showHistory(); // It open each time when u click on CE if u dont want then u can remove it .... 52 | } 53 | } 54 | 55 | 56 | 57 | bar1.addEventListener('click', hide); 58 | bar2.addEventListener('click', hide); 59 | -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | padding: 0; 4 | margin: 0; 5 | display: flex; 6 | justify-content: center; 7 | color: #ecf0f1; 8 | background-color: rgb(23, 24, 37); 9 | font-family: 'Fjalla One', sans-serif; 10 | animation: fadein 1.5s; 11 | font-family: 'Fjalla One', sans-serif; 12 | } 13 | @keyframes fadein { 14 | 0% { 15 | opacity: 0%; 16 | } 17 | 100% { 18 | opacity: 100%; 19 | } 20 | } 21 | 22 | h1 { 23 | font-size: 2.5rem; 24 | font-weight: 500; 25 | margin-bottom: 0; 26 | padding: 0 5px; 27 | display: flex; 28 | align-items: center; 29 | justify-content: space-between; 30 | } 31 | 32 | input { 33 | background-color: rgba(52, 73, 94, 0.5); 34 | color: #ecf0f1; 35 | outline: none; 36 | text-align: right; 37 | border: none; 38 | font-size: 3rem; 39 | width: 80vw; 40 | margin-bottom: 0.5rem; 41 | border-radius: 0.5rem; 42 | padding: 0.5rem 1.5rem; 43 | -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); 44 | -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); 45 | box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); 46 | } 47 | 48 | .container { 49 | margin: auto; 50 | text-align: center; 51 | position: absolute; 52 | top: 50%; 53 | left: 50%; 54 | transform: translate(-50%, -50%); 55 | } 56 | 57 | .calculator { 58 | padding: 0.25rem; 59 | display: inline-block; 60 | } 61 | 62 | table { 63 | margin: auto; 64 | } 65 | 66 | button { 67 | border: none; 68 | background-color: white; 69 | width: 20vw; 70 | height: 10vh; 71 | padding: 0.5rem 0; 72 | cursor: pointer; 73 | margin: 0.25vmax; 74 | font-size: 2vmax; 75 | border-radius: 1rem; 76 | -moz-transition: all ease 0.5s; 77 | -webkit-transition: all 0.5s ease; 78 | transition: all 0.5s ease; 79 | -o-transition: all ease 0.5s; 80 | } 81 | button:active { 82 | transform: scale(0.95); 83 | /* Scaling button to 0.98 to its original size */ 84 | box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); 85 | /* Lowering the shadow */ 86 | } 87 | 88 | button:hover { 89 | -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); 90 | -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); 91 | box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); 92 | -moz-transition: all ease 0.5s; 93 | -webkit-transition: all 0.5s ease; 94 | transition: all 0.5s ease; 95 | -o-transition: all ease 0.5s; 96 | } 97 | 98 | a{ 99 | outline: none; 100 | -moz-transition: all ease 0.5s; 101 | -webkit-transition: all 0.5s ease; 102 | transition: all 0.5s ease; 103 | -o-transition: all ease 0.5s; 104 | } 105 | 106 | a:hover{ 107 | text-shadow: 0px 0px 10px rgba(241, 196, 15, 0.5); 108 | -moz-transition: all ease 0.5s; 109 | -webkit-transition: all 0.5s ease; 110 | transition: all 0.5s ease; 111 | -o-transition: all ease 0.5s; 112 | } 113 | 114 | #turn { 115 | display: none; 116 | z-index: 100; 117 | position: fixed; 118 | } 119 | 120 | #historybutton{ 121 | width:40px; 122 | height:40px; 123 | border-radius: 20px; 124 | cursor: pointer; 125 | } 126 | 127 | #history{ 128 | position: absolute; 129 | width:90%; 130 | height: 80vh; 131 | top:10vh; 132 | background-color: white; 133 | border: 6px solid black; 134 | border-radius: 10px; 135 | display: none; 136 | /* overflow-y: scroll; */ 137 | } 138 | 139 | .historyelement{ 140 | color: black; 141 | margin: 20px; 142 | font-size: 40px; 143 | } 144 | 145 | #bar1, #bar2{ 146 | position: absolute; 147 | width:30px; 148 | height: 4px; 149 | background-color: white; 150 | margin-top: 20px; 151 | margin-right: 20px; 152 | margin-left: 93%; 153 | transform: rotate(45deg); 154 | cursor: pointer; 155 | display: none; 156 | } 157 | 158 | #bar2{ 159 | transform: rotate(135deg); 160 | } 161 | 162 | @media (orientation: landscape) and (max-height: 500px) { 163 | #turn { 164 | width: 100vw; 165 | height: 100vh; 166 | display: flex; 167 | justify-content: center; 168 | align-items: center; 169 | font-size: 2rem; 170 | color: rgba(52, 73, 94, 1.0); 171 | background-color: rgba(236, 240, 241, 1.0); 172 | } 173 | } 174 | 175 | @media (max-width: 700px) { 176 | td button{ 177 | font-size: 18px; 178 | font-weight: 600; 179 | } 180 | } 181 | 182 | .toggle-container { 183 | margin: 10px -10px 0 0; 184 | 185 | } 186 | 187 | .tittle{ 188 | text-decoration: none; 189 | color: #f1c40f; 190 | cursor: pointer; 191 | margin-left: -20px; 192 | } 193 | 194 | .toggle-switch { 195 | position: relative; 196 | display: inline-block; 197 | width: 60px; 198 | height: 34px; 199 | } 200 | 201 | .toggle-switch input { 202 | opacity: 0; 203 | width: 0; 204 | height: 0; 205 | } 206 | 207 | .toggle-slider { 208 | position: absolute; 209 | cursor: pointer; 210 | top: 0; 211 | left: 0; 212 | right: 0; 213 | bottom: 0; 214 | background-color: #ccc; 215 | -webkit-transition: .4s; 216 | transition: .4s; 217 | border-radius: 34px; 218 | } 219 | 220 | .toggle-slider:before { 221 | position: absolute; 222 | content: ""; 223 | height: 26px; 224 | width: 26px; 225 | left: 4px; 226 | bottom: 4px; 227 | background-color: rgb(233, 227, 227); 228 | -webkit-transition: .4s; 229 | transition: .4s; 230 | border-radius: 50%; 231 | border-radius: 10px; 232 | } 233 | 234 | input:checked + .toggle-slider { 235 | background-color: #2a2c2e; 236 | border-radius: 10px; 237 | } 238 | 239 | input:focus + .toggle-slider { 240 | box-shadow: 0 0 1px #2b2c2d; 241 | border-radius: 10px; 242 | } 243 | 244 | 245 | input:checked + .toggle-slider:before { 246 | -webkit-transform: translateX(26px); 247 | -ms-transform: translateX(26px); 248 | transform: translateX(26px); 249 | } 250 | 251 | /* Dark mode styles */ 252 | 253 | .dark-mode { 254 | background-color: black; 255 | border-radius: 10px; 256 | color: #fff; 257 | } 258 | 259 | .dark-mode body, 260 | .dark-mode html { 261 | background-color: black; 262 | border-radius: 10px; 263 | 264 | } 265 | 266 | .dark-mode .calculator { 267 | background-color: black; 268 | border-radius: 10px; 269 | 270 | } 271 | 272 | .dark-mode table { 273 | color: #fff; 274 | border-radius: 10px; 275 | } 276 | 277 | .dark-mode button { 278 | background-color: #555; 279 | color: #fff; 280 | border-radius: 10px; 281 | } 282 | 283 | 284 | .dark-mode a { 285 | color: #fff; 286 | border-radius: 10px; 287 | } 288 | 289 | .row{ 290 | display: flex; 291 | font-size: 1rem; 292 | justify-content: center; 293 | max-width: 20vw; 294 | margin: auto; 295 | } 296 | 297 | .row .col button{ 298 | background-color: #f01600; 299 | font-weight: bold; 300 | color: #ecf0f1; 301 | width: 8vw; 302 | } 303 | 304 | @media (max-width: 700px) { 305 | .row .col button{ 306 | width: 10vw; 307 | } 308 | } 309 | 310 | #answer { 311 | caret-color: #0f38f1; 312 | } 313 | /* Negative Numbers */ 314 | .negative { 315 | color: red; 316 | } 317 | 318 | /* visual effect on pressing button */ 319 | .clicked { 320 | transform: scale(0.68); /* Slightly shrink the button */ 321 | } --------------------------------------------------------------------------------