├── .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 | <br>
 4 | <a href="https://code-recursion.github.io/UI-Calculator">view live version</a>
 5 | ## `Screen Shot`
 6 | <img src="ScreenShot/C.JPG">
 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:<br>
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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale = 1">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
10 |     <title>Calculator</title>
11 | 
12 |     <link type="text/css" href="main.css" rel="stylesheet">
13 | 
14 | </head>
15 | 
16 | <body>
17 | 
18 |     <h1>Simple Calculator to Calculate Anything</h1>
19 | 
20 |     <div class="container">
21 | 
22 | 
23 |         <div class="output">
24 | 
25 |             <input maxlength="20" id="display" type="text" name="answer" autofocus>
26 | 
27 |         </div>
28 | 
29 |         <div class="keyboard">
30 | 
31 |             <button id="CE" onclick="document.getElementById('display').value = display.value.slice(0,-1)">CE</button>
32 | 
33 |             <button id="clear" onclick="document.getElementById('display').value =''">C</button>
34 | 
35 |             <button id="div" onclick="document.getElementById('display').value += '/'">/</button>
36 | 
37 |             <button id="mod" onclick="document.getElementById('display').value += '%'">%</button>
38 |             
39 |             <button id="one" onclick="document.getElementById('display').value +='1'">1</button>
40 | 
41 |             <button id="two" onclick="document.getElementById('display').value +='2'">2</button>
42 | 
43 |             <button id="three" onclick="document.getElementById('display').value +='3'">3</button>
44 | 
45 |             <button id="add" onclick="document.getElementById('display').value +='+'">+</button>
46 | 
47 | 
48 |             <button id="four" onclick="document.getElementById('display').value +='4'">4</button>
49 | 
50 |             <button id="five" onclick="document.getElementById('display').value +='5'">5</button>
51 | 
52 |             <button id="six" onclick="document.getElementById('display').value +='6'">6</button>
53 | 
54 |             <button id="minus" onclick="document.getElementById('display').value +='-'">-</button>
55 | 
56 |             <button id="seven" onclick="document.getElementById('display').value +='7'">7</button>
57 | 
58 |             <button id="eight" onclick="document.getElementById('display').value +='8'">8</button>
59 | 
60 |             <button id="nine" onclick="document.getElementById('display').value +='9'">9</button>
61 | 
62 |             <button id="multiply" onclick="document.getElementById('display').value +='*'">*</button>
63 |              <!-- disableb the button so that the hover effect to be changed for disableb buttons -->
64 |             <button disabled class="noHover"></button>
65 | 
66 |             <button id="zero" onclick="document.getElementById('display').value +='0'">0</button>
67 | 
68 |             <button id="power" onclick="document.getElementById('display').value +='**'">^</button>
69 | 
70 |             <button id="equal" type="submit" onclick="calculate(display.value)">=</button>
71 | 
72 |         </div>
73 |     </div>
74 | 
75 |     <script type="text/javascript" src="script.js">
76 |     </script>
77 | 
78 | </body>
79 | 
80 | </html>
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 | } 


--------------------------------------------------------------------------------