Ajax Loader
HTML 
<div class="center">
1
<div class="center">
2
    <h1>Pure CSS, JS Calculator</h1>
3
    <a href="https://github.com/guuibayer/simple-calculator" target="_blank"><i class="fa fa-github"></i></a>
4
    <form name="calculator">
5
      <input type="button" id="clear" class="btn other" value="C">
6
      <input type="text" id="display">
7
        <br>
8
      <input type="button" class="btn number" value="7" onclick="get(this.value);">
9
      <input type="button" class="btn number" value="8" onclick="get(this.value);">
10
      <input type="button" class="btn number" value="9" onclick="get(this.value);">
11
      <input type="button" class="btn operator" value="+" onclick="get(this.value);">
12
        <br>
13
      <input type="button" class="btn number" value="4" onclick="get(this.value);">
14
      <input type="button" class="btn number" value="5" onclick="get(this.value);">
15
      <input type="button" class="btn number" value="6" onclick="get(this.value);">
16
      <input type="button" class="btn operator" value="*" onclick="get(this.value);">
17
        <br>
18
      <input type="button" class="btn number" value="1" onclick="get(this.value);">
19
      <input type="button" class="btn number" value="2" onclick="get(this.value);">
20
      <input type="button" class="btn number" value="3" onclick="get(this.value);">
21
      <input type="button" class="btn operator" value="-" onclick="get(this.value);">
22
        <br>
23
      <input type="button" class="btn number" value="0" onclick="get(this.value);">
24
      <input type="button" class="btn operator" value="." onclick="get(this.value);">
25
      <input type="button" class="btn operator" value="/" onclick="get(this.value);">
26
      <input type="button" class="btn other" value="=" onclick="calculates();">
27
    </form>
28
  </div>
29
 
 
CSS 
/* Basic Reset */
1
/* Basic Reset */
2
* {
3
  border: none;
4
  font-family: 'Open Sans', sans-serif;
5
  margin: 0;
6
  padding: 0;
7
}
8
body {
9
 
10
}
11
.center {
12
  background-color: #fff;
13
  border-radius: 50%;
14
  height: 600px;
15
  margin: auto;
16
  width: 600px;
17
}
18
h1 {
19
  color: #495678;
20
  font-size: 30px;
21
  margin-top: 20px;
22
  padding-top: 50px;
23
  display: block;
24
  text-align: center;
25
  text-decoration: none;
26
}
27
a {
28
  color: #495678;
29
  font-size: 30px;
30
  display: block;
31
  text-align: center;
32
  text-decoration: none;
33
  padding-top: 20px;
34
}
35
form {
36
  background-color: #495678;
37
  box-shadow: 4px 4px #3d4a65;
38
  margin: 40px auto;
39
  padding: 40px 0 30px 40px;
40
  width: 280px;
41
}
42
.btn {
43
  outline: none;
44
  cursor: pointer;
45
  font-size: 20px;
46
  height: 45px;
47
  margin: 5px 0 5px 10px;
48
  width: 45px;
49
}
50
.btn:first-child {
51
  margin: 5px 0 5px 10px;
52
}
53
.btn, #display, form {
54
  border-radius: 25px;
55
}
56
#display {
57
  outline: none;
58
  background-color: #98d1dc;
59
  box-shadow: inset 6px 6px 0px #3facc0;
60
  color: #dededc;
61
  font-size: 20px;
62
  height: 47px;
63
  text-align: right;
64
  width: 165px;
65
  padding-right: 10px;
66
  margin-left: 10px;
67
}
68
.number {
69
  background-color: #72778b;
70
  box-shadow: 0 5px #5f6680;
71
  color: #dededc;
72
}
73
.number:active {
74
  box-shadow: 0 2px #5f6680;
75
    -webkit-transform: translateY(2px);
76
    -ms-transform: translateY(2px);
77
    -moz-tranform: translateY(2px);
78
    transform: translateY(2px);
79
}
80
.operator {
81
  background-color: #dededc;
82
  box-shadow: 0 5px #bebebe;
83
  color: #72778b;
84
}
85
.operator:active {
86
  box-shadow: 0 2px #bebebe;
87
    -webkit-transform: translateY(2px);
88
    -ms-transform: translateY(2px);
89
    -moz-tranform: translateY(2px);
90
    transform: translateY(2px);
91
}
92
.other {
93
  background-color: #e3844c;
94
  box-shadow: 0 5px #e76a3d;
95
  color: #dededc;
96
}
97
.other:active {
98
  box-shadow: 0 2px #e76a3d;
99
    -webkit-transform: translateY(2px);
100
    -ms-transform: translateY(2px);
101
    -moz-tranform: translateY(2px);
102
    transform: translateY(2px);
103
}
104
 
 
JavaScript 
/* limpa o display */
1
/* limpa o display */
2
document.getElementById("clear").addEventListener("click", function() {
3
  document.getElementById("display").value = "";
4
});
5
/* recebe os valores */
6
function get(value) {
7
  document.getElementById("display").value += value;
8
}
9
 
10
/* calcula */
11
function calculates() {
12
  var result = 0;
13
  result = document.getElementById("display").value;
14
  document.getElementById("display").value = "";
15
  document.getElementById("display").value = eval(result);
16
};
17
 
 

Pure CSS, JS Calculator

CSSDeck G+