Simple Javascript Calculator

├── LICENSE ├── README.md ├── bgIm.jpg ├── images ├── bgIm.jpg └── favicon2.png ├── index.html ├── script.js └── style.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Devanshu Vashishtha 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 | [![Netlify Status](https://api.netlify.com/api/v1/badges/4f2b9d70-c9a5-4c3f-a110-7bcdea4bce59/deploy-status)](https://app.netlify.com/sites/web-codegrammer-js-calculator/deploys) 2 | # Simple Javascript Calculator 3 | A simple calculator using HTML, CSS & Javascript 4 | ![title-pic](https://iili.io/dYj0hB.png) 5 | This is a simple calculator functionality achieved using Javascript. The logic is very simple (you can also try it 😅) with the less lines of code possible . 6 | 7 | ### [Live Site](https://web-codegrammer-js-calculator.netlify.app) 8 | 9 | ## Execution: 10 | - Download the entire repository. 11 | - Open up the index.html or Run LocalHost:3000 on VsCode. 12 | 13 | ## Tech Stack used: 14 | - HTML 15 | - CSS [for style/Presentation] 16 | - Javascript [for Logic/Working of calculator] 17 | 18 | ## License 19 | 20 | [MIT](https://github.com/web-codegrammer/Simple-Javascript-Calculator/blob/master/LICENSE) 21 | 22 | Issued to ```Devanshu Vashishtha``` | All Rights Reserved | 2020 23 | -------------------------------------------------------------------------------- /bgIm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web-codegrammer/Simple-Javascript-Calculator/9cb8bc84588e2bae69732eff1d08a9739f9681c1/bgIm.jpg -------------------------------------------------------------------------------- /images/bgIm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web-codegrammer/Simple-Javascript-Calculator/9cb8bc84588e2bae69732eff1d08a9739f9681c1/images/bgIm.jpg -------------------------------------------------------------------------------- /images/favicon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web-codegrammer/Simple-Javascript-Calculator/9cb8bc84588e2bae69732eff1d08a9739f9681c1/images/favicon2.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | Simple Javascript Calculator 11 | 12 | 13 | 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 | Developed with 💖 From Pure Javascript 53 |

54 |

58 |

59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | function getHistory() { 2 | return document.getElementById("history-value"); 3 | } 4 | function printHistory(num) { 5 | document.getElementById("history-value").innerText = num; 6 | } 7 | function getOutput() { 8 | return document.getElementById("output-value").innerText; 9 | } 10 | function printOutput(num) { 11 | document.getElementById("output-value").innerText = num; 12 | } 13 | var lst = ["%", "/", "+", "-", "*"]; 14 | var f = false; 15 | var operator = document.getElementsByClassName("number"); 16 | 17 | for (var i = 0; i < operator.length; i++) { 18 | operator[i].addEventListener("click", function () { 19 | if (this.id == "clear") { 20 | printHistory(""); 21 | printOutput(""); 22 | } else if (this.id == "backspace") { 23 | var output = getOutput(); 24 | if (output) { 25 | //if output has a value 26 | output = output.substring(0, output.length - 1); 27 | //output = output; 28 | printOutput(output); 29 | } 30 | } else if (this.id == "=") { 31 | try { 32 | var output = getOutput(); 33 | 34 | if (output == "NaN" || output == "" || f) { 35 | f = false; 36 | printOutput(""); 37 | printHistory(""); 38 | } else { 39 | var outpu = eval(output); 40 | // print(outpu); 41 | if (outpu == undefined) { 42 | outpu = "NaN"; 43 | output = ""; 44 | } 45 | f = true; 46 | printOutput(outpu); 47 | printHistory(output); 48 | } 49 | } catch (error) { 50 | outpu = "NaN"; 51 | output = ""; 52 | f = true; 53 | printOutput(outpu); 54 | printHistory(output); 55 | } 56 | } else { 57 | var output = getOutput().toString(); 58 | //console.log(lst[1] == this.id); 59 | if (output.length == 0 && lst.includes(this.id)) { 60 | printOutput(""); 61 | printHistory(""); 62 | f = false; 63 | } else { 64 | if (f || output == "NaN") { 65 | if (!lst.includes(this.id)) { 66 | output = this.id; 67 | printHistory(""); 68 | } else { 69 | output = output + this.id.toString(); 70 | } 71 | f = false; 72 | } else { 73 | if (output.length > 0) output = output + this.id.toString(); 74 | else output = this.id; 75 | } 76 | console.log(output); 77 | 78 | printOutput(output); 79 | } 80 | } 81 | }); 82 | } 83 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Open Sans", sans-serif; 3 | background-color: rgb(81, 75, 75); 4 | } 5 | body::-webkit-scrollbar { 6 | display: none; 7 | } 8 | /* #container { 9 | display: flex; 10 | width: 100%; 11 | height: fit-content; 12 | padding: 20px; 13 | background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); 14 | 15 | margin: 20px auto; 16 | } */ 17 | #calculator { 18 | max-width: 320px; 19 | width: 340px; 20 | height: 600px; 21 | background-color: #eaedef; 22 | margin: auto; 23 | padding: 10px; 24 | top: 37px; 25 | position: relative; 26 | border-radius: 5px; 27 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 28 | } 29 | #result { 30 | height: 120px; 31 | border-width: 2px; 32 | border-color: black; 33 | border-radius: 5px; 34 | background-color: #c2c7cb; 35 | font-size: fit-content; 36 | overflow: scroll; 37 | } 38 | 39 | #history { 40 | text-align: right; 41 | height: 20px; 42 | margin: 0 20px; 43 | padding-top: 20px; 44 | font-size: 15px; 45 | color: #919191; 46 | } 47 | #result::-webkit-scrollbar { 48 | display: none; 49 | } 50 | #history::-webkit-scrollbar { 51 | display: none; 52 | } 53 | #output { 54 | text-align: right; 55 | height: 60px; 56 | margin: 10px 20px; 57 | font-size: 30px; 58 | } 59 | #keyboard { 60 | height: 450px; 61 | background-color: #eaedef; 62 | } 63 | .operator, 64 | .number, 65 | .empty { 66 | width: 50px; 67 | height: 50px; 68 | margin: 15px; 69 | float: left; 70 | border-radius: 50%; 71 | border-width: 0; 72 | font-weight: bold; 73 | font-size: 15px; 74 | } 75 | .number, 76 | .empty { 77 | background-color: #eaedef; 78 | } 79 | .number, 80 | .operator { 81 | cursor: pointer; 82 | } 83 | .operator:active, 84 | .number:active { 85 | font-size: 13px; 86 | } 87 | .operator:focus, 88 | .number:focus, 89 | .empty:focus { 90 | outline: 0; 91 | } 92 | button:nth-child(4) { 93 | font-size: 20px; 94 | background-color: #20b2aa; 95 | } 96 | button:nth-child(8) { 97 | font-size: 20px; 98 | background-color: #ffa500; 99 | } 100 | button:nth-child(12) { 101 | font-size: 20px; 102 | background-color: #f08080; 103 | } 104 | button:nth-child(16) { 105 | font-size: 20px; 106 | background-color: #7d93e0; 107 | } 108 | button:nth-child(20) { 109 | font-size: 20px; 110 | background-color: #9477af; 111 | } 112 | 113 | .copyright p { 114 | margin-top: 1.2rem; 115 | color: #ffffff; 116 | text-align: center; 117 | font-size: 0.9rem; 118 | } 119 | 120 | .copyright h5 { 121 | margin-bottom: 1.2rem; 122 | margin-top: 1rem; 123 | text-align: center; 124 | font-size: 1.1rem; 125 | } 126 | --------------------------------------------------------------------------------