Sentence length colour

In this example below you will see how to do a Sentence length colour with some HTML / CSS and Javascript

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

Thumbnail
This awesome code was written by Sl4rtyb4rtf4st, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Sl4rtyb4rtf4st ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <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>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Sl4rtyb4rtf4st/sentence-length-colour-aBjYyE */
.xxsmall {
  
  background:#f7f49b;
}
.xsmall {
  background:#F8CCF0;
}
.small {
  background:#FEADA7;
}
.medium {
  background:#C1F6BE;
}
.large {
  background:#96F3F3;
}
.xlarge {
  background:#8ad6d6;
}
.xxlarge {
  background:#5bdada;
}


/*Downloaded from https://www.codeseek.co/Sl4rtyb4rtf4st/sentence-length-colour-aBjYyE */
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;
    switch(wNum){
      case 1:
        wNum = "xxsmall";
        break;
      case 2: case 3:
        wNum = "xsmall";
        break;
      case 4: case 5:
        wNum = "medium";
        break;
      case 6: case 7: case 8:
        wNum = "large";
        break;
      case 9: case 10: case 11: case 12: case 13: case 14:
        wNum = "xlarge";
        break;
      default:
        wNum = "xxlarge";
    }
    textTemp = "<span class=\"" + wNum + "\">" + textTemp + ".</span> ";
    finalText.push(textTemp);
  }

  return finalText.join("");
}

Comments