├── .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 | 2 | 3 | 4 | Grey Li's Calculator 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
0
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 | 53 |
54 | 55 |
56 | 57 | 58 |
59 |
60 |
61 |
62 | 66 | 67 | 68 | 69 | 70 | 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 | --------------------------------------------------------------------------------