├── .gitattributes
├── .gitignore
├── README.md
├── css
    └── style.css
├── image
    ├── banner.png
    ├── demo.png
    └── favicon.ico
├── index.html
└── js
    └── main.js


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Windows image file caches
 2 | Thumbs.db
 3 | ehthumbs.db
 4 | 
 5 | # Folder config file
 6 | Desktop.ini
 7 | 
 8 | # Recycle Bin used on file shares
 9 | $RECYCLE.BIN/
10 | 
11 | # Windows Installer files
12 | *.cab
13 | *.msi
14 | *.msm
15 | *.msp
16 | 
17 | # Windows shortcuts
18 | *.lnk
19 | 
20 | # =========================
21 | # Operating System Files
22 | # =========================
23 | 
24 | # OSX
25 | # =========================
26 | 
27 | .DS_Store
28 | .AppleDouble
29 | .LSOverride
30 | 
31 | # Thumbnails
32 | ._*
33 | 
34 | # Files that might appear in the root of a volume
35 | .DocumentRevisions-V100
36 | .fseventsd
37 | .Spotlight-V100
38 | .TemporaryItems
39 | .Trashes
40 | .VolumeIcon.icns
41 | 
42 | # Directories potentially created on remote AFP share
43 | .AppleDB
44 | .AppleDesktop
45 | Network Trash Folder
46 | Temporary Items
47 | .apdisk
48 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Calculator
2 | A simple calculator made with JavaScript.
3 | 
4 | ## DEMO
5 | https://greyli.github.io/calculator/
6 | 
7 | ![demo](https://raw.githubusercontent.com/greyli/calculator/master/image/demo.png)


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
 1 | .box {
 2 |   font-family: 'Orbitron', sans-serif;
 3 |   width: 285px;
 4 |   height: 350px;
 5 |   margin: 15% auto auto;
 6 |   border: 1px solid #9e9b97;
 7 |   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), inset -1px -6px 12px 0.1px #89847e;
 8 |   border-radius: 20px;
 9 |   -webkit-user-select: none;
10 |   -moz-user-select: none;
11 |   -ms-user-select: none;
12 |   user-select: none;
13 | }
14 | 
15 | .screen {
16 |   height: 60px;
17 |   width: 240px;
18 |   border: 1px solid #7c877f;
19 |   background: #c7d3c5;
20 |   margin: 25px 20px 5px 20px;
21 |   border-radius: 6px;
22 | }
23 | 
24 | .main-screen {
25 |   width: 240px;
26 |   height: 22px;
27 |   padding: 10px 5px;
28 |   font-size: 20px;
29 |   text-align: right;
30 | }
31 | 
32 | .sub-screen {
33 |   max-width: 280px;
34 |   height: 15px;
35 |   padding: 10px 5px;
36 |   font-size: 12px;
37 |   text-align: right;
38 | }
39 | 
40 | .buttons {
41 |   margin: 10px auto;
42 | }
43 | 
44 | button {
45 |   margin: 5px;
46 |   padding: 3px 10px;
47 |   width: 50px;
48 |   height: 30px;
49 |   border: none;
50 |   box-shadow: 1px 2px #666;
51 | }
52 | 
53 | button:focus {outline:0 !important;}
54 | 
55 | button:active {
56 |   box-shadow: none;
57 |   transform: translateY(4px);
58 | }
59 | 
60 | .btn-zero {
61 |   width: 113px;
62 |   margin-right: 7px;
63 | }
64 | 
65 | .btn-equal {
66 |   position: absolute;
67 |   margin-left: 10px;
68 |   height: 75px;
69 | }


--------------------------------------------------------------------------------
/image/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greyli/calculator/70350f52066abccea065b4e071fd699d1f30c85e/image/banner.png


--------------------------------------------------------------------------------
/image/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greyli/calculator/70350f52066abccea065b4e071fd699d1f30c85e/image/demo.png


--------------------------------------------------------------------------------
/image/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greyli/calculator/70350f52066abccea065b4e071fd699d1f30c85e/image/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Grey Li's Calculator</title>
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 6 |   <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 7 |   <link href="css/style.css" rel="stylesheet">
 8 |   <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
 9 |   <link rel="shortcut icon" href="image/favicon.ico" type="image/x-icon">
10 | </head>
11 | 
12 | <body>
13 |   <div class="box">
14 |     <div class="screen">
15 |       <div class="main-screen" id="output">0</div>
16 |       <div class="sub-screen" id="output2"></div>
17 |     </div>
18 | 
19 |     <input type="hidden" id="num1">
20 |     <input type="hidden" id="operator">
21 |     <input type="hidden" id="num2">
22 |     <input type="hidden" id="temp">
23 | 
24 |     <!--a class="github" href="https://github.com/greyli/calculator" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="image/banner.png" alt="Fork me on GitHub"></a-->
25 | 
26 |     <div class="container-fluid">
27 |       <div class="buttons">
28 |         <button class="btn-clear btn btn-danger" id="clearButton">AC</button>
29 |         <button class="btn btn-warning" id="deleteButton">CE</button>
30 |         <button class="btn-operate btn btn-default" value="/">/</button>
31 |         <button class="btn-operate btn btn-default" value="*">x</button>
32 |       </div>
33 | 
34 |       <div class="buttons">
35 |         <button class="nums btn btn-default" value="7">7</button>
36 |         <button class="nums btn btn-default" value="8">8</button>
37 |         <button class="nums btn btn-default" value="9">9</button>
38 |         <button class="btn-operate btn btn-default" value="-">-</button>
39 |       </div>
40 | 
41 |       <div class="buttons">
42 |         <button class="nums btn btn-default" value="4">4</button>
43 |         <button class="nums btn btn-default" value="5">5</button>
44 |         <button class="nums btn btn-default" value="6">6</button>
45 |         <button class="btn-operate btn btn-default" value="+">+</button>
46 |       </div>
47 | 
48 |       <div class="buttons">
49 |         <button class="nums btn btn-default" value="1">1</button>
50 |         <button class="nums btn btn-default" value="2">2</button>
51 |         <button class="nums btn btn-default" value="3">3</button>
52 |         <button class="btn-equal btn btn-info" id="resultButton">=</button>
53 |       </div>
54 | 
55 |       <div class="buttons">
56 |         <button class="nums btn-zero btn btn-default" value="0">0</button>
57 |         <button class="nums btn btn-default" value=".">.</button>
58 |       </div>
59 |     </div>
60 |   </div>
61 |   <br>
62 |   <footer class="text-center">
63 |       Made by <a href="http://greyli.com" target="_blank">Grey Li</a> /
64 |         Fork me on <a href="https://github.com/greyli/calculator" target="_blank">GitHub</a>
65 |   </footer>
66 | 
67 |   <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
68 |   <script src="js/main.js"></script>
69 | </body>
70 | </html>
71 | 
72 | 


--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
  1 | $(document).ready(function() {
  2 |     var $mainOutput = $('#output');
  3 |     var $subOutput = $('#output2');
  4 |     var $op = $('#operator');
  5 |     var $num2 = $('#num2');
  6 |     var $num1 = $('#num1');
  7 |     var $temp = $('#temp');
  8 |     var clearData = function() {
  9 |         $num1.val('');
 10 |         $op.val('');
 11 |         $num2.val('');
 12 |         $temp.val('');
 13 |     };
 14 | 
 15 |     var clearOutput = function() {
 16 |         $mainOutput.html('');
 17 |         $subOutput.html('');
 18 |     };
 19 | 
 20 |     var digitError = function() {
 21 |         $mainOutput.html('0');
 22 |         $subOutput.html('Reach Digit Limit');
 23 |         $temp.val(0);
 24 |     }
 25 | 
 26 |     $('.nums').click(function() {
 27 |         if (('+-*/').indexOf($mainOutput.html()) != -1) {
 28 |             $mainOutput.html('');
 29 |         }
 30 |         // avoid multiple dot
 31 |         if ($(this).val() == '.' && ($mainOutput.html()).indexOf('.') != -1) return ;
 32 |         if ($(this).val() !== '.') {
 33 |             if ($mainOutput.html() == '0' || $subOutput.html() == 'Reach Digit Limit') {
 34 |                 clearOutput()
 35 |                 //subOutput.html('');
 36 |             }    
 37 |         }
 38 | 
 39 |         if ($temp.val() !== '') {
 40 |             clearOutput()
 41 |             clearData();
 42 |         }
 43 | 
 44 |         $mainOutput.append($(this).val());
 45 |         $subOutput.append($(this).val());
 46 | 
 47 |         if ($mainOutput.html().length > 12) {
 48 |             digitError();
 49 |         }
 50 |     });
 51 | 
 52 |     $('#clearButton').click(function() {
 53 |         $mainOutput.html('0');
 54 |         $subOutput.html('');
 55 |         clearData();
 56 |     });
 57 | 
 58 |     $('#deleteButton').click(function() {
 59 |         if ($mainOutput.html() != '0') {
 60 |             $mainOutput.html($mainOutput.html().substring(0, $mainOutput.html().length-1));
 61 |             $subOutput.html($subOutput.html().substring(0, $subOutput.html().length-1));
 62 |             if ($mainOutput.html() == '') {
 63 |                 $mainOutput.html('0');
 64 |             }
 65 |         }
 66 |     });
 67 | 
 68 |     $('.btn-operate').click(function() {
 69 |     var newOperator = $(this).val();
 70 |     if ($num1.val() !== '' &&  ('+-*/').indexOf($num1.val()) == -1 && $op.val() !== '') {
 71 |           $num2.val($mainOutput.html());
 72 |           if (('+-*/').indexOf($num2.val()) != -1) return ;
 73 |           var number1 = parseFloat($num1.val());
 74 |           var operator = $op.val();
 75 |           var number2 = parseFloat($num2.val());
 76 |           var result;
 77 |           if (operator == '+') {
 78 |               result = number1 + number2;
 79 |           } else if (operator == '-') {
 80 |               result = number1 - number2;
 81 |           } else if (operator == '*') {
 82 |               result = number1 * number2;
 83 |           } else if (operator == '/') {
 84 |               result = parseFloat(number1 / number2);
 85 |           }
 86 | 
 87 |           if (result.toString().length > 12) {
 88 |               digitError();
 89 |           } else {
 90 |               $mainOutput.html(newOperator);
 91 |               $subOutput.html(result + newOperator);
 92 |               $num1.val(result);
 93 |               $op.val(newOperator);
 94 |           }
 95 |     } else {
 96 |         $num1.val($mainOutput.html());
 97 |         $op.val(newOperator);
 98 |         $mainOutput.html(newOperator);
 99 |         $subOutput.append(newOperator);
100 |     }
101 |     });
102 | 
103 |     $('#resultButton').click(function() {
104 |        if ($mainOutput.html() === '' || ('+-*/').indexOf($mainOutput.html()) != -1) return ;
105 |         $num2.val($mainOutput.html());
106 |         var number1 = parseFloat($num1.val());
107 |         var operator = $op.val();
108 |         var number2 = parseFloat($num2.val());
109 |         var result;
110 |         if (operator == '+') {
111 |             result = number1 + number2;
112 |         } else if (operator == '-') {
113 |             result = number1 - number2;
114 |         } else if (operator == '*') {
115 |             result = number1 * number2;
116 |         } else if (operator == '/') {
117 |             result = parseFloat(number1 / number2);
118 |         }
119 |         if (result.toString().length > 12) {
120 |             digitError();
121 |         } else {
122 |             $mainOutput.html(result);
123 |             $subOutput.html(result);
124 |             clearData();
125 |         }
126 |     });
127 | });
128 | 


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