JSFiddle - React, Tailwind, and code Playground

by Debashish Kumar

HTML

<div data-role="page" id="start">

  <div class="header">
    <h1>Farming Game</h1>
  </div>
  <div data-role="main" class="ui-content">
    <button id="wheatButton" onclick="addWheatFarm(12)">
                  Add a wheat farm.
              </button>
    <br>
    <div id="fieldContainer" class="containers">
      <ul data-role="listview" id="farms" data-count-theme="b" data-insert="true">
        <br>
        <li id="fieldCounter">
          <p>Wheat Fields
            <var id="wheatFarms"></var>
          </p>
        </li>
      </ul>

    <div id="inventoryContainer" class="containers">
      <ul data-role="listview" id="inventory" data-count-theme="b" data-insert="true">
        <li id="wheatCounter">
          <p>Wheat <span id="wheatNum"></span>
            <p id = "wheatNum"></p>
          </p>
        </li>
      </ul>
    </div>
  </div>
</div>
<script>
var wheatFields = 0;
var numWheat = 0;
var wheat = 0;
window.onload = function() {
  document.getElementById("wheatFarms").innerHTML = wheatFields;
  document.getElementById("numWheat").innerHTML = numWheat;
  document.getElementById("wheatNum").innerHTML = wheat;
};

function addWheatFarm() {
  wheatFields++;
  document.getElementById("wheatFarms").innerHTML = wheatFields;
  wheatHandler();
}

function wheatHandler() {
  var lifespan = Math.floor(Math.random() * 50) + 10;
  for (var i = 0; i <= lifespan; i++) {
    wheat++;
    document.getElementById("wheatNum").innerHTML = wheat;
  }
}
</script>