characters-remaining.js

// Show the number of characters remaining
// When the document is ready to execute code
$(document).ready(function() {
  // Set the max number of characters
  let textMax = 280;
  // Write the max number of characters to the element witn an id of #charcount
  $('#charcount').html(textMax);
  // When someone types into the input with an id of #title
  $('#idea').keyup(function() {
      // Set a variable of texTLength to the length of the input with an id of #idea
      let textLength = $('#idea').val().length;
      // Set a variable that is the max length of text - the current length
      let textRemaining = textMax - textLength;
      // Write the number of characters remaining to the #charcount element
      $('#charcount').html(textRemaining);
      // Set a backgroundColor variable 
      let backgroundColor = "#38d996";
      // if the text is less than or equal to 5 characters set a warning color
      if (textRemaining <= 20) {
          backgroundColor = "#ff6382";
      } 
      // else if the count is equal to 40 reminaing or lower set a caution color
      else if (textRemaining <= 100) {
       backgroundColor = "#ffab9d";
}
      // Set the background color of the element with an id of charbox based on the rules above
      document.getElementById('charbox').style.backgroundColor = backgroundColor;
  });
});