-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (113 loc) · 3.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<body>
<br>
<h1>AWS Connect Calculator</h1>
<p>Made my Michael K.</p>
<br>
<form>
<h2>General</h2>
<label for="countAgents">Anzahl der Agents</label><br>
<input type="text" id="countAgents""><br><br>
<h2>Eingehende Anrufe</h2>
<label for="countInCalls">Anzahl täglicher Anrufe pro Agent</label><br>
<input type="text" id="countInCalls""><br><br>
<label for="countInDuration">Dauer pro Anruf</label><br>
<input type="text" id="countInDuration""><br><br>
<h2>Ausgehende Anrufe</h2>
<label for="countOutCalls">Anzahl täglicher Anrufe pro Agent</label><br>
<input type="text" id="countOutCalls""><br><br>
<label for="countOutDuration">Dauer pro Anruf</label><br>
<input type="text" id="countOutDuration""><br><br>
<br>
<input type="button" class="btn" onclick="onCLickButton()" value=" Berechnen " style="color: white;font-size: 18px;">
</form>
<br>
<br>
<label for="dailyCost" id="dailyCost"></label><br>
<label for="monthlyCost" id="monthlyCost"></label>
</body>
</html>
<!-- styling -->
<style>
* {
color: black;
}
h1,h2,label,p, .btn, input {
margin-left: 50px;
}
h1 {
margin-bottom: 0px;
}
label {
font-size: 18px;
}
input {
margin-top: 10px;
color: black;
}
body {
background-color: white;
}
.btn {
width: 180px;
height: 60px;
cursor: pointer;
background: #4F95DA;
border: 1px solid #91C9FF;
outline: none;
transition: 0.4s ease-in-out;
}
.btn:hover {
transition: 0.4s ease-in-out;
background: #03b1fc;
}
.btn:hover svg {
stroke-dashoffset: -480;
}
.btn span {
color: white;
font-size: 18px;
font-weight: 100;
}
</style>
<!-- scripting -->
<script>
// get final output labels
var labelDaily = document.querySelector('label[for="dailyCost"]')
var labelMonthly = document.querySelector('label[for="monthlyCost"]')
function onCLickButton(){
//get values of textfields
anzAgents = document.getElementById("countAgents").value;
inCalls = document.getElementById("countInCalls").value;
inDur = document.getElementById("countInDuration").value;
outCalls = document.getElementById("countOutCalls").value;
outDur = document.getElementById("countOutDuration").value;
//calculate values of textfields and multiply them by the aws connect pricing rates
var all = anzAgents * inCalls * inDur * outCalls * outDur
var basicCostPM = 0.018
var inCallsPM = 0.0040
var outCallsPM = 0.012
var agentTotal = anzAgents * 0.1
var dailyInTotal = anzAgents * inCalls * inDur * inCallsPM
var dailyOutTotal = anzAgents * outCalls * outDur * outCallsPM
var basicTotal = (anzAgents * inCalls * inDur * basicCostPM) + (anzAgents * outCalls * outDur * basicCostPM)
var dailyTotal = agentTotal + dailyInTotal + dailyOutTotal + basicTotal
var monthlyTotal = dailyTotal * 20
var dailyTotalLabel = "Gesamtkosten pro Tag: " + dailyTotal.toFixed(2) + "€"
var monthlyTotalLabel = "Gesamtkosten pro Monat (20 Werktage): " + monthlyTotal.toFixed(2) + "€"
var allValues = [anzAgents,inCalls,inDur,outCalls,outDur]
var allValuesLength = allValues.length;
//check if textfield values are numbers or empty
for (var i = 0; i < allValuesLength; i++) {
if (isNaN(allValues[i]) || allValues[i] == "") {
labelDaily.textContent = "Oops. Something went wrong."
labelMonthly.textContent = "Maybe you missed a field or you entered something that isn't a number."
break
} else {
labelDaily.textContent = dailyTotalLabel
labelMonthly.textContent = monthlyTotalLabel
}
}
}
</script>