JSFiddle - React, Tailwind, and code Playground

Bored? vatoSupport

by Jennifer Perrin

HTML

<link rel="stylesheet" href="https://jennperrin.com/support/css/bootstrap.css">
<link rel="stylesheet" href="https://jennperrin.com/support/css/custom.css">
<link rel="stylesheet" href="https://jennperrin.com/support/css/styles.css">
<script src="https://jennperrin.com/support/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="container no-padding">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    
                </ul>
            </div>
        </div>
    </div>
</nav>

<div class="container-fluid headerBar">
    <div class="container no-padding">
        <p class="site-title"><a href="https://jennperrin.com/support" rel="home"><img src="https://jennperrin.com/support/images/logo-header.png" alt="authosSupport" /></a></p>
        <p class="site-description">Rock, Paper, Scissors</p>
        <p class="newSupportBtn">
            <a data-toggle="modal" href="#bored" class="btn btn-info btn-lg btnIcon"><i class="fa fa-gamepad"></i> Bored?</a>
        </p>
    </div>
</div>

<div class="container">
    
</div>

<div class="modal fade" id="bored" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button...

CSS

@import url(http://fonts.googleapis.com/css?family=Muli:200,300,400,700);

.scoreboard {
    width: 70%;
    margin: auto;
    border: 3px solid #dcdcdc;
}
.scoreboard h2 {
    border-bottom: 1px solid #dddddd;
    margin: 0;
    padding: 10px;
    text-align: center;
}
.scoreboard table {
    margin: 10px auto;
    width: 100%;
    border-collapse: collapse;
}
.scoreboard th, .scoreboard td {
    text-align: center;
    font-weight: 300;
}
.scoreboard td {
    font-size: 3em;
    padding: 0 20px;
}

#status { text-align: center; font-size: 14px; }

JavaScript

var humanScore = 0;
var computerScore = 0;
var choose = document.getElementById('choose');
var status = document.getElementById('status');

document.getElementById('rock').onclick = playRock;
document.getElementById('paper').onclick = playPaper;
document.getElementById('scissors').onclick = playScissors;
document.getElementById('reset').onclick = resetScores;

function playRock() {
    play("rock");
    choose.style.display = 'none';
    status.style.display = 'block';
}
function playPaper() {
    play("paper");
    choose.style.display = 'none';
    status.style.display = 'block';
}
function playScissors() {
    play("scissors");
    choose.style.display = 'none';
    status.style.display = 'block';
}
function resetScores() {
    play("reset");
    status.style.display = 'none';
    choose.style.display = 'block';
}

function play(humanPlay) {
    
    computerPlay = getComputerPlay();
    
    document.getElementById('status').innerHTML = "<p class='no-margin mt-10'>You played <strong>" + humanPlay + "</strong>. The vatoBot played <strong>" + computerPlay + "</strong>.</p>";
    
    if(humanPlay == 'rock') {
        if(computerPlay == 'rock') {
            document.getElementById('status').innerHTML += "<p class='mt-0 text-warning'><strong>You tied</strong>. <i class='fa fa-meh-o'></i></p>";
        } else if (computerPlay == 'paper') {
            document.getElementById('status').innerHTML += "<p class='mt-0 text-danger'><strong>You lose</strong>. <i class='fa fa-frown-o'></i></p>";
            computerScore++;
        } else if (computerPlay == 'scissors') {
            document.getElementById('status').innerHTML += "<p class='mt-0 text-success'><strong>You win!</strong> <i class='fa fa-smile-o'></i></p>";
            humanScore++;
        }
    } else if (humanPlay == 'paper') {
        if(computerPlay == 'rock') {
            document.getElementById('status').innerHTML += "<p class='mt-0 text-success'><strong>You win!</strong> <i class='fa...