JSFiddle - React, Tailwind, and code Playground

by veix

HTML

<div class="container">
	<h1>Road to Bel-Air <small>or is it?</small></h1>
	<br>
	<button id="kaching" type="button" class="mainclick">KA-CHING!</button>
	<br><hr><br>
	
	<p>
		Dollors: <span id="money">0</span><br>
		Dollors per <small id="secondRate">1.00</small> second(s): <span id="moneyps">0</span>
	<p>
	
	<br>
	<h3>Buy</h3>
	<table class="table">
		<tr>
			<td>
				Bottle-collector <small id="bottlecollector-level">lvl 0</small>
			</td>
			<td>
				<button id="buybottlecollector" type="button" class="btn btn-primary">Buy for 10.00 dollors</button>
			</td>
		</tr>
		
		<tr>
			<td>
				Craftseller <small id="craftseller-level">lvl 0</small>
			</td>
			<td>
				<button id="buycraftseller" type="button" class="jotainmuuta">Buy for 100.00 dollors</button>
			
		</tr>
		
		<tr>
			<td>
				Best Hot Doges <small id="hotdog-level">lvl 0</small>
			</td>
			<td>
				<button id="buyhotdog" type="button" class="jotainmuuta">Buy for 1500.00 dollors</button>
			</td>
		</tr>
		
		
		<!--<tr>
			<td>Nopeuta aikaa 10% <small id="speed_level">lvl 0</small></td>
			<td><button id="nopeutus" type="button" class="btn btn-success">Osta 100 eurolla</button></td>
		</tr> -->
	
	</table>
</div>

CSS

// Clickers: 
// - Bottle-collector: 1 dollor per sec
// - Crafts-seller: 5 dollors per sec
// - 
// 
// Upgrades: 
// 
// Other: 
// 
//

JavaScript

var money = 0; // Money.
var updateRate = 1000; // Updaterate for actions happening every x milliseconds.
var moneyps = 0;



// Clicking for Money
function kaching () {
	money++;
  updateMoney();
};

// Event Listener for Clicking Money

var elcm = document.getElementById("kaching");
elcm.addEventListener("click", kaching, false);

// Object Constructor for autoclickers. Also guideline for creating new autoClicker objects.
// var nimi = new autoClicker(clicks, multiplier, cost, costIncrease)
function autoClicker(clicks, cost, costIncrease, level) {
  this.clicks = clicks;
  this.cost = cost;
  this.costIncrease = costIncrease;
  this.level = level;
};

// Autoclickers
var bottlecollector = new autoClicker(0, 10, 1.2, 0);
var craftseller = new autoClicker(0, 100, 1.7, 0);
var hotdog = new autoClicker(0, 1000, 1.9, 0);

// Function for buying clickers for Money.
function buyClicker (c, button) {
	if (money < c) {
  	return false;
  };
  money -= c;
  return true;
};

// Function for buying Bottle-Collector
function buyBC() {
  if (buyClicker(bottlecollector.cost, this)) {
  	bottlecollector.clicks += 0.01;
  	bottlecollector.cost *= bottlecollector.costIncrease;
  	bottlecollector.level++;
		
    var e = document.getElementById("bottlecollector-level");
    e.innerHTML = "lvl " + bottlecollector.level;
    
    var e2 = document.getElementById("buybottlecollector");
    e2.innerHTML = "Buy for " + bottlecollector.cost.toFixed(2) + " dollors";
  };
};

//Function for buying Craftseller
function buyCS() {
	if (buyClicker(craftseller.cost, this)) {
		craftseller.clicks += 0.05;
		craftseller.cost *=craftseller.costIncrease;
		craftseller.level++;
		
		var e = document.getElementById("craftseller-level");
		e.innerHTML = "lvl " + craftseller.level;
		
		var e2 = document.getElementById("buycraftseller");
		e2.innerHTML = "Buy for " + craftseller.cost.toFixed(2) + " dollors";
	};
};

//Function for buying Hotdog
function buyHD() {
	if (buyClicker(hotdog.cost, this))...