Add a JavaScript display to the Home page to count down from 140 characters. (Rails Tutorial, 2nd Ed, Chapter 10, Exercise 7)

Question

This exercise was a bit tricky. Figured I'd post my solution to see if anyone did it differently or if there's anyone who knows a better way.

I'm not sure on best practices for using the Asset Pipline .. for example, the correct order to put things in the application.js manifest file, or when to put things in lib versus app. I just put the following in lib to try getting it to work.

---

From Michael Hartl's Rails Tutorial 2nd ed Chapter 10, Exercise 7:

(challenging) Add a JavaScript display to the Home page to count down from 140 characters.

First, I read this post about jQuery Twitter-like countdowns, which provided the code to do it.

Next, I updated app/views/shared/_micropost_form.html.erb to look like this:

<%= form_for(@micropost) do |f| %>
    <%= render 'shared/error_messages', object: f.object %>
    <div class="field">
        <%= f.text_area :content, placeholder: "Compose new micropost..." %>
    </div>
    <%= f.submit "Post", class: "btn btn-large btn-primary" %>
    <span class="countdown"></span>

<% end %>

Then, I created a javascripts directory in lib and added file

lib/assets/javascripts/microposts.js

function updateCountdown() {
    // 140 is the max message length
    var remaining = 140 - jQuery('#micropost_content').val().length;
    jQuery('.countdown').text(remaining + ' characters remaining');
}

jQuery(document).ready(function($) {
    updateCountdown();
    $('#micropost_content').change(updateCountdown);
    $('#micropost_content').keyup(updateCountdown);
});

Finally, I added a tiny bit of CSS

app/assets/stylesheets/custom.css.scss

/* micropost jQuery countdown */

.countdown {
  display: inline;
  padding-left: 30px;
  color: $grayLight;
}

Finally, add directive to the app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require microposts
//= require_tree .

The FINAL RESULT looks like this http://grab.by/dbC6

---

Question: Would it be wrong to put the manifest lines after //= require_tree .

For example, this works but I'm not sure what the difference would be, versus adding the line above tree .

 //= require jquery
 //= require jquery_ujs
 //= require bootstrap
 //= require_tree .
 //= require microposts

Answer 1

I think my solution posted here in SO is different enough from yours now that I can humbly post it as an answer.