Groundwork for a Modern Web UI

DanNagle.com
@NagleCode

Source Code


GitHub:


						git clone https://github.com/dannagle/mortgagecalc.git
					

Net Magazine December 2014:

http://www.creativebloq.com/net-magazine

Mortgage Calculator

Live Demo

HTML5 Boilerplate



http://www.initializr.com/

jQuery UI

Google Public Hosting


	<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/humanity/jquery-ui.css" rel="stylesheet" />
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<style>
/* Custom Google font  */
body, .ui-widget {
    font-family: 'Open Sans', sans-serif;
}
</style>
	
  • All 24 standard jQuery UI themes available.
  • Many free fonts available (such as Open Sans and Play).

Other jQuery Plugins

  • jQuery Cookies
  • jQuery formatCurrency
  • Mustache.js
Override with app.css

	
body {
    background: #F3F0DA;
}
nav a {
    background: #E99F46;
}
.header-container {
    border-bottom: 5px solid #400202;
}

.footer-container,
.main aside {
    border-top: 5px solid #400202;
    border-bottom: 5px solid #400202;
}

.header-container,
.footer-container,
.main aside {
    background: #CB842E;
}

/* Custom Google font  */

body, .ui-widget {
	font-family: 'Open Sans', sans-serif;
}
	

Live Demo

Media Queries


	@media only screen and (min-width: 480px) {
    /* css active for display > 480 pixels width */
}
@media only screen and (min-width: 768px) {
    /* css active for display > 768 pixels  width */
}
	
Cannot override media queries.
Try SASS for better CSS development.

Versioning


	<link rel="stylesheet" href="css/app.css?v=<?php echo filemtime("css/app.css");?>">
	

<link rel="stylesheet" href="css/app.css?v=1407624474">
<script src="js/main.js?v=1408908312">

Live Demo

Year 2038 Problem

filemtime($file);
Credit: Wikipedia

UNIX timestamp → 32-bit signed integer

Mortgage Form


mtgCalc(amount, interest, years);

Live Demo

New HTML5 input types

Bind the Calculate


	// Handler for .ready()
$(function() {
    $("#CalculateButton").button().click(function() {
        $(this).html(Date.now());
    });
});
	

Live Demo

Gather/Validate the data


	$( "#CalculateButton" ).button().click(function(){

    var originalloanamount = $('#originalloanamount').asNumber();
    var interestrate = $('#interestrate').asNumber();
    var loanlength = $('#loanlength').asNumber();

    var mtgObj = mtgCalc(originalloanamount, interestrate, loanlength);
	

POW! Calculate the Mortgage


	//PHP version
function mtgCalc($originalloanamount, $interestrate, $loanlengthyears)
{
    $nummonths = $loanlengthyears*12;
    $monthlyinterest = floatval($interestrate / (12 * 100));
    $denominator = 1  - pow( 1 + $monthlyinterest, 0-$nummonths);
    $monthlypayment = floatval($originalloanamount) 
				* floatval($monthlyinterest / $denominator);
	


	//JavaScript version
function mtgCalc(originalloanamount, interestrate, loanlengthyears) {
        
    var nummonths = loanlengthyears*12;
    var monthlyinterest = (interestrate / (12 * 100));
    var denominator = 1  - Math.pow( 1 + monthlyinterest, 0-nummonths);
    var monthlypayment = (originalloanamount) * (monthlyinterest / denominator);
 
	

Dynamic Dialog

alert()

	$("#dialog").click(function() {
    console.log($("div").length); 
    $('<div/>', {
        text: 'Hello Dynamic Dialog.'
    }).dialog({
            title: 'Sample Dialog Title.',
            close: function(){
            $(this).remove(); //remove from DOM
        },
        buttons: {
        "OK": function() {
           $(this).dialog("close"); 
        }, 
        "Cancel": function() { 
           $(this).dialog("close"); 
            } 
        }

    });
});
	

Live Demo Leak

Live Demo

Mustache.js


	Templates = new Object();
Templates['results'] =  'Monthly Payment: <b>{{monthly}}</b><br> \
Interest paid: <b>{{totalinterestpaid}}</b> \
<br>Total Amount Paid: <b>{{totalpaid}}</b> ';


	


var template_vars = {
    monthly: toMoney(mtgObj['monthly']),
    loanlength: loanlength,
    totalinterestpaid: toMoney(mtgObj['totalinterest']),
    totalpaid: toMoney(originalloanamount + mtgObj['totalinterest'])
};

var resultshtml = Mustache.render(Templates['results'], template_vars);
$("#results").html(resultshtml);

					

Make it friendly


	// Handler for .ready()
$(function() {

	$( "input" ).focus(function(){
		$( this ).addClass("ui-state-highlight");
    }).blur(function(){
		$( this ).removeClass("ui-state-highlight");
	});
});
	
  • ui-helper-hidden
  • ui-corner-all
  • ui-icon ui-icon-*

Auto-load, Auto-click, Auto-save


	//jQuery .ready()
$(function() {

    restoreFromCookie();

    $( "#CalculateButton" )
        .button()
        .click(function(){
            saveToCookie();

    }).trigger("click");


});


	

Live Demo

jQuery Cookies


	
function saveToCookie() {    
    $("input, select").each(function( index ) {
        $.cookie($(this).attr("id"), $( this ).val(), { expires: 30, path: '/' });
    });
}

function restoreFromCookie() {
    
    var cookiesObj = $.cookie();   
    var thecookie = {};
    if(cookiesObj.length > 0) {
        thecookie = cookiesObj[0];
    }    
    for (var index in cookiesObj) {
		$("#"+index).val(cookiesObj[index]);
    }    
}
	

UglifyJS


rm main-ugly.js
cat *.js | uglifyjs -nc  > main-ugly.js
                        

Live Demo

Switch to main-ugly.js


	<?php

$uglytime = 0; $apptime = 0 ;
if(file_exists("js/main-ugly.js")) {
    $uglytime = filemtime("js/main-ugly.js");
}
if(file_exists("js/main.js")) {
    $apptime = filemtime("js/main.js");
}

if($apptime > $uglytime) {  ?>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/jquery.formatCurrency-1.4.0.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/mustache.js"></script>
    <script src="js/templates.js?v=<?php echo filemtime("js/templates.js");?>">
        </script>
    <script src="js/main.js?v=<?php echo $apptime;?>"></script>
<?php
} else {
        ?><script src="js/main-ugly.js?v=<?php echo $uglytime;?>"></script><?php
    }
	

Live Demo

Tools

Questions?

DanNagle.com
@NagleCode