JSFiddle - React, Tailwind, and code Playground

by chridam

CSS

.select {
    border-top: 1px solid #1b569e;
    background: #184b85;
    background: -webkit-gradient(linear, left top, left bottom, from(#1b569e), to(#184b85));
    background: -webkit-linear-gradient(top, #1b569e, #184b85);
    background: -moz-linear-gradient(top, #1b569e, #184b85);
    background: -ms-linear-gradient(top, #1b569e, #184b85);
    background: -o-linear-gradient(top, #1b569e, #184b85);
    padding: 8px 16px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: white;
    font-size: 14px;
    font-family: Helvetica, Arial, Sans-Serif;
    text-decoration: none;
    vertical-align: middle;
    width:25%;
}
.select:hover {
    border-top-color: #28597a;
    background: #28597a;
    color: #ccc;
}
.select:active {
    border-top-color: #1b435e;
    background: #1b435e;
}

JavaScript

var hash = window.location.hash;
alert(hash);

function tryToMakeLink() {
    //get all selected radios
    var q1 = document.querySelector('input[name="q1"]:checked');

    //make sure the user has selected all 3
    if (q1 == null) {
        document.getElementById("linkDiv").innerHTML = "<input type=button disabled=disabled value=Next>";
    } else {
        //now we know we have 3 radios, so get their values
        q1 = q1.value;

        //now check the values to display a different link for the desired configuration
        var url = window.location.hash; // retrieve current hash value (fragment identifier)
        if (url.indexOf('iPhone') != -1) { // do the following if URL's hash contains "iPhone"
            document.getElementById("linkDiv").innerHTML = "<BR/><BR/>
       <a class='select' style=cursor:pointer; cursor:hand; 
       value=Next src='http://fairdash.com/Next-Button.png' 
       href='http://fairdash.com' 
       onclick=\"location.href = $(this).attr('href')+'?
       q1=Windowsphone&x=69&y=9';return false\"></a>";
        }
    }
}