├── README.md
├── calc.css
├── index.html
└── calc.js
/README.md:
--------------------------------------------------------------------------------
1 | Simple Calculator
2 |
3 | Made with :coffee: by Nicholasscabral
4 |
5 |
6 | Check out the Site
7 |
8 |
9 | :construction_worker: Built with
10 |
15 |
16 | :computer: Web Screenshot
17 | 
18 |
19 | :iphone: Mobile Screenshots
20 | 
21 |
--------------------------------------------------------------------------------
/calc.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --primary-color: #0c2835;
3 | --secondary-color: #008B8B;
4 | }
5 |
6 | * {
7 | font-family: monospace;
8 | }
9 |
10 | body {
11 | background-color: var(--primary-color);
12 | }
13 |
14 | table {
15 | background-color: var(--primary-color);
16 | }
17 |
18 | form {
19 | margin: 0;
20 | }
21 |
22 | .main {
23 | position: absolute;
24 | top: 50%;
25 | left: 50%;
26 | transform: translateX(-50%) translateY(-50%);
27 |
28 | border: 4px solid var(--secondary-color);
29 | border-radius: 8px;
30 | }
31 |
32 | .display {
33 | width: 234px;
34 | height: 90px;
35 | padding-right: 6px;
36 | text-align: right;
37 |
38 | font-size: 20px;
39 | color: white;
40 | margin: 5px;
41 | outline: none;
42 |
43 | border-radius: 8px;
44 | border: 1px solid var(--secondary-color);
45 | background-color: var(--primary-color);
46 | }
47 |
48 | .operator, .number {
49 | appearance: none;
50 | -webkit-appearance: none;
51 | -moz-appearance: none;
52 | -ms-appearance: none;
53 | -o-appearance: none;
54 | padding: 0;
55 | width: 52px;
56 | height: 50px;
57 |
58 | font-size: 22px;
59 | margin: 2;
60 | color: white;
61 |
62 | border: 1px solid var(--secondary-color);
63 | border-radius: 8px;
64 | outline: none;
65 | background-color: var(--primary-color);
66 |
67 | transition: 400ms;
68 | }
69 |
70 | .operator:hover, .number:hover {
71 | cursor: pointer;
72 | background-color: var(--secondary-color);
73 | }
74 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | calculadora
4 |
5 |
6 |
7 |
8 |
9 |
44 |
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/calc.js:
--------------------------------------------------------------------------------
1 | function insert(num) {
2 | //if there is syntax error, return the function
3 | if(SyntaxError) {
4 | return
5 | }
6 |
7 | // insert a number into the display
8 | if(display.value.length < 20) {
9 |
10 | if(isNaN(num)) {
11 | display.value += num
12 | }
13 | else if(display.value.length == 1 && display.value[0] == 0) {
14 | display.value = num
15 | }
16 | else {
17 | display.value += num
18 | }
19 | }
20 | else {
21 | return
22 | }
23 | }
24 |
25 | function clean() {
26 | //if there is a syntax error, toggle the variable to false (reset)
27 | SyntaxError = false
28 | //clear the display value
29 | display.value = "0";
30 |
31 | }
32 |
33 | function equal() {
34 | var exp = display.value
35 | var flag = false //boolean variable to check condicionals
36 |
37 | for(i = 0; i < exp.length; i++) {
38 | if(isNaN(exp[i]) && isNaN(exp[i+1])) {
39 | if(exp[i] != "+" && exp[i] != "-") {
40 | //if there are two operators together, toggle syntaxerror to true
41 | display.value = "Syntax Error"
42 | SyntaxError = true
43 | }
44 |
45 | }
46 | }
47 |
48 | if(flag == false) { //if there is no errors, calculate the expression normaly
49 | var answer = eval(exp)
50 |
51 | if(isFinite(answer)) {
52 | display.value = answer
53 | }
54 | else {
55 | display.value = "Math Error" // if is infinity
56 | SyntaxError = true
57 | }
58 | }
59 |
60 |
61 | }
62 |
63 | function back() {
64 | //if there is syntax error, return the function
65 | if(SyntaxError) {
66 | return
67 | }
68 |
69 | display.value = display.value.substring(0,display.value.length-1)
70 |
71 | if(display.value == "") {
72 | display.value = "0"
73 | }
74 |
75 | }
76 |
77 | //selecting display
78 | const display = document.querySelector('.display')
79 | //selecting all numbers
80 | const numbers = document.querySelectorAll('.number')
81 | //adding event listener for each number in "numbers"
82 | numbers.forEach( (button) => {
83 | button.addEventListener('click', calculate)
84 | })
85 | //selecting all operators
86 | const operators = document.querySelectorAll('.operator')
87 | //adding event listener for each operator in "operators"
88 | operators.forEach( (button) => {
89 | button.addEventListener('click', calculate)
90 | })
91 | // adding event listener to the keyboard
92 | window.addEventListener('keypress', check)
93 | function check(key) {
94 | let keyValue = key.key
95 | if (key.keyCode) {
96 | if(!isNaN(keyValue)) {
97 | insert(keyValue)
98 | } else {
99 | if(display.value.length == 1 && display.value[0] == 0) {
100 | return
101 | } else {
102 | for(i = 0; i < operators.length; i++) {
103 | if(keyValue == operators[i].value) {
104 | if (keyValue == "c") {
105 | clean()
106 | } else if (keyValue == "<") {
107 | back()
108 | } else if (keyValue == "=") {
109 | equal()
110 | } else {
111 | display.value += keyValue
112 | }
113 | }
114 | }
115 | }
116 | }
117 | }
118 | }
119 |
120 | //boolean variable to check if there is syntax error
121 | var SyntaxError = false
122 |
123 | function calculate(event) {
124 | var buttonValue = event.target.value
125 |
126 |
127 | if (!isNaN(buttonValue) || (isNaN(buttonValue) && buttonValue != "=" && buttonValue != "<" && buttonValue != "c")) {
128 | if(buttonValue == "x") {
129 | buttonValue = "*" //changing the "x" into "*" to calculate normally
130 | }
131 |
132 | //insert the buttonValue
133 | insert(buttonValue)
134 |
135 | }
136 | else if (buttonValue == '=') {
137 | equal() //calling the equal() function
138 | }
139 | else if (buttonValue == "<") {
140 | back() //calling the back() function
141 | }
142 | else if (buttonValue == "c") {
143 | clean() //calling the clean() function
144 | }
145 |
146 | }
147 |
148 |
149 |
--------------------------------------------------------------------------------