How to create a text comparison app in JavaScript

texts comparison tool

A friend messaged me concerning his steemit account password some days ago. He has quite a good amount of Steem and SBD in it, he hoped to cross to hive His password is showing incorrect login and I gave him some suggestions. Along the line, we needed to compare the keys stored in his phone and the one in the email. I had to use an online text comparison tool.

A thought came in that why can’t I build a simple one for my everyday use.

That’s the essence of this post. This post will guide you on how to create a simple text comparison app in JavaScript.

See the Pen abvMpOd by zoneboy (@zoneboy) on CodePen.

HTML

JavaScript comparison app
HTML

We need 2 empty text fields that will take in the 2 texts we want to compare. This is made possible with the use of <input type=”textarea”>. The two are also assigned different ids to differentiate them when accessing via JavaScript.

The next thing is to add two empty span tags and an empty h1 tag. They will be useful later on.

HTML version

CSS

text comparison tool

The next thing is the CSS and it is straightforward. We need to add some stylings to the app to beautify it. The first is by centralizing the container by text-align then applying some margin left to it.

The next thing is applying some properties to the text area. The height need to be modified and also add little margin and padding.

The span tags are given different background colors and a white text color. These empty spans will display the inputted texts.

CSS version

You can see that our app is looking cooler now. We need to add functionality to the app now.

JavaScript

This is the main engine of the app. It is what makes it work.

javascript text comparison app
JavaScript

The first thing to do is to declare the access the html elements and assign them variables names. The textareas and the compare button were assigned variables.

  • var old = document.getElementById(‘old’);
  • var recent = document.getElementById(‘new’);
  • var btn = document.getElementById(‘button’);

When this is done, we need to create our compare function. This is the function that will run when the compare button is clicked.

The compare function first of all access any value inputted in the text area. This is made possible with the .value method. The next thing is to access the h1 tag and the span tags. Once they are all accessed and assigned their respective variable, we create an if statement.

text comparison with javascript
Sample

if (oldValue !== newValue) means if the content in the first text area does not matches that in the second text area somethings should run. The things to run include blue.innerHTML = oldValue; which means output the first text area content in a blue background, red.innerHTML = newValue; which means output the second text area content in a red background, and info.innerHTML = ‘The texts are not similar.’ which means output an information that the texts are not similar.

Texts comparison in Javascript
Text comparison result

What if the texts are similar, what will happen? This is where we use else run this info.innerHTML = ‘The texts are similar.’ which means output an information that the texts are similar then output the old value in a blue background blue.innerHTML = oldValue;.

Once all this is done, we need to tell the compare button to run it. We do this by using the eventListener. btn.addEventListener(“click”, compare); which means the compare button should listen for any click event to trigger the compare function explained above.

I believe this guide will be very useful in creating your own text comparison tool in JavaScript. You can view the code on codepen

Be the first to comment

Leave a Comment