JSFiddle - React, Tailwind, and code Playground

by hslincoln

HTML

<div id="jgbutton" class="demo">
    <button>Push me, Steph</button>
    <p>(and keeping pushing to UNDERSTAND MAAAAN</p>
</div>
<div class="datecontentwrapper">
    <iframe src="" id="iframeFILL"></iframe>
</div>

CSS

iframe {
    width:100%;
    height:100%;
}
p {
    display:none;
}
#jgbutton {
    text-align:center;
}
#jgbutton button {
    border:0;
    border-radius:60px;
    background:#F00;
    box-shadow:0 5px 0 #000;
    color:#FFF;
    cursor:pointer;
    font-variant:small-caps;
    font-weight:bold;
    height:60px;
    padding:0;
    text-shadow:0 1px 0 #EEE;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
    transition:all .1s linear;
    width:60px;
}
#jgbutton button:active {
    box-shadow:0 2px 0 #666;
    -webkit-transform:translateY(3px);
    -moz-transform:translateY(3px);
    -o-transform:translateY(3px);
    transform:translateY(3px);
}
.credits {
    font-size:18px;
    position:absolute;
    bottom:15px;
    text-align:center;
    width:99%;
}
.credits a {
    color:#D1001C;
}
.datecontentwrapper {
    display:none;
    width:500px;
    height:500px;
    float:none;
    clear:both;
    position:relative;
    border:1px solid #858585;
    margin:0 auto;
}

JavaScript

var i = -1;

jQuery("#jgbutton").click(function () {
    var acceptabledate = "12/9/2014";
    var myDate = new Date();
    var displayDate = (myDate.getMonth() + 1) + '/' + (myDate.getDate()) + '/' + myDate.getFullYear();
    if (acceptabledate == displayDate) {
        var dateplaces = ["http://www.harrylincoln.com/steph/4.html","http://www.harrylincoln.com/steph/2.html","http://www.harrylincoln.com/steph/3.html","http://www.harrylincoln.com/steph/1.html"];
        var arrayLength = dateplaces.length;
        var genrandomdate = dateplaces[Math.floor(Math.random() * dateplaces.length)];
        if (++i < dateplaces.length) {
            $("#iframeFILL").attr("src", dateplaces[i]);
            $(".datecontentwrapper").show('slow');
            $("p").show();
        }
        
        if ( i >= dateplaces.length ) {
            alert('That just about does it. Welcome, and well done!');
        }
        
    } else {
        alert('OH DEAR, CRAB HANDS! My "random" location generator for Friday only works from Tuesday onwards!');
    }


});