JSFiddle - React, Tailwind, and code Playground

by hslincoln

HTML

<div id="jgbutton" class="demo">
    <button>Push me, Lara</button>
    <p>(and again, till you like what you see)</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

jQuery("#jgbutton").click(function () {
    var acceptabledate = "5/27/2014";
    var myDate = new Date();
    var displayDate = (myDate.getMonth() + 1) + '/' + (myDate.getDate()) + '/' + myDate.getFullYear();
    if (acceptabledate == displayDate) {
        var dateplaces = ["http://www.tate.org.uk/whats-on/tate-modern/exhibition/henri-matisse-cut-outs", "http://www.timeout.com/london/outdoor/dalston-roof-park", "http://commons.wikimedia.org/wiki/File:Light_Painting_1_-_Booyeembara_Park.jpg", "http://www.happinessforgets.com/", "http://www.gordonswinebar.com/defaultm.php"];
        var genrandomdate = dateplaces[Math.floor(Math.random() * dateplaces.length)];
        $(".datecontentwrapper").show('slow');
        $("#iframeFILL").attr("src", genrandomdate);
        $("p").show();

    } else {
        alert('OH DEAR, CRAB HANDS! My "random" location generator for Friday only works from Tuesday onwards!');
    }


});