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>

</div>
<div class="col-xs-6">
<h2 id="subs">
Subscribers
</h2>
<h3>
Views
</h3>
<h3>
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;
}

JavaScript

var views = 0;
var subs = 0;
var moneyz = 50;
var videos = 0;
//var food = 0;
$("#vlog").hide();
$("#game").hide();

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

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

});

$("#game").click(function(){
$("#vlog").hide();
subs +=  9999999;
$("subs").text("Subscribers: "+ subs)
//make five games buttons!
});