JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div class="info">
  <p>Hinweis: Silos müssen zwar ans Stromnetz angeschlossen werden, verbrauchen allerdings keinen Strom. Inbegriffen ist immer ein Basiscomputer mit 40 chrom. Metall.</p>
</div>

<div class="section">
  <form class="gms-mining-form">
    <div class="gms-form-group">
      <label for="lvl">Vorkommenstufe:</label>
      <select name="lvl">
        <option value="250">C</option>
        <option value="500">B</option>
        <option value="750">A</option>
        <option value="1000">S</option>
      </select>
    </div>
    <div class="gms-form-group">
      <label for="af">Förderer:</label>
      <input type="number" name="af" min="0" placeholder="Anzahl Förderer" value="0" />
    </div>
    <div class="gms-form-group">
      <label for="af">Silos:</label>
      <input type="number" name="as" min="0" placeholder="Anzahl Silos" value="0" />
    </div>
    <div class="gms-form-group">
      <label for="af">Teleporter:</label>
      <input type="number" name="at" min="0" placeholder="Anzahl Teleporter" value="0" />
    </div>
    <div class="gms-form-group">
      <label for="af">Zyl. Räume:</label>
      <input type="number" name="azr" min="0" placeholder="Anzahl zyl. Räume" value="0" />
    </div>
    <div class="gms-form-group">
      <label for="af">Holotüren:</label>
      <input type="number" name="azr" min="0" placeholder="Anzahl Holotüren" value="0" />
    </div>
  </form>
  <div class="section-copyright">
    <p>by Svensson#2506 (Discord)</p>
  </div>
</div><!-- .section -->

<div class="gms-mining-results"></div>

<div class="gms-mining-ressources"></div>

CSS

.section-copyright {
	  opacity: 0.5;
	  font-size: 0.75em;
	}

	.section {
	  margin-top: 30px;
	}

	.gms-form-group {
	  margin-bottom: 0.5em;
	  display: block;
	}

	.gms-form-group select {
	  min-width: 161px;
	}

	.gms-form-group>label {
	  min-width: 140px;
	  display: inline-block;
	  font-weight: bold;
	}

	.info {
	  margin-top: 30px;
	}

	.section h4 {
	  font-size: 1.25em;
	  font-weight: bold;
	  text-transform: uppercase;
	  margin-bottom: 0.5em;
	}

	@media all and (max-width: 990px) {
	  .gms-form-group>label {
	    width: 100%;
	    display: block;
	  }

	  .gms-form-group {
	    display: block;
	    width: 100%;
	  }

	  .gms-form-group input,
	  .gms-form-group select {
	    width: 100% !important;
	    display: block !important;
	    margin: 0.5em 0 0;
	  }
	}

JavaScript

const PageClass = {
  formClass: ".gms-mining-form",
  resultsClass: ".gms-mining-results",
  ressourcesClass: ".gms-mining-ressources",
  initClass: function() {
    this.initForm();
  },
  initForm: function() {
    var self = this;
    var timeout = null;

    clearTimeout(timeout);

    $(self.formClass).on('input change', function(e) {
      e.preventDefault();
      timeout = setTimeout(function() {
        self.submitForm();
      }, 500);
    });
  },
  submitForm: function() {
    var self = this;
    var currentForm = $(this);

    var formData = $(self.formClass).serializeArray();
    var consumData = self.getItems();

    var level = 250;

    if (formData[0].value) {
      level = formData[0].value;
    }

    var items = self.getFormValues(formData);
    var emptyValues = 0;

    $.each(formData, function(i, item) {
      if (0 !== i && $.isNumeric(item.value)) {
        emptyValues += parseInt(item.value);
      }
    });

    if (parseInt(emptyValues) < 1) {
      $(self.resultsClass).html("").removeClass("section");
      $(self.ressourcesClass).html("").removeClass("section");
      return false;
    }

    var pph = (items.promoter * level);
    var storage = (consumData.promoter.capacity * items.promoter + consumData.silo.capacity * items.silo);
    var storageFilled = 0;

    if (($.isNumeric(storage) && 0 !== storage) && ($.isNumeric(pph) && 0 !== pph)) {
      storageFilled = (storage / pph) * 60;
    }

    // Power

    var promoterPower = (items.promoter * consumData.promoter.power);
    var siloPower = (items.silo * consumData.silo.power);
    var teleportPower = (items.teleport * consumData.teleport.power);
    var roomPower = (items.room * consumData.room.power);
    var doorPower = (items.door * consumData.door.power);
    var powerTotal = (promoterPower + siloPower + teleportPower + roomPower + doorPower);
    var powerByNight = (powerTotal * 900);

    // Power needed by buildings

    var solarPowerTotal = (powerTotal /...