JSFiddle - React, Tailwind, and code Playground

AINWAC

by trentHarlem

HTML

<button id='work'>Do Work</button>
<div id='display'>`myBasket = ${myBasket}, myInventory = ${myInventory}`
</div>
<button id='bank'>Make Deposit</button>
<button id='buildFactory'>Build Factory</button>

CSS

* {
  font: 1rem system-ui;
}

#display {
  position: absolute;
  top: 70px;
}

#work {
  position: fixed;
  margin: 1rem;
  padding: 0.5rem;
}

#bank {
  display: none;
  position: fixed;
  right: 10px;
}

#buildFactory {
  display: none;
  position: fixed;
  top: 50px;
  right: 10px;
}

.hide {
  display: none;
}

.reveal {
  display: block;
}

JavaScript

let myBasket = 0;
let myInventory = []
const workButton = document.querySelector('#work')
const bank = document.querySelector('#bank')
const buildFactory = document.querySelector('#buildFactory')

const display = document.querySelector('#display');
display.innerHTML = `myBasket = ${myBasket}, myInventory = ${myInventory}`;

function doWork() {
  workButton.addEventListener('click', () => {
    myBasket++;
    display.innerHTML = `<br> myBasket = ${myBasket}, myInventory = ${myInventory}`;
  })
  setInterval(() => workButton.classList.toggle('hide'), 5000)
  
  console.log(myBasket)
 
}
(function() {
  if (myBasket <= 0) {
    myBasket++
    console.log(myBasket)
    //update screen display
    /*     display.innerHTML = `<br>myBasket = ${myBasket}, myInventory = ${myInventory}`;
     */
  }
  if (myBasket > 0) {
    doWork()
    console.log(myBasket)
 if (myBasket >= 50) {
    console.log('bank', myBasket)
    bank.classList.add('reveal')
    bank.style.display='block'
  }

    /*   const bank = (myBasket) => {
        console.log('bank', myBasket)
      }; */
  }


  console.log('')




})()