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:
3.Functions and function operations,
6.Manipulation of arrays using array methods
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
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.
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.
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.
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
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.
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.