JSFiddle - React, Tailwind, and code Playground

by wizviper

HTML

<h1>
Idle Empire
</h1>

<button id="getwood" style="visibility:hidden">
  Chop Wood
</button>


<div id="fooddata">
  <p id="showfood">Food:0</p>
  <button id="getfood">
    Gather Food
  </button>
</div>

CSS

* {
  text-align: center;
  background-color: white;
}

h1 {
  font-size: 36;
  color: #00f00f
}

#getwood {
  float: right;
}

JavaScript

var food = 0;
var i = 0


function updateResources() {
  var e = document.getElementById("showfood");
  e.innerHTML = 'Food: ' + food;
}

document.getElementById("getfood").onclick = function() {
  food = food + 1;
  updateResources(); //updates the text
};