JSFiddle - React, Tailwind, and code Playground

by jcutrell

HTML

<h1>Taylor,</h1>

<p>Will you be a part of the Cutrell-Ritchie Wedding as a groomsman?</p>
<form>
    <input type="button" value="yes" name="yes">
</form>

CSS

body {
    font-family: Merriweather;
}

h1 {
    font-size: 3em;
}
input[type=button] {
    font-family: monospace;
    width: 76px;
    margin: 0 auto;
    position: relative;
    height: 30px;
    line-height: 30px;
    font-size: 1.3em;
    display: block;
    background: #00A389;
    color: #fff;
    outline: none;
    border: none;
    border-radius: 10px;
    -webkit-transition: all 0.1s;
}
input[type=button]:active {
    background: #0D7561;
    top: 3px;
    left:3px;
}
.confetti {
    top: 0px;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    position: absolute;
    -webkit-animation-name: confetti;
    -webkit-animation-iteration-count: 10;
}
@-webkit-keyframes confetti {
 from {
   top: 0px;
 }
 to {
   top: 100%;
 }
}

JavaScript

(function(){
    
    $("input[name=yes]").on("click", function(){
        var btn = $(this);
        btn.val("Party Time!!!").width("40%");
        setInterval(function(){
            btn[0].style['background-color'] = '#'+('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6);
        },200);
        for (var i = 500; i > 0; i--){
            $("<div class='confetti'>").css({
                backgroundColor : '#'+('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6),
                left: Math.random() * 100 + "%"
            }).appendTo("body");
        }
        $(".confetti").each(function(i,el){
            el.style['-webkit-animation-duration'] = Math.random() * 10 + "s";
        });
    });
    
})();