Text Applications and Callbacks

We can do a lot with character, words and sentences. Once they are made into variables inside programs. These variables are called Objects or Class of Objects. The text based data is called Strings. Strings in javascript have lot of features (called methods) which you refer here.

Provide a text file below. (one that has .txt extension)

Just Words and Letters

Number of Words:

Number of letters:

Some parts of this page is created by using html tags. While the data about the files and the data in the files are displayed dynamically using p5js. P5Js has very powerful way to create, locate and attach elements to the existing DOM.

Getting the text file very easy, unlike in vanilla JS there are callbacks and promises involved. P5 abstracts that out. P5 like JQuery gives enough control over the DOM elements and allows a range of features to work with. We will implement the simpler version of N + 7 Swapper that can be found Spoon Bill

N+7 Word Swapper

Nouns are all around us. Animate or inanimate, they are there in form of things, places, items, trinkets and the list goes on. The challenge is to find the noun in a given text and replace that noun with 7th one following in the dictionary. Provide the text that you want the nouns to be replaced. You can select the file, copy the contents or just drag the file below.

There are some obvious bugs in the below app. The text gets attached every time the "mark changes" and "Make changes" buttons are clicked. Before attaching the texts, need to check if there is something already attached. Or use a simple variable to inform that the elements are already attached.

Your File Contents

Marked Nouns

Updated Contents of your file

Input data with below Options

Drag in your File

Problem and Step Solution

Multiple ways of getting the text inputs needs to be coded.3 different methods copy pasting the text, selecting the file by browsing and dragging and dropping the file is implemented.
Visual cues are given once the file data is recieved. When the file is dropped in the the drop area, the area color highlights. Similarly, when the text is entered, it start appearing in the "Your content area"
Recieved data needs to be split, and nouns needs to be identified.In production environment, I will use more robust API to check whether a word is a noun, but during practice I decided to use wordlist of nouns in the internet. Ashley Bovan's and xaviershay's list came very handy
Need to locate the 7th word after the identified noun in the english dictionary. For this git hub repo by dwyl is imported. However in the example, I have just indexed ahead inside the "nouns" list itself.
After find the 7th word, that is word is replaced for all the occurences the text that is provided by the user.
As addition, the nouns that are replaced are highlighted blue in the source File and highlighted orange in changed content.
Do not pull files that ranges in multiple MBs, it will literally slowdown the user experience. Even with asynchronous operation, the browser can only handle limited process