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.
The next thing is to add two empty span tags and an empty h1 tag. They will be useful later on.
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.
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.