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