Sentence length colour

Have the length of the sentence be represented by the background colour of the sentence. To see

<!DOCTYPE html>
<html >
  <meta charset="UTF-8">
  <title>Sentence length colour</title>
      <link rel="stylesheet" href="css/style.css">


  <p>This sentence has five words. Here are five more words. Five-word sentences are fine. But several together become monotonous. Listen to what is happening. The writing is getting boring. The sound of it drones. It’s like a stuck record. The ear demands some variety.</p>
<p>Now listen. I vary the sentence length, and I create music. Music. The writing sings. It has a pleasant rhythm, a lilt, a harmony. I use short sentences. And I use sentences of medium length. And sometimes, when I am certain the reader is rested, I will engage him with a sentence of considerable length, a sentence that burns with energy and builds with all the impetus of a crescendo, the roll of the drums, the crash of the cymbals–sounds that say listen to this, it is important.</p>
<p>So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader's ear. Don't just write words. Write music.</p>
    <script  src="js/index.js"></script>

/* Downloaded from */
.xxsmall {
.xsmall {
.small {
.medium {
.large {
.xlarge {
.xxlarge {
/* Downloaded from */
var pEl = document.querySelectorAll("p");

pEl.forEach(function(el) {
  var text = el.textContent;
  text = noteSentenceLength(text);
  el.innerHTML = text;

function noteSentenceLength(text) { 
  // wrap Sentences in span with a class indicating sentance length
  var textSent = text.split(". ");
  var finalText = [];

  for(var i = 0; i < textSent.length; i++) {
    var textTemp = textSent[i].trim();
    if(!textTemp) continue;
    var wNum = textSent[i].split(" ").length;
      case 1:
        wNum = "xxsmall";
      case 2: case 3:
        wNum = "xsmall";
      case 4: case 5:
        wNum = "medium";
      case 6: case 7: case 8:
        wNum = "large";
      case 9: case 10: case 11: case 12: case 13: case 14:
        wNum = "xlarge";
        wNum = "xxlarge";
    textTemp = "<span class=\"" + wNum + "\">" + textTemp + ".</span> ";

  return finalText.join("");

This awesome code ( Sentence length colour ) is write by Andrew Millar, you can se more from this user in the personal repository

You can find the original code on

2018 © Andrew Millar