JSFiddle - React, Tailwind, and code Playground

by elneco

HTML

<div id="HomeCalendarWidget">
   
   
   
   <ul class="selectors">
    <li class="selectField" OnClick="$('.selectList').slideToggle('slow');">
            
            <div class="selectList">
        
            <p onClick="$('.pss').html(this.innerHTML);$('#selection').val(1);"> Aloft BWI</p>
            <p onClick="$('.pss').html(this.innerHTML);$('#selection').val(2);">Hilton BWI  </p>
            <p onClick="$('.pss').html(this.innerHTML);$('#selection').val(3);">Homewood Suites</p>
            <p onClick="$('.pss').html(this.innerHTML);$('#selection').val(4);">Garden Inn</p>
    <input type="hidden" id="selection" name="selection" value="0"/>
            </div>
<p class="pss" style=" text-align:center;">-select a property-</p>    
</li>    
    
        
<li class="Field">

<span>Check-In:</span> <input type="text" id="checkIn" name="checkIn" style="height:12px;width:85px;margin-top:1px;" >
    </li>

<li class="Field">

<span>Check-Out:</span> <input type="text" id="checkOut" name="checkOut" style="height:12px;width:85px;margin-top:1px;"/>
    </li>
    <li class="Field">
<button onClick="continueBtn();recordOutboundLink(this, 'Outbound Links', 'HomeWidget');return false;" class="buttonForm">Book Now</button>
</li>
    </ul>
   
   
   
   </div><!-- end home calendar widget -->

CSS

.selectors
{
list-style:none;
width:100%;
margin:0px; padding:5px 0px 0px 10px;
}
.selectList
{
min-width:90px;
max-width:150px;
margin-left:-1px;
border-left:1px solid black;
border-right:1px solid black;
background-color:white;
top:10px;
position:absolute;
z-index:13000;
display:none;
width:200px;
top:18px;
}
.container
{
height:30px;
padding:0px;
position:relative;
width:600px;
border:1px solid black; background-color:#000; color:#fff;
}
.selectList p
{
text-align:center;
color:#000;
font-size:12px;
padding:5px 3px;
font-family:Times New Roman;
margin:0px;
border-bottom:1px solid black;
background: #eee;
        /* Mozilla: */
        background: -moz-linear-gradient(top, #eee, #ccc);
        /* Chrome, Safari:*/
        background: -webkit-gradient(linear,
                    left top, left bottom, from(#eee), to(#ccc));
        
        -webkit-transition:all 0.2s ease-in-out;
        -moz-transition:all 0.2s ease-in-out;
        -o-transition:all 0.2s ease-in-out;
        transition:all 0.2s ease-in-out;

}


.selectList p:hover {
    cursor:pointer;
    background: #030;
        /* Mozilla: */
        background: -moz-linear-gradient(top, #060, #030);
        /* Chrome, Safari:*/
        background: -webkit-gradient(linear,
                    left top, left bottom, from(#060), to(#030));
        color:#DDD; text-shadow: 0px 0px 5px rgba(255,255,255,0.5);
    }

.pss
{
color:#555;
font-size:12px;
margin-top:1px;
font-family:"Times New Roman", Times, serif; font-style:italic; letter-spacing:1px;

}
.selectField
{
/*
background-image:url(icon.jpg);
background-position:right;
background-repeat:no-repeat;
*/
border:1px solid #000;
background-color:#fff;
height:17px;
position:relative;
min-width:90px;
max-width:150px;
width:200px;
margin-top:0px;
float:left;
margin-right:0px;
}

.Field {
width:auto; font-size:12px;
padding-left:18px;
position:relative;
float:left;
}

.buttonForm { 
        -moz-border-radius: 5px;
        border-radius: 5px;
       ...

JavaScript

$(document).ready(
        function ()
        {

            
            $('#checkIn').datepicker({autoSize:true});
            $('#checkOut').datepicker({autoSize:true});
            

        }
    );
    function continueBtn()
    {
        var checkIn=$('#checkIn').val();
        var temp=new Array();
        temp=checkIn.split('/');
        var checkOut=$('#checkOut').val();
        temp2=new Array();
        temp2=checkOut.split('/');
        

        var hotel=$('#selection').val();
        if(hotel==0)
        alert("You must make a selection");
        else if(hotel==1)
        {
            window.open('http://www.starwoodhotels.com/alofthotels/search/ratelist.html?propertyID=3047&language=en_US&brand=AL&requestedChainCode=AL&requestedAffiliationCode=AL&lengthOfStay=&arrivalDate='+checkIn+'&departureDate='+checkOut);
        }
        else if(hotel==2)
        {


window.open('https://secure.hilton.com/en/hi/res/choose_dates.jhtml;jsessionid=GXXDEUPZDNPYWCSGBIXM22Q&_requestid=98100?ctyhocn=BWIAPHF&hotel=BWIAPHF&arrivalDay='+temp[1]+'&arrivalMonth='+temp[0]+'&arrivalYear='+temp[2]+'&departureDay='+temp2[1]+'&departureMonth='+temp2[0]+'&departureYear='+temp2[2]);

        }
        else if(hotel==3)
        {
window.open('https://secure.hilton.com/en/hw/res/choose_dates.jhtml;jsessionid=GXXDEUPZDNPYWCSGBIXM22Q&_requestid=98100?ctyhocn=WASLDHW&hotel=WASLDHW&arrivalDay='+temp[1]+'&arrivalMonth='+temp[0]+'&arrivalYear='+temp[2]+'&departureDay='+temp2[1]+'&departureMonth='+temp2[0]+'&departureYear='+temp2[2]);
        }
        else if(hotel==4)
        {

window.open('https://secure.hilton.com/en/gi/res/choose_dates.jhtml;jsessionid=GXXDEUPZDNPYWCSGBIXM22Q?ctyhocn=BWIARGI&hotel=BWIARGI&_requestid=99766&arrivalDay='+temp[1]+'&arrivalMonth='+temp[0]+'&arrivalYear='+temp[2]+'&departureDay='+temp2[1]+'&departureMonth='+temp2[0]+'&departureYear='+temp2[2]);
        }
    }