Repository

What Will I Learn?

You will learn how to make Palindrome Word Application
You will learn split() function in jquery
You will learn join() function in javascript
You will learn reverse() function in javascript
You will learn reduce() and reduceRight() function in underscorejs
You will learn addClass() and removeClass() function in jquery

Requirements

Visual Studio Code in GitHub

Difficulty

Intermediate

Tutorial Contents

In this article I will explain how to do palindrome word application using jquery and underscore libraries.

Palindrome words are pronounced in the same way when the dictionary meaning is seen in plain and reverse.

In this application I will check the value entered in a textbox and check if this value is palindrome. I will do this in three different ways.

Using JavaScript for the loop
Using the reverse() function
Using the reduce and reduceRight functions

I will split the value into the textbox and I will check from the left and right. If the palindrome is a word I will write the warning to the p tag and I will do the design using the addClass() and removeClass() functions.

It is always a good idea to explain step by step the application.

Design of the page.
For button events
Reverse button events
Reduce button events

STEP 1: Design of the page

Let's start with loading the libraries that I need.

I'll use the bootstrap library for the page's design, and I'll also install the jQuery and underscore libraries.

<head> 
        <meta charset="utf-8">
        <title></title>
        <script src="jquery.min.js"></script>
        <link href="bootstrap.css" rel="stylesheet">
        <script src="script.js"></script>
        <script src="underscore.js"></script>
</head>

I will use the container class to center the page.

I will divide the page by 3 lines. I will place and design a textbox to enter a value in the first line.

I'll have my buttons on the second line. I will create three columns in this row, one for each column.

In the last line I will define one p tag for my warning message.

<body>
        <div class="container">
                <div class="jumbotron">Palindrome Word Application</div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <input type="text" class="form-control" id="txt"/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <button type="submit" class="btn btn-primary" id="btnFor">For Submit</button>
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-primary" id="btnReverse">Reverse Submit</button>
                </div>
                <div class="col-md-4">
                        <button type="submit" class="btn btn-primary" id="btnReduce">Reduce Submit</button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p id="p"></p>
                </div>
            </div>
        </div>
</body>

Screenshot 1

STEP 2: For button events

We first need to catch the time when we click on the for button. When the button is clicked, we assign a value to the textbox value.

In jquery we use the click() function to capture the moment the button is clicked. We can access it with the value val() function that is written in a textbox.

$('#btnFor').click(function(){
    var inputValue=$('#txt').val();
)};

We need to break it up to these value characters.

var array1=inputValue.split("");
console.log(array1);

The split() function is used to break a string value. It carries out the disintegration according to the character it takes in this function. In this example, we do not write any characters, so we strip each character of the string value entered.

Screenshot 2

Screenshot 3

Let's create another array and assign the elements of the first array starting from the last element.

I will use the for loop to perform this operation.

var array2=[];
var i=array1.length-1;
for(let index = 0; index < array1.length; index++) {
   array2[i]=array1[index];
    i=i-1;
}

Using the join() function, we can place array elements into a string variable.

var string1=array1.join();
var string2=array2.join();
console.log(string1);
console.log(string2);

Screenshot 4

We can now do equality check.

If our input is a palidrome word we can add a class to the p tag with the addClass() function and change the design.

The addClass() function does add a class to an html element, and the removeClass() function removes a class from the html element.

if(string1==string2){
        $('#p').removeClass("alert alert-danger");
        $('#p').addClass("alert alert-info");
        $('#p').text('The value entered is a palindrome word');
    }else{
        $('#p').removeClass("alert alert-info");
        $('#p').addClass("alert alert-danger");
        $('#p').text('The value entered is not a palindrome word');
}

With the text() function we can write text to a html element.

Screenshot 5

Screenshot 6

STEP 3: Reverse button events

Doing these operations with the for loop is really a waste of time.

Instead of using the for loop for this operation, we can use a function that does this job.

With the reverse() function, we can invert the elements at the time of the text fragmentation.

$('#btnReverse').click(function(){
    var inputValue=$('#txt').val();
    var array1=inputValue.split("");
    var array2=inputValue.split("").reverse();

    var string1=array1.join();
    var string2=array2.join();

    if(string1==string2){

        $('#p').removeClass("alert alert-danger");
        $('#p').addClass("alert alert-success");
        $('#p').text('The value entered is a palindrome word');
        
    }else{

        $('#p').removeClass("alert alert-success");
        $('#p').addClass("alert alert-danger");
        $('#p').text('The value entered is not a palindrome word');
    }

 });

Screenshot 7

STEP 4: Reduce button events

We can combine a fragment with reduce() function without using the join() method.

We can do the work of both the reverse() and join() methods with the reduceRight() function.

$('#btnReduce').click(function(){
    var inputValue=$('#txt').val();
    var array=inputValue.split("");
    var leftToRight=_.reduce(array,function(memo,i){
        return memo+i;
    })
    var rightToLeft=_.reduceRight(array,function(memo,i){
        return memo+i;
    })

    if(leftToRight==rightToLeft){
       
        $('#p').removeClass("alert alert-danger");
        $('#p').addClass("alert alert-warning");
        $('#p').text('The value entered is a palindrome word');
        
    }else{
        $('#p').removeClass("alert alert-warning");
        $('#p').addClass("alert alert-danger");
        $('#p').text('The value entered is not a palindrome word');
    }
 });

The reduce() and reduceRight() functions take a array. Reduce() these elements into a single variable. reduceRight() reverse the elements of an array and assigns a variable.

Screenshot 8

Proof of Work Done

Palindrome Word Application

Palindrome Word Application Using Jquery and Underscore