JSFiddle - React, Tailwind, and code Playground

by nukeboy212

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-xs-6">
  <h1>
YouTuber
</h1>
  <button id="RV">
    Record Video
  </button>
  <button id="vlog">
    Vlog
  </button>
  <button id="game">
    Game
  </button>
  <button id="gtp">
    GTP V
  </button>
  <button id="deepio">
    Deep.io
  </button>
  <button id="digcraft">
    Digcraft
  </button>
  <button id="cimCity">
    Cim City
  </button>
  <button id="rublox">
    Rublox
  </button>
</div>
<div class="col-xs-6">
  <h2 id="subs">
Subscribers
</h2>
  <h3 id="views">
Views
</h3>
  <h3 id="videos">
Videos
</h3>

</div>

CSS

body {
  background-color: Red;
}

h1 {
  color: white;
  font-family: arial, sans-serif;
}

h2 {
  float: right;
}

h3 {
  float: right;
  clear: right;
  color: white;
}

button {
  display: block;
}

JavaScript

var views = 0;
var subs = 0;
var moneyz = 50;
var videos = 0;
var gtpsubs = 0;
var gtpviews = Math.floor(Math.random() * 3);
var deepsubs = 0;
var deepviews = Math.floor(Math.random() + 0.5);
$("#views").text("Views: " + views)
$("#subs").text("Subscribers: " + subs)
$("#videos").text("Videos: " + videos)
  //var food = 0;
$("#vlog").hide();
$("#game").hide();
$("#digcraft").hide();
$("#gtp").hide();
$("#deepio").hide();
$("#rublox").hide();
$("#cimCity").hide();

setInterval(function() {
  randomgtpthings();
}, 500)

function randomgtpthings() {
  gtpviews = Math.floor(Math.random() * 3);
  if (views > 100 || views == 100) {
    gtpsubs = Math.floor(Math.random() + 0.5);
  }

}
var answer = prompt("Who are you going to call yourself in this magical adventure?");
$("h1").text("YouTuber: " + answer)

function show() {
  $("#RV").show();
  $("#digcraft").hide();
  $("#gtp").hide();
  $("#deepio").hide();
  $("#rublox").hide();
  $("#cimCity").hide();
}

$("#RV").click(function() {
  $("#RV").hide();
  $("#vlog").show();
  $("#game").show();

});

$("#game").click(function() {
  $("#vlog").hide();
  $("#game").hide();
  $("#digcraft").show();
  $("#gtp").show();
  $("#deepio").show();
  $("#rublox").show();
  $("#cimCity").show();
  $("#subs").text("Subscribers: " + subs)

});

$("#gtp").click(function() {
  subs += gtpsubs;
  views += gtpviews;
  videos++;
  show();
  $("#views").text("Views: " + views)
  $("#videos").text("Videos: " + videos)


});

$("#deepio").click(function() {
  subs += deepsubs;
  views += deepviews;
  videos++;
  show();
  $("#videos").text("Videos: " + videos)
  $("#views").text("Views: " + views)

});

if (views => 100) {
  gtpsubs = Math.floor(Math.random() + 0.5);
}

/*if (views => 5) {
  gtpviews = Math.floor(Math.random() * 4);
}

if (views => 15) {
  gtpviews = Math.floor(Math.random() * 5);
} 
*/