14 lines
4.1 KiB
HTML
14 lines
4.1 KiB
HTML
<html class=theme-light><meta charset=UTF-8><title>3D-Druck Kostenrechner</title>
|
|
<script>const pricePerPrintingHourInEuro=.3,pricePerMaterialGrammInEuro=.025,roundUpStep=.5,identifierAddition=.03</script><link rel=stylesheet href=./bulma.min.css><meta name=viewport content="width=device-width,initial-scale=1"><div class=block id=filamentcalc><style>body{padding:2em;background-color:#f5f5f5}.box{border:.125em solid #dbdbdb}#logo{float:right;position:absolute;top:0;right:0}.selected{filter:brightness(90%);text-decoration:underline}.box{margin:2em auto 0;max-width:50em}.b button{float:right;margin-right:1em}input{margin-left:1em;width:5em}h2{margin-bottom:.5em;font-weight:700}li{list-style:none}</style><section class=hero><div class=hero-body><h1 class=title>3D-Druck Filamentkostenrechner</h1><p id=logo class="image is-128x128"><img src=logo.png></div></section><div class="columns box"><div class="column is-full b">Wo kommt dein Filament her?
|
|
<button class=button id=pool_filament>Pool Filament</button>
|
|
<button class=button id=own_filament>
|
|
Eigenes/Spenden- Filament</button></div></div><div class="columns box step2"><div class=column><label for=printtime_h>Druckzeit</label></div><div class=column><input id=printtime_h class=half type=number min=0 max=1000 step=1 placeholder=0>
|
|
<label for=printtime_h>h</label>
|
|
<input id=printtime_m class=half type=number min=0 max=5000 step=1 placeholder=0>
|
|
<label for=printtime_m>m</label></div></div><div class="columns box step2 material"><div class=column><label for=material>Materialmenge</label></div><div class=column><input id=material type=number min=0 max=1000 step=1 placeholder=0>
|
|
<label for=material>g</label></div></div><div class="columns box step2"><div class=column><label for=cost_euro>Kosten in €</label></div><div class=column><input id=cost_euro aria-disabled=true disabled></div></div><div class="columns box step2"><div class="column is-two"><h2>Wie entsteht der Preis?</h2><ul><li>Pro Druckstunde fallen <span id=pricePerHour>...</span> € Kosten
|
|
für Strom und Verschleiß an.<li>Pool-Filament wird mit <span id=pricePerMaterial>...</span> €
|
|
pro kg berechnet.<li>Beide Kosten werden addiert und auf die nächsten
|
|
<span id=roundUpLimit>...</span> € aufgerundet.<span id=idtext>
|
|
(Zusätzlich wird <span id=idval></span> € addiert damit wir
|
|
auf der Abrechnung den Verwendungszweck erkennen können.)</span></ul></div></div></div><script>const pool_filament=document.getElementById("pool_filament"),own_filament=document.getElementById("own_filament"),step1=document.getElementsByClassName("step1"),step2=document.getElementsByClassName("step2"),printtime_h=document.getElementById("printtime_h"),printtime_m=document.getElementById("printtime_m"),material=document.getElementById("material"),cost_euro=document.getElementById("cost_euro");let ownFilament;pool_filament.addEventListener("click",function(){for(let e=0;e<step2.length;e++)step2[e].style.display="flex";ownFilament=!1,updateCost()}),own_filament.addEventListener("click",function(){for(let e=0;e<step2.length;e++){const t=step2[e];t.classList.contains("material")?t.style.display="none":t.style.display="flex"}ownFilament=!0,updateCost()}),printtime_h.addEventListener("input",updateCost),printtime_m.addEventListener("input",updateCost),material.addEventListener("input",updateCost);function updateCost(){pricePerHour.innerHTML=pricePerPrintingHourInEuro.toFixed(2),pricePerMaterial.innerHTML=(pricePerMaterialGrammInEuro*1e3).toFixed(2),roundUpLimit.innerHTML=roundUpStep.toFixed(2),idval.innerHTML=identifierAddition.toFixed(2),identifierAddition===0?idtext.style.display="none":idtext.style.display="inherit";const t=parseInt("0"+printtime_h.value)*60+parseInt("0"+printtime_m.value),n=parseInt("0"+material.value)*pricePerMaterialGrammInEuro;let e=t*pricePerPrintingHourInEuro/60;ownFilament||(e+=n),e=Math.ceil(e/roundUpStep)*roundUpStep,e>0&&(e+=identifierAddition),console.log(e),cost_euro.value=e.toFixed(2)+" €",ownFilament?(own_filament.classList.add("selected"),pool_filament.classList.remove("selected")):(pool_filament.classList.add("selected"),own_filament.classList.remove("selected"))}updateCost()</script> |