Add some jQuery magic

Open layout.jade and add in the foot of the doc:

  1. script(src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js')
  2. script(src="/javascripts/app.js")

Create the following file:

  1. $ touch public/javascripts/app.js

Open app.js and add the following:

  1. // Test for placeholder support
  2. $.support.placeholder = (function(){
  3.   var i = document.createElement('input');
  4.   return 'placeholder' in i;
  5. })();
  7. // Hide labels by default if placeholders are supported
  8. if($.support.placeholder) {
  9.   $('.form li').each(function(){
  10.     $(this).addClass('js-hide-label');
  11.   });
  12. }
  14. $('.form li').find('input, textarea').on('keyup blur focus', function(){
  16.   // Cache our selectors
  17.   var el = $(this),
  18.     parent = el.parent();
  20.     // Add or remove classes
  21.     if( el.val() === '' ) {
  22.         parent.addClass('js-hide-label');
  23.     } else {
  24.         parent.removeClass('js-hide-label');
  25.     }
  26. });