Creating a smart palindrome app

Preamble:

JavaScript, CSS and HTML have remained the bread and butter of the web since their inception even with the many advances in technology for web and web applications.

In this tutorial, we will be building a Palindrome app which is able to determine the type of data inputted and advises on the nature of the input, whether it is a number or not, if it is an integer or not and if the input is a palindrome or not.

The palindrome is an app designed to teach several aspects of programming for the web which include:

1.DOM operations,
2.Event listening,
3.Functions and function operations,
4.Arrays,
5.Array methods,
6.Manipulation of arrays using array methods
7.Conditional statements

Outline:

Tools and technology used include HTML, CSS and Vanilla JavaScript.
When we are done,our app would be able to take in input, determine if the input is a number or not by testing the input using the "isNaN()" inbuilt function, it will determine if input is an integer by using regex and then determining if it is a palindrome. When all of the steps have been passed, it will issue a notification informing the user of what the outcome of the checks are.

Lets Get Started

HTML:
It is said that HTML is the skeleton or scaffolding from which the web is built and as such we would start from there.
We would need to have the usual elements in an HTML document which include the header, footer, and body tags which create the basic framework and structure. We would need a form so we can have an input field to accept input from the user, a button for submitting our input to the computer and an area where the response from the app is displayed.

CSS:
The next to be used is CSS which will be used to add the additional characteristics to our app to make it more appealing to the eye.
Here we use commands to assign designs and effects to classes and ID defined in the HTML code.

JavaScript:
Now we are getting to the fun part. This is where we perform most of the magic by applying logic to the required operations in our app.

I will outline a breakdown of the logic required for the app to work and how i implemented it in this app below:

1.)It needs to accept and recognize input from the form which was done using the DOM operation command "document.getElementById()". This looks for information from the specified ID and stores that in the variable

2.)We then need to call a function which contains other functions that determines what type of input has been keyed into the app
a.)The first function determines if the input is a number or not
b.)The next function determines if the input is an integer or not
c.)The next function determines if the input is a palindrome or not

3.)When all parameters have been determined, we then set conditions that determine what output will be displayed on screen using if/else statements.

4.)When a condition has been met in the conditional statement, it is the displayed on screen which is enabled by DOM operations that display the result on screen and also prevent the answer from disappearing from screen immediately after displaying on screen.

Now that we have outlined the logic, we will now go step by step into the actual code construction which we will find to be far easier as we have outlined the structure and how things should flow.

Code

We create a variable (which i have called submitButton) to get the action of the submit button.

We then create an event listener that calls the overarching function (which i have called advancedPalindrome) when the submit button is clicked.

We define the function advancedPalindrome which contains 3 other functions and the conditional statements

i.) The first function checks if the input data is a number by returning a Boolean value. In JavaScript, there is an "isNaN()" function [Not a number function] which determines if a value is not a number and returns a Boolean value. The focus of our numberCheck function is to determine if the input data is a number so we negate the "isNaN()" function inside this function in order to reverse the returned Boolean output. What this means is that if the input data is a number, the returned value which is supposed to be false is now negated to true as "isNaN()" is initially not looking for a number.

ii.) The next function checks to see if input data is an integer or not and regex expression is used here because by default, the input field in HTML is set to text, so in order to be able to determine the nature of the input we test to check if input is within the range of 0-9. This returns a Boolean as well.

iii.) The final function checks to see if the input data is a palindrome. Here, we first reduce and replace all characters in the input to lowercase to address the issue of words with capital letter(s) and we employ regex again because in my opinion, regex does a clean job. I then defined an output variable which i have called outputData where we perform palindrome operations and store output of the palindrome operation.

The palindrome operation involves converting input to string using the toString() method, splitting the string into individual elements of a sentence and parses into an array, reversing this array and then joining it back into a single sentence and assigns it to the variable outputData.
We then compare the values of the input data and the output data and return a Boolean value, if both are the same the function returns true and if they are not, the function returns false.

When we have now created all the necessary functions to perform operations on the input, we then assign a variable that stores the value of the data collected from the input field using the DOM operator "document.getElementById().value" and we also perform DOM operation on the element that is to display the output on screen and assign it to a variable which i have called notification.

The next step is now to create conditions using If/Else statements that determine what output would be displayed on the screen. The If/Else statement would be comparing output from the three functions earlier defined and the different scenarios would be accounted for.

I have also included commands to log to the console of the browser for debugging purposes.

When all the above has been completed, we then prevent the default action of output disappearing once it is displayed on screen using the code below.

Conclusion

This app combines a good number of concepts and operations available for use in JavaScript and i hope you enjoyed reading my post as i enjoyed creating this app and this post.

Feel free to reach out to me on Twitter @enyinnaofoegbu i would love to hear your thoughts on this.

I would appreciate if you hit the like button if you like this post as well.

Happy Coding.