<form action="#" class="calc_form">
<div class="row calc_form__select_group">
<div class="calc_form__select">
<select name="industry" id="industry" required="required">
<option value="">---</option>
<option value="1">Anlagen / Maschinenbau</option>
<option value="2">Automotive</option>
<option value="3">Bau</option>
<option value="4">Beratung</option>
<option value="5">Chemie</option>
<option value="6">Consumer</option>
<option value="7">Dienstleistung</option>
<option value="8">Elektronik / Elektrotechnik</option>
<option value="9">Energie / Wasser / Umwelt</option>
<option value="10">Financial Services</option>
<option value="11">Handel</option>
<option value="12">Health Care</option>
<option value="13">IT / Telekommunikation</option>
<option value="14">Medien</option>
<option value="15">Sonstige Branchen</option>
<option value="16">Sonstige verarbeitende Industrie</option>
<option value="17">Transport / Logistik / Verkehr</option>
</select>
</div>
<div class="calc_form__select">
<select name="function" id="function" required="required">
<option value="">---</option>
<option value="1">C-Level</option>
<option value="2">Einkauf / Materialwirtschaft / Logistik / SCM</option>
<option value="3">Finanzen/Controlling</option>
<option value="4">IT</option>
<option value="5">Marketing / Vertrieb</option>
<option value="6">Personal</option>
<option value="7">Produktion / Technik/Operations</option>
<option value="8">Zentralfunktione</option>a
</select>
</div>
<div class="calc_form__select">
<select name="situation" id="situation">
<option value="">---</option>
<option value="2">Vakanzüberbrückung</option>
<option value="3">Wachstum</option>
</select>
</div>
<div class="calc_form__select">
<select name="type" id="type">
<option value="">---</option>
<option value="1">Freiberufler</option>
<option value="2">Mitarbeiterüberlassung</option>
<option value="3">Interim Organfunktion</option>
</select>
</div>
</div>
<div class="calc_form__result">
<div class="calc_result">
<h3>Honorar in EUR</h3>
<div class="calc_result__bar">
<div class="calc_result__bar--value">
</div>
</div>
<div class="calc_result__text">
<span>500,-</span>
<span>1500,-</span>
<span>3000,-</span>
</div>
</div>
<div class="val"></div>
</div>
<div class="calc_form__submit">
<button class="calc__button" type="reset">Reset</button>
</div>
</form> body {
width: 80%;
text-align: center;
margin: auto;
background: #0276B5;
margin-top: 5em;
font-family: sans-serif;
}
.calc_form {
margin: auto;
}
.calc_form__select_group {
display: flex;
justify-content: space-between;
margin-bottom: 1.5em;
}
.calc_form__select {
position: relative;
width: 24%;
}
select {
border: none;
&:after {
display: none;
}
}
.calc_form__select::before {
content: "";
background: #fff;
width: 30px;
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
pointer-events: none;
}
.calc_form__select::after {
content: "";
background: transparent;
width: 13px;
height: 13px;
position: absolute;
transform: rotate(45deg);
border: solid orange;
border-width: 0 2px 2px 0;
right: 15px;
top: 12px;
pointer-events: none;
}
.calc_form__select_group select {
padding: 14px 12px;
font-size: 14px;
width: 100%;
background: #fff;
font-weight: bold;
}
.calc_form__result {
margin-bottom: 1.5em;
}
.calc_result h3 {
text-align: left;
color: orange;
}
.calc_result {
display: block;
}
.calc_result__bar {
height: 3px;
width: 100%;
background: #fff;
position: relative;
}
.calc_result__bar--value {
transition: .5s;
background: orange;
height: 3px;
margin: auto;
position: absolute;
left: 1%;
}
.calc_result__bar--value::before {
content: "";
display: block;
width: 15px;
height: 15px;
border-radius: 100%;
background: orange;
position: absolute;
left: 0;
top: -5px;
}
.calc_result__bar--value::after {
content: "";
display: block;
width: 15px;
height: 15px;
border-radius: 100%;
background: orange;
position: absolute;
right: 0;
top: -5px;
}
.calc_result__text {
display: flex;
justify-content: space-between;
color: #eee;
margin-top: 1em;
margin-bottom: 2em;
}
.calc__button {
padding: 12px 50px;
background: orange;
color: #fff;
border: none;
} jQuery(document).ready(function(){
function calculate_minmax(old_result, new_result) {
if(typeof(new_result)==='undefined'){
console.log('undefined new result')
return { "min": old_result.min, "max": old_result.max}
}else{
if(new_result.min) {
min = old_result.min * new_result.min
max = old_result.max * new_result.max
return { "min": min, "max": max}
} else {
return { "min": old_result.min, "max": old_result.max}
}
}
}
function set_minmax(result) {
calc_bar = jQuery('.calc_result__bar--value');
if(typeof(result)==='undefined'){
console.log('undefined mang!!')
return false;
}else{
// 0 = 500
// 100 = 3000
// 3000-500 = 2500 = 100%
// hasil dikurangi 500, cari persennya
// misal 1700 -> 1700 - 500 = 1200 => 48%
// (n/2500)*100 => 48
min = 100-(((result.min-500)/2500)*100)
max = 100-(((result.max-500)/2500)*100)
calc_bar.css('right',max+"%")
calc_bar.css('left',min+"%")
console.log('min=>'+min)
console.log('max=>'+max)
}
}
console.log('readyyy')
calc = {
"calculations": {
"situation": {
"1": {
"min": 1.0,
"max": 1.2
},
"2": {
"min": 1.0,
"max": 1.2
},
"3": {
"min": 1.0,
"max": 1.2
}
},
"type": {
"1": {
"min": 1.0,
"max": 1.2
},
"2": {
"min": 1.0,
"max": 1.2
},
"3": {
"min": 1.0,
"max": 1.2
}
}
},
"results": {
"1": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"2": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"3": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"4": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"5": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"6": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"7": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"8": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"9": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"10": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"11": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"12": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"13": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"14": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"15": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"16": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"17": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
},
"18": {
"1": {
"min": 1700,
"max": 2500
},
"2": {
"min": 1700,
"max": 2500
},
"3": {
"min": 1700,
"max": 2500
},
"4": {
"min": 1700,
"max": 2500
},
"5": {
"min": 1700,
"max": 2500
},
"6": {
"min": 1700,
"max": 2500
},
"7": {
"min": 1700,
"max": 2500
},
"8": {
"min": 1700,
"max": 2500
}
}
}
}
old_result = { "min": 0, "max": 0}
function_result = {}
jQuery('.calc_form__select select').change(function(e){
console.log(jQuery(this).attr('name'))
attrName = jQuery(this).attr('name');
industry = jQuery('.calc_form__select #industry').val();
functions = jQuery('.calc_form__select #function').val();
situation = jQuery('.calc_form__select #situation').val();
type = jQuery('.calc_form__select #type').val();
switch(attrName){
case 'function':
old_result = calculate_minmax(calc.results[industry][functions])
function_result = old_result
set_minmax(old_result)
break;
case 'situation':
situation_data = calc.calculations.situation[situation]
situation_result = calculate_minmax(calc.results[industry][functions], situation_data)
old_result = situation_result
set_minmax(old_result)
break;
case 'type':
type_data = calc.calculations.type[type]
type_result = calculate_minmax(old_result, type_data)
old_result = type_result
pake_function = calculate_minmax(function_result, type_data)
old_result = pake_function
set_minmax(old_result)
break;
default:
return false;
}
})
})
External CSS
This Pen doesn't use any external CSS resources.