JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<!doctype html lang="en" dir="ltr">

<head>
	<meta charset="UTF-8" />
	<title>TSO-Pumpkin-Refill-Calculator</title>

	<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" selected>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 value="25">25h</option>
	<option value="26">26h</option>
	<option...

CSS

* {
			font-size: 20px;
			font-family: sans-serif;
		}

		h1 {
			font-size: 1.5em;
		}

		body {
			padding: 50px;
			width: 80%;
		}

		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;
  var totalkurbisse = 0;
  var pff = ( document.getElementById("pff").checked ? 2 : 1 );
  var buff = parseInt(document.getElementById("buff").value) * pff;
  var buffname = 100*(document.getElementById("buff").value - 1);
  console.log( pff + " - " + buff);
	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 =...