├── .gitignore ├── LICENSE.md ├── README.md ├── ScreenShot ├── C.JPG ├── Capture.JPG └── UI.JPG ├── index.html ├── main.css └── script.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.md 2 | /ScreenShot 3 | .gitignore -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Code-Recursion 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 | # UI-Calculator 2 | Simple Calculator With Clean UI. 3 |
4 | view live version 5 | ## `Screen Shot` 6 | 7 | 8 | ### Project Structure 9 | . 10 | ├── screenshot 11 | | └── C.JPG 12 | | └── Capture.JPG 13 | | └── UI.JPG 14 | ├── .gitignore 15 | ├── LICENSE.md 16 | ├── Readme.md 17 | ├── index.html 18 | ├── main.css 19 | ├── script.js 20 | └── ... 21 | 22 | ### Contributing :tada: 23 | 24 | Being a project of an open source competition, we believe in the power of PRs as that's what makes any project awesome and inspires us to create and learn. Any contributions you make are **greatly appreciated**. 25 | 26 | 1. Fork the Project. 27 | 2. Clone the Repo . 28 | 2. Create your changes in the local repo . 29 | 3. Commit your Changes with a proper commit message (`git commit -m '...Your Message...'`). 30 | 4. Push to the Branch . 31 | 5. Add a live link site hosted on github pages. 32 | 6. Open a Pull Request mentioniong the issue number on commit message or create your own issue. 33 | 34 | ### Contact :email: 35 | For any query or build issues feel free to reach out the maintainers:
36 | [Ajay](https://github.com/Code-Recursion) 37 | 38 | ### License 39 | 40 | Distributed under the MIT License. See [`LICENSE`](https://github.com/Code-Recursion/UI-Calculator/blob/master/LICENSE.md) for more information. 41 | -------------------------------------------------------------------------------- /ScreenShot/C.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Recursion/UI-Calculator/667905d32c6aa19f221a70161683e7eb8ec5a66e/ScreenShot/C.JPG -------------------------------------------------------------------------------- /ScreenShot/Capture.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Recursion/UI-Calculator/667905d32c6aa19f221a70161683e7eb8ec5a66e/ScreenShot/Capture.JPG -------------------------------------------------------------------------------- /ScreenShot/UI.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Recursion/UI-Calculator/667905d32c6aa19f221a70161683e7eb8ec5a66e/ScreenShot/UI.JPG -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Calculator 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Simple Calculator to Calculate Anything

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 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
73 |
74 | 75 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | 3 | -webkit-user-select: none; /* Safari */ 4 | -moz-user-select: none; /* Firefox */ 5 | -ms-user-select: none; /* IE10+/Edge */ 6 | user-select: none; /* Standard */ 7 | 8 | height: 100%; 9 | width:100%; 10 | padding: 0; 11 | margin: 0; 12 | overflow-x: hidden; 13 | } 14 | 15 | /* used white colour for foreground so that disabled button is not visible to the screen */ 16 | button:disabled{ 17 | color: #fa0000; 18 | } 19 | /* made the hover background color to white so the annoying hover in empty space is removed */ 20 | 21 | button:disabled:hover{ 22 | color:white; 23 | background-color:rgb(128, 255, 255); 24 | } 25 | .noHover{ 26 | pointer-events: none; 27 | } 28 | 29 | body { 30 | font-family: monospace; 31 | background-image: linear-gradient(to left, lightpink, lightblue); 32 | } 33 | 34 | h1 { 35 | padding: 25px; 36 | margin: 20px; 37 | text-align: center; 38 | } 39 | 40 | .container { 41 | justify-content: center; 42 | align-items: center; 43 | margin: auto; 44 | height: 410px; 45 | width: 340px; 46 | box-shadow: 6px 8px 2px grey; 47 | background: white; 48 | border-radius: 10px; 49 | } 50 | 51 | .output { 52 | position: relative; 53 | top: 20px; 54 | text-align: center; 55 | } 56 | 57 | input { 58 | text-align: end; 59 | padding: 8px; 60 | font-size: 25px; 61 | } 62 | 63 | #display { 64 | outline: none; 65 | width: 280px; 66 | height: 40px; 67 | background: #f1f1f1; 68 | border-radius: 10px; 69 | border-color: none; 70 | border: none; 71 | } 72 | 73 | .keyboard { 74 | position: relative; 75 | top: 40px; 76 | text-align: center; 77 | } 78 | 79 | /* it Removes Outline of all Button */ 80 | *:focus { 81 | outline: 0 !important; 82 | } 83 | 84 | button { 85 | font-family: sans-serif; 86 | font-weight: bolder; 87 | font-size: 22px; 88 | color:"black"; 89 | background: white; 90 | border: none; 91 | margin: 6px; 92 | padding: 12px; 93 | outline: none; 94 | border-radius: 50%; 95 | width: 49px; 96 | height: 45px; 97 | line-height:normal; 98 | } 99 | 100 | button:nth-child(1) { 101 | background: lightgrey; 102 | } 103 | 104 | button:nth-child(2) { 105 | font-weight: 550; 106 | background: lightgrey; 107 | } 108 | 109 | button:nth-child(3) { 110 | background: lightgrey; 111 | } 112 | 113 | button:nth-child(4) { 114 | background: lightgreen; 115 | } 116 | 117 | button:nth-child(8) { 118 | background: aqua; 119 | } 120 | 121 | button:nth-child(12) { 122 | padding: 0px; 123 | font-size: 30px; 124 | font-family: monospace; 125 | background: orange; 126 | } 127 | 128 | button:nth-child(16) { 129 | background: pink; 130 | font-size: 25px; 131 | } 132 | 133 | button:nth-child(20) { 134 | background: yellow; 135 | } 136 | 137 | button:hover { 138 | background: rgb(247 230 236); 139 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var input = document.getElementById("display"); 2 | 3 | //script to detect if enter button is clicked to evaluate the result 4 | 5 | input.addEventListener("keyup", function(event) { 6 | 7 | // Number 13 is the "Enter" key on the keyboard 8 | 9 | if (event.keyCode == 13) { 10 | 11 | // Trigger the button element with a click 12 | 13 | document.getElementById("equal").click(); 14 | } 15 | }); 16 | 17 | // Function to calculate the result 18 | function calculate(operation) { 19 | let result; 20 | try { 21 | result = eval(operation); 22 | } catch (error) {} 23 | 24 | if ( result === 0 || isFinite(result) && Boolean(result) ) { 25 | document.getElementById('display').value = result; 26 | } else { 27 | document.getElementById('display').value = 'Invalid operation'; 28 | } 29 | 30 | } --------------------------------------------------------------------------------