To Examples

BoxModel Example

Directions

1. Create a new Rails project named HighlightFocused.
2. Generate a scaffold with the name Student having these fields:
   

   Field	Datatype
   first_name	string
   middle_initial	string
   last_name	string
   gender	string
   birth_date	date
   gpa	float

3. Source code for the CSS stylesheet HighlightFocused/app/assets/stylesheets/students.scss:
   

   div.curFocus { background-color: #fdecb2;
                  width: 250px; }
   div.field    { padding: 10px; }
   

4. Source code for the javascript source code: HighlightFocused/app/assets/javascripts/application.js:
   

   $(document).ready(function( ) {
     $("input").focus(function( ) {
       $(this).parent( ).addClass("curFocus")
     });
     $("input").blur(function( ) {
       $(this).parent( ).removeClass("curFocus")
     });
   });
   

5. Localhost URL to view the Student index page:
   

   http://localhost:3000/students
   

6. If you prefer, remove the jQuery code in Step 4 and put this CoffeeScript code in HighlightFocused/app/assets/javascripts/students.coffee:

   $(document).ready ->
     $("input").focus ->
       $(this).parent( ).addClass("curFocus")
     $("input").blur ->
       $(this).parent( ).removeClass("curFocus")