This commit is contained in:
2026-08-11 21:25:07 +02:00
parent cfd1ffdb29
commit 055e81b8e7
2 changed files with 10 additions and 7 deletions
+8 -5
View File
@@ -210,7 +210,7 @@ function getParams(){
var annualWithEmployer=annualSalary*1.2; var annualWithEmployer=annualSalary*1.2;
var totalCost=annualWithEmployer*devCount; var totalCost=annualWithEmployer*devCount;
var costPerSecond=totalCost/220/8/60/60; var costPerSecond=totalCost/220/8/60/60;
return{devCount:devCount,avgSalary:avgSalary,totalCost:totalCost,costPerSecond:costPerSecond}; return{devCount:devCount,avgSalary:avgSalary,annualSalary:annualSalary,annualWithEmployer:annualWithEmployer,totalCost:totalCost,costPerSecond:costPerSecond};
} }
function tick(){ function tick(){
var elapsed=pausedElapsed+(Date.now()-startTime)/1000; var elapsed=pausedElapsed+(Date.now()-startTime)/1000;
@@ -222,10 +222,9 @@ function tick(){
document.getElementById('tilePerMin').textContent='EUR '+fmt(p.costPerSecond*60); document.getElementById('tilePerMin').textContent='EUR '+fmt(p.costPerSecond*60);
document.getElementById('tilePerHour').textContent='EUR '+fmt(p.costPerSecond*3600); document.getElementById('tilePerHour').textContent='EUR '+fmt(p.costPerSecond*3600);
document.getElementById('tileTotal').textContent=p.devCount+' x EUR '+fmt(p.avgSalary); document.getElementById('tileTotal').textContent=p.devCount+' x EUR '+fmt(p.avgSalary);
// show annual / employer / total year values (as integers) var annual = p.annualSalary;
var annual = p.annualSalary || p.avgSalary*12; var employer = p.annualWithEmployer;
var employer = p.annualWithEmployer || annual*1.2; var annualTotal = p.totalCost;
var annualTotal = p.totalCost || employer * p.devCount;
document.getElementById('tileAnnual').textContent = annual.toLocaleString('de-DE',{minimumFractionDigits:0,maximumFractionDigits:0}) + ' €'; document.getElementById('tileAnnual').textContent = annual.toLocaleString('de-DE',{minimumFractionDigits:0,maximumFractionDigits:0}) + ' €';
document.getElementById('tileEmployer').textContent = employer.toLocaleString('de-DE',{minimumFractionDigits:0,maximumFractionDigits:0}) + ' €'; document.getElementById('tileEmployer').textContent = employer.toLocaleString('de-DE',{minimumFractionDigits:0,maximumFractionDigits:0}) + ' €';
document.getElementById('tileAnnualTotal').textContent = annualTotal.toLocaleString('de-DE',{minimumFractionDigits:0,maximumFractionDigits:0}) + ' €'; document.getElementById('tileAnnualTotal').textContent = annualTotal.toLocaleString('de-DE',{minimumFractionDigits:0,maximumFractionDigits:0}) + ' €';
@@ -270,6 +269,10 @@ function resetTimer(){
document.getElementById('avgSalary').disabled=false; document.getElementById('avgSalary').disabled=false;
} }
// input listeners: update per-second display when editing
document.getElementById('devCount').addEventListener('input', function(){ if(!isRunning){ var p=getParams(); if(p.costPerSecond>0) document.getElementById('tilePerSec').textContent='EUR '+p.costPerSecond.toLocaleString('de-DE',{minimumFractionDigits:4,maximumFractionDigits:4}); }});
document.getElementById('avgSalary').addEventListener('input', function(){ if(!isRunning){ var p=getParams(); if(p.costPerSecond>0) document.getElementById('tilePerSec').textContent='EUR '+p.costPerSecond.toLocaleString('de-DE',{minimumFractionDigits:4,maximumFractionDigits:4}); }});
// No auto-start: user must press Start. (Previously auto-started here.) // No auto-start: user must press Start. (Previously auto-started here.)
</script> </script>
</body> </body>
+2 -2
View File
@@ -65,7 +65,7 @@
<span class="input-prefix">EUR</span> <span class="input-prefix">EUR</span>
<input class="form-input" type="number" id="avgSalary" min="1000" max="50000" value="5000" style="padding-left:3.5rem" aria-label="Average monthly salary"> <input class="form-input" type="number" id="avgSalary" min="1000" max="50000" value="5000" style="padding-left:3.5rem" aria-label="Average monthly salary">
</div> </div>
<div style="font-size:.85rem;color:var(--color-text-muted)">brutto, avarage salary</div> <div style="font-size:.85rem;color:var(--color-text-muted)">brutto, average salary</div>
</div> </div>
<button class="btn-start" id="mainBtn" onclick="handleBtn()"> <button class="btn-start" id="mainBtn" onclick="handleBtn()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" id="btnIcon"><polygon points="5,3 19,12 5,21"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" id="btnIcon"><polygon points="5,3 19,12 5,21"/></svg>
@@ -99,7 +99,7 @@
<script> <script>
(function(){ (function(){
var root=document.documentElement; var dark=false; var btn=document.querySelector('[data-theme-toggle]'); var root=document.documentElement; var dark=false; var btn=document.querySelector('[data-theme-toggle]');
var sunSvg='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/></svg>'; var sunSvg='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>';
var moonSvg='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>'; var moonSvg='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
if(btn){ root.setAttribute('data-theme', dark ? 'dark' : 'light'); btn.innerHTML = dark ? sunSvg : moonSvg; btn.addEventListener('click', function(){ dark=!dark; root.setAttribute('data-theme', dark ? 'dark' : 'light'); btn.innerHTML = dark ? sunSvg : moonSvg; }); } if(btn){ root.setAttribute('data-theme', dark ? 'dark' : 'light'); btn.innerHTML = dark ? sunSvg : moonSvg; btn.addEventListener('click', function(){ dark=!dark; root.setAttribute('data-theme', dark ? 'dark' : 'light'); btn.innerHTML = dark ? sunSvg : moonSvg; }); }
})(); })();