JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="container">
    <div id="form">
        <form id="book_tickets">
            <fieldset>
                <legend>Booking Details</legend>
                
                <p>
                    <label for="movie_name">Movie</label>
                    <select id="movie_name" name="movie_name" required autofocus>
                        <option></option>
                        <option value="Movie 1">Movie 1</option>
                        <option value="Movie 2">Movie 2</option>
                        <option value="Movie 3">Movie 3</option>
                    </select>
                </p>
                
                <p>
                    <label for="theaters">Theaters</label>
                    <select id="theaters" required>
                        <option></option>
                        <option value="Theater 1">Theater 1</option>
                        <option value="Theater 2">Theater 2</option>
                        <option value="Theater 3">Theater 3</option>
                    </select>
                </p>
                
                <p>
                    <label for="date">Date&dagger;</label>
                    <input type="date" name="date" id="date" min="today" required />
                </p>
                
                <p>
                    <label for="email">Email</label>
                    <input type="email" name="email" id="email" required />
                </p>
                
                <p>
                    <label for="tickets_quantity"># Tickets</label>
                    <input type="number" min="1" max="10" name="tickets_quantity" id="tickets_quantity" required />
                </p>
                
                <p>
                    <label>Total Price</label>
                    <span id="total_price"></span>
         ...

CSS

body{
    font-family: "Arial", Helvetica, sans-serif;
    position: relative;
    height: 100%;
    width: 100%;
}

#container{
    text-align: center;
    position: relative;
    height: 100%;
    width: 100%;
}

#movies_booked, #form{
    display: inline-block;
    width: 40%;
    height: 100%;
    margin: 0 auto;
    vertical-align:text-top;
}

fieldset, #movies_booked{
    border:1px solid #AED0EA;
    border-radius:8px;
    box-shadow:0 0 10px #D7EBF9;
}

legend, #disount_title{
    color: #2779AA;
    font-size: 120%;
    text-align: center;
    background-color: white;
}

p{
    overflow: hidden;
}

label{
    width: 50%;
    text-align: right;
    float: left;
    clear: both;
    color: #2779AA;
}

p input, p select{
    width: 40%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    margin-left: 5%;
    margin-right: 5%;
    color: #2779AA;
}

#theaters, #total_price, #movies_list, li, #perTicketPrice, #note{
    color: #2779AA;
}

p span, li{
    text-align: left;
}

#submit_wrapper{
    text-align: center;
}

#submit{
    font-size: 13px;
}

#discount, #perTicketPrice{
    text-align: left;
}

#note{
    position: absolute;
    bottom: 0px;
    text-align: center;
}

JavaScript

$(document).ready(function(){
    
    // first check the movies already booked
    checkMoviesBooked();
    
    // apply jQuery UI Redmond theme to 'Book Tickets' button
    $("#submit").button();
    
    // on change of movie/date/tickets
    $("#movie_name, #date, #tickets_quantity").on("change", calculateTotalPrice)
    
    // on form submit
    $("#book_tickets").submit(function(event){
        
        // prevent on submit page refresh
        event.preventDefault();
        
        // check locally stored data
        if(window.localStorage){
            var moviesListJson = localStorage.getItem('movies_list');
            var movies_list = moviesListJson ? JSON.parse(moviesListJson) : [];
            var movie = $("#movie_name").val();
            movies_list.push(movie);
            localStorage.setItem('movies_list', JSON.stringify(movies_list));
        }
        
        // clear the form					
        $( '#book_tickets' ).each(function(){
            this.reset();
        });
        $("#total_price").html("");
        
        // update movies booked list
        checkMoviesBooked();
    });
    
    // set minimum date in datepicker as today
    var today = new Date().toISOString().split('T')[0];
    document.getElementsByName("date")[0].setAttribute('min', today);
    
});

function calculateTotalPrice(){
    if($("#tickets_quantity").val() != "" && $("#movie_name").val() != "" && $("#date").val() != ""){
        if(window.Worker){
            // create web worker
            var blob = new Blob(
                [document.querySelector("#worker").textContent],
                {type: 'text/javascript'});
            var worker = new Worker(window.URL.createObjectURL(blob));
            
            worker.onmessage = function(event){
                $("#total_price").html(event.data);
            }
            worker.onerror = function(errorObject){
                $("#total_price").html("Error: " + errorObject.message);
            }
          ...