Creating My Own Hemingway App

Challenges

Possible Solutions

  • Only rescan the paragraphs that change. Do this by counting the number of paragraphs and comparing that to the document before the change. Use this to find the paragraph that has changed or the new paragraph and only scan that one.
  • Have a button to scan the document. This massively reduces the calls of the scanning function.

Building the App

<link rel=”stylesheet” href=”index.css”>
<title>Fake Hemingway</title>
<div>
<h1>Fake Hemingway</h1>
<textarea name=”” id=”text-area” rows=”10"></textarea>
<button onclick=”format()”>Test Me</button>
<div id=”output”>
</div>
</div>
<script src=”index.js”></script>
function format() {
let inputArea = document.getElementById(“text-area”);
let text = inputArea.value;
let outputArea = document.getElementById(“output”);
outputArea.innerHTML = text;
}
let paragraphs = text.split(“\n”);
let inParagraphs = paragraphs.map(paragraph => `<p>${paragraph}</p>`);
outputArea.innerHTML = inParagraphs.join(“ “);
(function start() {
let inputArea = document.getElementById(“text-area”);
let text = `The app highlights lengthy, …. compose something new.`;
inputArea.value = text;
})();

Highlighting

let sentences = paragraph.split(‘. ’);
let words = sentence.split(“ “).length;
let letters = sentence.split(“ “).join(“”).length;
let level = Math.round(4.71 * (letters / words) + 0.5 * words / sentences — 21.43);
if (words < 14) {
return sentence;
} else if (level >= 10 && level < 14) {
return `<span class=”hardSentence”>${sentence}</span>`;
} else if (level >= 14) {
return `<span class=”veryHardSentence”>${sentence}</span>`;
} else {
return sentence;
}
  • There were no full stops. When I split the paragraphs into sentences, I had removed all of the full stops.
  • The numbers of letters in the sentence included the commas, dashes, colons and semi-colons.
let cleanSentence = sent.replace(/[^a-z0–9. ]/gi, “”) + “.”;
Hard sentence highlighting
if(word.match(/ly$/) &&, !lyWords[word] ){
return `<span class=”adverb”>${word}</span>`;
} else {
return word
};
Adverbs working
let qualifiers = getQualifyingWords();
let wordList = Object.keys(qualifiers);
wordList.forEach(key => {
let index = sentence.toLowerCase().indexOf(key);
if (index >= 0) {
sentence =
sentence.slice(0, index) +
‘<span class=”qualifier”>’ +
sentence.slice(index, index + key.length) +
“</span>” +
sentence.slice(index + key.length);
}
});
Getting complex phrases and qualifiers working
All the highlighting working

Then I hit a problem

// from getQualifier and getComplex
let index = sentence.toLowerCase().indexOf(key);
// from getPassive
let index = words.indexOf(match);
Code with bugs in
function findAndSpan(sentence, string, type) {
let index = sentence.toLowerCase().indexOf(key);
if (index >= 0) {
sentence =
sentence.slice(0, index) +
`<span class="${type}">` +
sentence.slice(index, index + key.length) +
"</span>" +
findAndSpan(
sentence.slice(index + key.length),
key,
type);
}
return sentence;
}

Statistics Counter

data.sentences += sentence.length
or
data.adverbs += 1
<div id=”adverb” class=”adverb counter”></div>
<div id=”passive” class=”passive counter”></div>
<div id=”complex” class=”complex counter”></div>
<div id=”hardSentence” class=”hardSentence counter”></div>
<div id=”veryHardSentence” class=”veryHardSentence counter”></div>
The completed app

I'm a software developer currently building Chat Bots for E-Commerce companies. Outside of coding I love to go Rock Climbing and Traveling.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Advanced Javascript

CS373 React Tutorial

Accessing the index inside NgFor

What is Promises?

How Promise work

React Hooks: What Are They? Why Are They Important and Basic Hooks to Learn.

10 Cool JavaScript Features You Might Not Know About Yet

Best WordPress Christmas Plugin

Align-items, align-content, justify-content, OH MY!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sam Williams

Sam Williams

I'm a software developer currently building Chat Bots for E-Commerce companies. Outside of coding I love to go Rock Climbing and Traveling.

More from Medium

Building Landing Pages With SeedProd

Update our knowledge, where to start?

Start Of A New Carrier Journey

A couple posing with some leather bags

I will do configure and published your codecanyon projects

install the script, reskin your project for android, ios & web @ What can I do? # Reskin project # Change package name, icon, logo, and Splash Screen # Firebase Configure # Fontend Interface customization # Change Font Styles # Ads integration (Facebook, Google Admob) # Php project setup # Add app configure with admin panel # Push notifications (Firebase, OneSignal) # Configure Google Maps # Setup Google and Facebook Login # Build your project apk file with sing in key # Publish y