JSFiddle - React, Tailwind, and code Playground

by Colin

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<div id='demo'>
		<p>
			This demo sets a user-specified keyword using localStorage.
		</p>
		<button id='opener'>Register Keyword</button>
	</div> <!-- demo -->
	
		
	<div id='note'>
		
	</div> <!-- note -->
	
	
	<div id='dialog'>
		<p>
			You may enter your updated keyword below:
		</p>
		
		<input type='text' id='new_keyword' value='' maxlength='32' placeholder='Enter your keyword' />
	</div> <!-- dialog -->

CSS

html, body{
			font-family: Arial, sans-serif;
			font-size: 16px;
    	}
    	
        #note {
        	width: 100%;
        	height: 40px;
            overflow: hidden;
            position: fixed;
            z-index: 101;
            top: 0;
            right: 0;
            background: rgba(4, 115, 184, 0.9);
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            line-height: 2.5;
        }
        
        #note.show();
        
		.myTitleClass .ui-dialog-title {
			white-space: normal;
		}

		.myTitleClass .ui-dialog-titlebar {
			background: rgba(4, 115, 184, 0.9);
			color: #fff;
			font-size: 16px;
			height: 40px;
		}
        
        #demo{
        	width: 400px;
        	padding: 30px;
        	margin: 200px auto 0 auto;
        	border: 1px solid rgba(4, 115, 184, 0.9);
        	border-radius: 4px;
        }
        
        #demo button{
        	padding: 8px 20px 8px 20px;
	        border: none;
	        border-radius: 4px;
	        font-size: 18px;
        	background: rgba(4, 115, 184, 0.9);
        	color: white;
        }

JavaScript

jQuery( function ()
{
	setup();
} );


// ---------------------------------------------------------------------------------------------- //
/*	setup
*/
// ---------------------------------------------------------------------------------------------- //

function setup()
{
	$('#dialog').dialog({
		autoOpen: false,
		　　height: 300,
		width: 500,
		dialogClass: 'myTitleClass',
		modal: true,
		closeOnEscape: false,
		open: function (event, ui) {
			$('.ui-dialog-titlebar-close', ui.dialog | ui).hide();
			
			var keyword = localStorage.getItem('keyword');
			$('#new_keyword').val( keyword ).focus();
		},
		buttons: {
			'Save': function () {
				$(this).dialog('close');
				
				var new_keyword = $('#new_keyword').val();
				// Input validation goes here!
				localStorage.setItem('keyword', new_keyword );
				show_note( "Your keyword has been updated to '" + new_keyword + "'" );
			}
			, 'Cancel': function () {
				$(this).dialog('close');
			}
		}
	});
	
	$('#opener').click(function () {
		$('#dialog').dialog('open');
	});
	
	var note = "No keyword is currently set."
	var current_keyword = localStorage.getItem('keyword');
	
	if( current_keyword )
		note = "The last keyword you set was: '" + current_keyword + "'";
	
	show_note( note );
}


// ---------------------------------------------------------------------------------------------- //
/*	show_note
*/
// ---------------------------------------------------------------------------------------------- //

function show_note( note )
{
	$('#note').text( note );
}