├── index.html
├── css
└── main.css
└── js
└── main.js
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Calculator
9 |
10 |
11 |
12 | Calculator
13 |
17 |
23 | Result here
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
1 | * {
2 | -moz-box-sizing: border-box; /* Firexfox */
3 |
4 | -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
5 |
6 | box-sizing: border-box; /* IE */
7 |
8 | font-family: 'Baloo Tammudu', cursive;
9 |
10 | color: #581845;
11 |
12 | }
13 |
14 | h1{
15 | font-size: 3em;
16 | }
17 |
18 | html{
19 | background-color: #85144b;
20 | }
21 |
22 | #mainWrapper{
23 | border: 10px solid #c2b180;
24 | border-radius: 50% 20% / 10% 40%;
25 | margin-left: 13%;
26 | margin-top: 50px;
27 | width: 75%;
28 | text-align: center;
29 | height: 525px;
30 | background-color: #C70039;
31 | }
32 |
33 | #result{
34 | font-size: 3em;
35 | }
36 |
37 | input{
38 | background-color: #660066;
39 | color: #c2b180;
40 | border: 1px solid #c2b180;
41 | }
42 |
43 | button {
44 | background: #c2b180;
45 | background-image: -webkit-linear-gradient(top, #c2b180, #581845);
46 | background-image: -moz-linear-gradient(top, #c2b180, #581845);
47 | background-image: -ms-linear-gradient(top, #c2b180, #581845);
48 | background-image: -o-linear-gradient(top, #c2b180, #581845);
49 | background-image: linear-gradient(to bottom, #c2b180, #581845);
50 | -webkit-border-radius: 19;
51 | -moz-border-radius: 19;
52 | border-radius: 19px;
53 | font-family: Arial;
54 | color: #581845;
55 | font-size: 20px;
56 | padding: 10px 20px 10px 20px;
57 | border: solid #c2b180 2px;
58 | text-decoration: none;
59 | outline: 0;
60 | margin-top: 10px;
61 | }
62 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | /* you want to start by creating letiables for your elements that are in the DOM
2 | this is smart practice because its going to save you time from continuing to write
3 | "document.getElementById" etc. (remember give clear naming conventions) */
4 |
5 | //inputs
6 | let leftInput = document.getElementById("first-Value");
7 | let rightInput = document.getElementById("second-Value");
8 | let result = document.getElementById("result");
9 |
10 | //buttons
11 | let add;
12 | let subtract;
13 | let multiply;
14 | let divide;
15 | let sum;
16 | let difference;
17 | let product;
18 | let quotient;
19 | let addition = document.getElementById("addition").onclick;
20 |
21 |
22 | const inputs = {
23 | firstVal: function () {
24 | return parseFloat(leftInput.value);
25 | },
26 | secondVal: function () {
27 | return parseFloat(rightInput.value)
28 | }
29 | }
30 |
31 | const calulator = {
32 | add: function () {
33 | addition = inputs.firstVal() + inputs.secondVal();
34 | console.log(addition);
35 | result.innerHTML = addition;
36 | },
37 | subtract: document.getElementById("subtraction").onclick = function () {
38 | difference = inputs.firstVal() - inputs.secondVal();
39 | console.log(difference);
40 | result.innerHTML = difference;
41 | },
42 | multiply: document.getElementById("multiplication").onclick = function () {
43 | product = inputs.firstVal() * inputs.secondVal();
44 | console.log(product);
45 | result.innerHTML = product;
46 | },
47 | divide: document.getElementById("division").onclick = function () {
48 | quotient = inputs.firstVal() / inputs.secondVal();
49 | console.log(quotient);
50 | result.innerHTML = quotient;
51 | },
52 | }
53 |
--------------------------------------------------------------------------------