JSFiddle - React, Tailwind, and code Playground

vatoSupport Hangman Game

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">Forkable Fiddle</p>
        <p class="newSupportBtn">
            <a data-toggle="modal" href="#hangman" class="btn btn-info btn-lg btnIcon"><i class="fa fa-header"></i> Hangman</a>
        </p>
    </div>
</div>

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

<div class="modal fade" id="hangman" 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);

.hangman {
    margin: 0 auto;
    text-align: center;
    padding: 10px;
}

@keyframes letteranim {
    50% {
        transform: translateY(-5px) scale(1.05);
    }
}

.letter {
    display: inline-block;
    color: transparent;
    border-bottom: 5px solid #3b8dbd;
    margin: 0 5px;
    font-size: 30px;
    padding: 10px;
    transition: .5s;
    text-transform: uppercase;
}

.word {
    display: block;
    white-space: nowrap;
    padding: 0;
}

.correct {
    color: #25753d;
    text-shadow: 1px 2px 0 #f0f0f0;
    animation: letteranim .3s ease;
}

.guessForm { margin: 20px auto 0; }
    .guessForm input[type="text"] {
        outline: none;
        padding: 10px;
        font-size: 20px;
        margin-bottom: 20px;
        margin-right: 5px;
        border: 1px solid #aaa;
        color: gray;
    }
    .guessForm .guessButton {
        border: none;
        font-size: 20px;
        padding: 10px 20px;
        cursor: pointer;
        background-image: linear-gradient(#3b8dbd, #357faa);
        color: white;
        transition: .3s;
        margin: 10px 0;
    }
        .guessForm .guessButton:hover { background: linear-gradient(#357faa, #2f7096); }

.wrongLetters { font-size: 18px; }
    .wrongLetters p { margin-bottom: 10px; }
    .wrongLetters li {
        display: inline-block;
        font-size: 20px;
        background: #ff4d4d;
        text-shadow: 1px 2px 0 red;
        padding: 5px;
        color: white;
        text-transform: uppercase;
        margin-right: 10px;
        animation: letteranim .3s ease;
    }

.message {
    display: none;
    padding: 20px;
    position: absolute;
    top: 110px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    z-index: 12402402;
}
    .message h1 {
        display: none;
        color: 444444;
        font-size: 24px;
    }
    .message .highlight {
        color: #3b8dbd;
        text-transform:...

JavaScript

(function($, window, undefined){
    
    Hangman = {
        init: function(words){
            this.words = words,
                this.hm = $(".hangman"),
                    this.msg = $(".message"),
                        this.msgTitle = $(".title"),
                            this.msgText = $(".text"),
                                this.restart = $(".restart"),
                                    this.wrd = this.randomWord(),
                                        this.correct = 0,
                                            this.guess = $(".guess"),
                                                this.wrong = $(".wrong"),
                                                    this.wrongGuesses = [],
                                                        this.rightGuesses = [],
                                                            this.guessForm = $(".guessForm"),
                                                                this.guessLetterInput = $(".guessLetter"),
                                                                    this.goodSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/goodbell.mp3"),
                                                                        this.badSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/bad.mp3"),
                                                                            this.winSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/win.mp3"),
                                                                                this.loseSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/lose.mp3"),
                                                                                    this.setup();
        },
        
        setup: function(){
            this.binding();
            this.sounds();
            this.showGuess(this.wrongGuesses);
            this.showWrong();
            
        },
        sounds: function(){  
       ...