JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<script src="https://rawgit.com/davatron5000/FitText.js/master/jquery.fittext.js"></script>
<script src="https://rawgit.com/vxsx/jquery.inputfit.js/master/jquery.inputfit.js"></script>
<div id="gradeSelect">
    <h1>Select your grade level:</h1>
    <div class="roundButton red">1st</div>
    <div class="roundButton orange">2nd</div>
    <div class="roundButton green">3rd</div>
    <div class="roundButton blue">4th</div>
    <div class="roundButton purple">5th</div>
</div>
<input type="text" id="wordInput" />

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

* {
    font-family:'Open Sans', sans-serif;
}
body {
    text-align:center;
}
.roundButton {
    width:75px;
    height:55px;
    border-radius:999px;
    text-align:center;
    color:white;
    font-size:24px;
    padding-top:20px;
    display:inline-block;
    margin-left:10px;
    margin-right:10px;
    cursor:pointer;
}
.red {
    background:#E81026;
    text-shadow:1px 1px 4px #701217;
}
.orange {
    background:#E88B20;
    text-shadow:1px 1px 4px #A86416;
}
.green {
    background:#3ED636;
    text-shadow:1px 1px 4px #157524;
}
.blue {
    background:#2C39F2;
    text-shadow:1px 1px 4px #122175;
}
.purple {
    background:#8826F0;
    text-shadow:1px 1px 4px #541275;
}

#wordInput {
    display:none;
    
    border:1px solid #ddd;
    outline:none !important;
    width:calc(100% - 100px);
    max-width:900px;
    margin:0 auto;
    font-size:175px;
}
#wordInput:focus {
    border:none;
}

JavaScript

$('#wordInput').keyup(
    function(){
        var size = $(this).val().length;
        size = $(this).width() / size * 2.2;
        if(size > 175) size = 175;
        $('#wordInput').css('font-size', size + 'px');
    }
);

$(function(){
    var gradeLevel;
    var words = [
        ["test1", "words4grade1"],
        ["test2", "words4grade2"],
        ["test3", "words4grade3"],
        ["test4", "words4grade4"],
        ["test5", "words4grade5"]
    ];
    $(".roundButton").click(function() {
        gradeLevel = $(".roundButton").index(this);
        $(".roundButton:nth-of-type(1)").animate({opacity:0},300);
        $(".roundButton:nth-of-type(2)").delay(100).animate({opacity:0},300);
        $(".roundButton:nth-of-type(3)").delay(200).animate({opacity:0},300);
        $(".roundButton:nth-of-type(4)").delay(300).animate({opacity:0},300);
        $(".roundButton:nth-of-type(5)").delay(400).animate({opacity:0},300);
        $("#gradeSelect h1").delay(500).animate({opacity:0},300);
        window.setTimeout(function(){
            $("#gradeSelect").hide();
            $("#wordInput").fadeIn(300);
        }, 800);
    });
})