JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<p><i>Diese Webseite setzt keine Cookies und sammelt keinerlei Daten. Serverseitige Logs werden automatisch nach einigen Tagen gelöscht. Eine Auswertung der Logs findet außer zur Fehlersuche nicht statt.</i></p>

<h1>Halloween 2020</h1>
<p style="color:AA0000">Ich verstehe das Entwicklertagebuch so, dass wie letztes Jahr die Friedhöfe auch in der Abschaltphase noch abgeerntet werden. Deswegen rechnet dieser Auffüllrechner bis zum 16.11.2020.</p>
<p>Dieses Script berechnet, wieviele Auffüller Du in Deinen Friedhöfen haben musst, um das Maximum rauszuholen. Es berücksichtigt die Sommerzeitumschaltung. Die Erstbestückung der Kürbisfelder ist in der errechneten Anzahl eingeschlossen.<br>
Es kann um einen Auffüller abweichen, je nachdem wie weit die Friedhöfe gerade beim Abernten sind.</p>
<p><span class="first">Das Event startet: </span><span id="startdate"></span></p>
<p><span class="first">Das Event endet: </span><span id="enddate"></span></p>
<p><span class="first">Verbleibende Restzeit:</span><span id="rest" class="countdown"></span></p>
<p><span class="first">Du willst früher Schluss machen: </span><span id="rest" class="time"></span>
<select id="he">
	<option value="0">0h</option>
	<option value="1">1h</option>
	<option value="2">2h</option>
	<option value="3">3h</option>
	<option value="4">4h</option>
	<option value="5">5h</option>
	<option value="6">6h</option>
	<option value="7">7h</option>
	<option value="8">8h</option>
	<option value="9">9h</option>
	<option value="10">10h</option>
	<option value="11">11h</option>
	<option value="12">12h</option>
	<option value="13">13h</option>
	<option value="14">14h</option>
	<option value="15">15h</option>
	<option value="16">16h</option>
	<option value="17">17h</option>
	<option value="18">18h</option>
	<option value="19">19h</option>
	<option value="20">20h</option>
	<option value="21">21h</option>
	<option value="22">22h</option>
	<option value="23">23h</option>
	<option value="24">24h</option>
	<option...

CSS

* {
	font-size:20px;
	font-family:sans-serif;
	}
	
h1 {	
	font-size: 1.5em;
	}
body {
	padding:50px;
	width:900px;
	}
p	{
	margin:0 0 15 0;
	}
.first {
	display:inline-block;
	width:450px;
	}
.second {
	display:inline-block;
	margin-left:15px;
	font-weight:bold;
	}
.countdown {
	font-weight:bold;
	}

JavaScript

var startDate = Date.UTC(2020,09,19,8,0,0,0);
var endDate = Date.UTC(2020,10,16,8,59,59,0);
var duration = [2400,2400,2400,9600,9600,9600,19200,19200,19200];
var deposit = [100,100,100,80,80,80,45,45,45]
function update() {
	// now
	var nt = new Date();
	if (nt.getTime() < startDate) {
		nt.setTime(startDate);
		}
	// how many seconds till end 
	var diff = parseInt((endDate - Date.UTC(nt.getUTCFullYear(),nt.getUTCMonth(),nt.getUTCDate(),nt.getUTCHours(),nt.getUTCMinutes(),nt.getUTCSeconds())) / 1000);
	// countdown total
	var d = parseInt(diff / 86400);
	diff = (diff % 86400);
	var h = parseInt(diff / 3600);
	diff = (diff % 3600);
	var m = parseInt(diff / 60);
	var s = (diff % 60);
	document.getElementById('rest').innerHTML = ("0" + d).slice(-2) + 'd ' + ("0" + h).slice(-2) + 'h ' + ("0" + m).slice(-2) + 'm ' + ("0" + s).slice(-2) + 's';

	
	
	// show the last earning
	var earnDate = endDate - parseInt(document.getElementById("he").value) * 3600000 - parseInt(document.getElementById("hm").value) * 60000;
	ht = new Date(earnDate);
	document.getElementById('maxpump').innerHTML = ht.toLocaleDateString() + ' ' + ht.toLocaleTimeString();
	// show the end datetime
	ht = new Date(endDate);
	st = new Date(startDate);
	document.getElementById('startdate').innerHTML = st.toLocaleDateString() + ' ' + st.toLocaleTimeString();
	document.getElementById('enddate').innerHTML = ht.toLocaleDateString() + ' ' + ht.toLocaleTimeString();
	var summe = 0;
	
	var total = 0;
	diff = parseInt((earnDate - Date.UTC(nt.getUTCFullYear(),nt.getUTCMonth(),nt.getUTCDate(),nt.getUTCHours(),nt.getUTCMinutes(),nt.getUTCSeconds())) / 1000);
	duration.forEach(function(item,index) {
		var drift = parseInt(document.getElementById("wt"+index).value);
		var pumpkins = parseInt(diff / (item + drift));
		document.getElementById("rp"+index).innerHTML = 'Auffüller: ' + pumpkins;
		total += pumpkins;
		});
	document.getElementById('total').innerHTML = total;
	//document.getElementById('prefill').innerHTML =...