Qybrxy

index.html

.wrapper 
  .top-menu 
    p This is the menu area. Here is some cool text.
  .container
    .syllable-counter 
    textarea(name="message" placeholder="Message").writing-area

Qybrxy.markdown

Qybrxy

Forked from Knuxchan's Pen gPpwEO.

A Pen by Captain Anonymous on CodePen.

License.

script.js

(function($) {
  /**
   * Auto-growing textareas; technique ripped from Facebook
   * 
   * 
   * http://github.com/jaz303/jquery-grab-bag/tree/master/javascripts/jquery.autogrow-textarea.js
   */
  $.fn.autogrow = function(options) {
    return this.filter('textarea').each(function() {
      var self = this;
      var $self = $(self);
      var minHeight = $self.height();
      var noFlickerPad = $self.hasClass('autogrow-short') ? 0 : parseInt($self.css('lineHeight')) || 0;
      var settings = $.extend({
        preGrowCallback: null,
        postGrowCallback: null
      }, options);

      var shadow = $('<div></div>').css({
        position: 'absolute',
        top: -10000,
        left: -10000,
        width: $self.width(),
        fontSize: $self.css('fontSize'),
        fontFamily: $self.css('fontFamily'),
        fontWeight: $self.css('fontWeight'),
        lineHeight: $self.css('lineHeight'),
        resize: 'none',
        'word-wrap': 'break-word'
      }).appendTo(document.body);

      var update = function(event) {
        var times = function(string, number) {
          for (var i = 0, r = ''; i < number; i++) r += string;
          return r;
        };

        var val = self.value.replace(/&/g, '&amp;')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;')
          .replace(/\n$/, '<br/>&nbsp;')
          .replace(/\n/g, '<br/>')
          .replace(/ {2,}/g, function(space) {
            return times('&nbsp;', space.length - 1) + ' '
          });

        // Did enter get pressed?  Resize in this keydown event so that the flicker doesn't occur.
        if (event && event.data && event.data.event === 'keydown' && event.keyCode === 13) {
          val += '<br />';
        }

        shadow.css('width', $self.width());
        shadow.html(val + (noFlickerPad === 0 ? '...' : '')); // Append '...' to resize pre-emptively.

        var newHeight = Math.max(shadow.height() + noFlickerPad, minHeight);
        if (settings.preGrowCallback != null) {
          newHeight = settings.preGrowCallback($self, shadow, newHeight, minHeight);
        }

        $self.height(newHeight);

        if (settings.postGrowCallback != null) {
          settings.postGrowCallback($self);
        }
      }

      $self.change(update).keyup(update).keydown({
        event: 'keydown'
      }, update);
      $(window).resize(update);

      update();
    });
  };
})(jQuery);
$(function() {
  $('textarea').autogrow();
  $('textarea').on('keyup', function() {
    var content = $(this).val();
    var paragraphs = content.split("\n");
    $('.syllable-counter').html('');
    paragraphs.forEach(function(v) {
      if (v.length > 0) {
        $('.syllable-counter').append('<p class="count">' + v.length + '</p>')
      } else {
        $('.syllable-counter').append('<p class="count">&nbsp;</p>')
      }
    });
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body { background: #000; }
.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
.container {
  width: 100%;
  padding: 20px;
  margin: 0 auto;
  display: block;
}
.top-menu {
  padding: 20px;
  background: #888;
}
.syllable-counter {
  width: 5%;
  color: #fff;
  float: left;
  padding-right: 20px;
  overflow: hidden;
}
.writing-area {
  float: left;
  width: 80%;
  max-width: 90%;
  height: 100%;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #0000ff;
  border-radius: 5px;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
}
input[type=text]:focus,textarea:focus {
  border-color: #4697e4;
}
p { color: #fff; }