Debounce and DebounceTime in JavaScript (Angular)

I have recorded video regarding,  Debounce and DebounceTime in JavaScript (Angular).

Please watch it on youtube.com

Read More

JavaScript - What's the Difference Var Let and Const?

I have recorded video and talk about JavaScript variables, scope of the variables.

Hope you will like this video. Please watch below video for same.

Read More

Write JavaScript code that accepts an array of integer and output the sum of two largest integers from array. But the sum of those two largest integers should be even number.

Write JavaScript code that accepts an array of integer and output the sum of two largest integers from the array. But the sum of those two largest integers should be even number.

Example:

#1
var int_array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// should output 7+9 = 16

#2
var int_array = [9, 5, 3, 2, 8, 14, 5, 7, 3, 11, 12]

// should output 12+14 = 26

Following is the solution to the above interview question.

 

//var int_array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 var int_array = [9, 5, 3, 2, 8, 14, 5, 7, 3, 11, 12];
 var first_max_number = Math.max.apply(null, int_array); //Find first max number
 
 var index = int_array.indexOf(first_max_number);
 if (index > -1) { //Once get max number pop from array
  int_array.splice(index, 1);
 }
 
 var second_max_number =0;
 for (i=0; i < int_array.length; i++){ //for second max number 
   second_max_number = Math.max.apply(null, int_array); //find second max number
  if(isEven(first_max_number) && isEven(second_max_number)){ // check both number should be event or odd
   break; //Once condition get satisfy, break the look 
  }else if(isOdd(first_max_number) && isOdd(second_max_number)){
   break;
  }
 
  index = int_array.indexOf(second_max_number);
  if (index > -1) { //pop second max number from the array
   int_array.splice(index, 1);
  }
 }
 var sum = first_max_number + second_max_number;
 alert(first_max_number +" + "+ second_max_number +" = "+ sum);
 
 function isEven(n) { //check event number
  return n % 2 == 0;
 }

 function isOdd(n) { // check odd number
    return Math.abs(n % 2) == 1;
 }

Hope it will help you to in the future.

Read More

Create your first Vue.js application using Visual Studio Code (VS Code)

Going to create Vue.js application using Visual Studio Code before going to create the application, I assume that you already familiar with Visual Studio Code editor.

If you are not aware of it so let me take opportunity to help on this. Visual Studio Code is an open source and free editor from Microsoft. So anyone can use as a free software for the web development.

You can download from here and use for the web development.

Once you open the VS Code its a welcome page open.

Now we are going to create new project/folder (choose your project path). I have created new folder VueJsWithVSCode.

Its an empty folder at moment so we are going to create the first file index.html.

Here, I am going to create simple Vue.js application which will help to understand to beginner.

Vue is a progressive framework for building user interfaces. Vue code library focus on view layer only, and is easy to pick up and integrate with other libraries or existing projects.

Created index.html file with basic html coding. Once you have ready with basic setup of html page.

Going to add Vue library. There is a multiple way to add Vue library.

1. If you are aware of NPM then you can use of Vue npm to install the package.
2. You can use vue-cli to create the application but do not recommend that beginners start with vue-cli.
3. You directly include vue library on your index.html file.

Going to add first vue app on index page.

 

{{ message }}

 

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive.
Binding with element attribute.
How to text interpolation using bind element attributes.

 


    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  

 
var app2 = new Vue({
  el: '#app-2',

  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

After adding code and run it. you will see the following line of message on the screen. Once you mouse hover on the text you will get the dynamic text which was bind with the title attribute.

 

Its a simple application for the newbie for Vue.js. 

Read More

Types of data binding in Angular 2

Today, I am going to cover hot topic of the market Angular 2. Just a few days ago Angular 2 was released and everyone very excited to know about Angular - 2 then compare to AngularJs.

One thing I tell you there is no connection between AngularJs and Angular - 2. So Angular 2 has own concept and support ECMA - 6 (which is the latest version of JavaScript).

AngularJs is supporting ECMA - 5 so there is the main difference between AngularJs and Angular 2.

As we know in AngularJs by default support two-way binding so we can say AngularJs added $watch on each control which is use ng-model.

So there are the performance issues of AngularJs, Angular 2 has overcome those issues so that provides more binding types so you can choose based on your requirement where you want which type of binding.

Angular 2 support four types of binding

1. Interpolation
2. One Way Binding
3. Two Way Binding
4. Event Binding

1. Interpolation

Interpolation is the easiest and best-known way of data binding. In AngularJs, it looked likes this:

<h1>{{vm.student.name}}</h1>

In Angular 2, we can still use the curly braces, but we can omit controller name or vm, because we already have the context. so here we can use directly object or variable name.

<h1>{{student.name}}</h1>

2. One Way Binding

The way we used to apply one-way binding is ng-bind just like this:

In Angular 2 we can use square brackets around the property we want to bind to.

<span [innertext]="student.name"></span>

This may look a bit strange at first, but it definitely is valid HTML. We actually can take any HTML property, like innerText, wrap it in square braces and you can then bind it to a model.

This could for example also work on style properties:

<span [student.bgcolor]="style.backgroundcolor"></span>

3. Two Way Binding

The most used use case of two-way binding in AngularJs is using it on any field or any other form elements. When we type something in the textbox on one side, the value goes to the controller and then back and forth.

In AngularJs we are using the ng-model directive on the element and bind it to the value:

In Angular 2 we also have a special directive called ngModel. But here some syntax is changed from AngularJs.

<input [(ngmodel)]="student.name" /> 

We use the square brackets because it's a property, but we also use the parenthesis.
This syntax is called Banana in a Box ([()]). What this means is when you see this syntax, it's two-way binding at work.

4. Event Binding

You can do event binding with any valid HTML event available, like click, focus or blur. In AngularJs you should need built-in directives to use event binding.

For example, for binding to a click, one would use:

In Angular 2, we can just take the same property that is on the HTML element (click in the previous example) and wrap it in parenthesis.
So, with properties we use square braces [], but with events we use parenthesis ():

<button (click)="AddStudent()">Save</button> 

Note: Angular 2 has dropped tons of directives (like ng-click, ng-blur, ng-focus, etc) and also dropped the convention of splitting words with dashes and use camel case instead (ng-repeat vs ngFor, ng-if vs ngIf etc).

Hope you like this article and Happy coding!!.

Read More

isNaN funtion and NaN error in Javascript

This blog post is dedicated to JavaScript newbie and JavaScript lover.

NaN is a "Not a Number" in JavaScript.

1. NaN error
- NaN error is very common for JavaScript developer. When you are looking some calculation that time generally come.

- One thing remember when you are working with JavaScript  and declare any variable (var i;) and that variable value default as 'undefined'. so its a good practice to assign default value to the variable.

//var first = undefined;
var first;

//So when you do console.log(first); its print in console 'undefined'
console.log(first);

So take care it and don't forget to assign default value to variable else it will create a problem on some statement.

var first = 0;

consol.log(first)
//Console output is 0

When getting NaN error?
- When variable value is undefined and use that variable and calculate with some other variable that time getting NaN.

Let's see example.

var first;
var second = 4;

console.log(first + second);
//Output is NaN

//As we prevent NaN, declare variable with default value
//in our case first variable value is undefined so let assign value to variable.

first = 0;
console.log(first + second);
//Output is 4

2. isNaN function
  - It's a global function in JavaScript to check if a value is a NaN value.

When you writing JavaScript code for calculation of numeric values and its a safe way to handle numeric value and check value is not a NaN value using IsNaN function.

Let's see example how to handle NaN value in JavaScript.

var first;
var second = 4;
var sum = first + second
if (isNaN(sum)){
  console.log("value is a NaN");
}else{
  console.log('Value is not a NaN');
}

Hope this is useful for newbie of JavaScript.

Read More

How to use bootstrap selectpicker for dropdown

Today we will be looking for some bootstrap magics with the dropdown.

We aware of like bootstrap has changed the idea of presentation of design and layout.

Here we are picking off the great stuff for dropdown.  So for that bootstrap has selectpicker js.

Let's check how to use selectpicker for dropdown and related css and js file reference.

        


    
 

 
  

    
 
 

 

 


    
       Select County
      2 County  
      3 County  
    
  

    
       Select Orgnaization
      2 Orgnaization
      3 Orgnaization
   
  

In example, we have seen like on dropdown assign class="selectpicker" and that class is used for jquery operation and calling selectpicker() method.

There are many bootstrap select picker avaiable so enjoy and play with select picker.

Read More

How to remove top menu and statusbar option from tinymce editor.

Display text colour, alignment and font size etc. need to apply in content in front end.You need to configure menu bar false in tinymce initialization.

Tinymce editor applied in textarea and if menu is added in textarea using tinymce editor then UI not coming properly in front end and facing the issue of design of the page and for solving alignment of page issues want to remove top menu toolbar option from tinymce editor.

Before removing menu in tinymce editor screenshorts is below

Removing toolbar in the tinymce script you need add menubar:false and for statusbar remove you need to add statusbar:false for removing menu and statusbar of tinymce editor.
After removing the top menu option in tinymce editor screenshorts is below

Following tinymce editor script for removing main top menu options in configuration.

tinymce.init({
    selector: "textarea",
 menubar : false,
        statusbar:false,
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

Read More

Jquery bxslider- Display Image and video in Responsive jQuery Slider

How to display video and image in slider. I did R&D and based on that I have found jquery bxslider is best example for displaying content video and image slider.

Jquery bxslider providing responsive behavior with different browser and It also support in android and iPhone.Using jquery bxslider also feasible to display video in slider and we can play and pause video during slide transition.


I will show you the below example of slider that need to show images and video where rotate the slider after 3 seconds.

Step1: Add CSS and JS of bxslider

Step2: HTML for slider as below with image and video. For display video I have used video tag of html5

Step3: Initialize bxslider js using below code where I set auto Delay:300 set. It will be delay 3 seconds between slide rotation or transition.

Read More

How to change progress bar process colour - HTML5 progress tag.

Facing the issues of how to change progress bar process colour in HTML5 progress tag.

How to change the colour of progress bar demo not shown in any demo examples. I got trouble at UI level due to that my site colour button was in light red colour and progress bar colour needed in light red colour.

So I have applied progress bar colour but it was working in Firefox only and facing the issues in chrome browser that processing colour not changed.

Just refer the my previous post for uploading video/file using ajax.Where I need to implement this feature like when upload the video need to display progress bar with preferred colour of theme.

For uploading video displaying progress bar of html5 latest tag of process tag.

While uploading video displaying process bar for progress of how much time left for completion of upload the video.

You can refer previous post whole HTML with ajax call for video upload with progress bar.

For progress bar processing colour you need to set colour code(#ff5a5f) in background colour please apply below css and check it is working in all browser.

Please find attached image of progress colour.

CSS for progress bar

progress {background:#ccc; border: 1px solid #ff5a5f; border-radius: 5px; color: #ff5a5f; font-size: 0.6em; height: 3.8em;line-height: 1.5em;text-indent: 0.5em;}
progress[value]::-webkit-progress-bar {background-color:#ff5a5f;}
progress::-moz-progress-bar { background:#ff5a5f; }
progress::-webkit-progress-value { background:#ff5a5f; }
progress { color:#ff5a5f; }

/* Background Colors  */ 
progress,                          /* Firefox  */ 
progress[role][aria-valuenow] {    /* Polyfill */
   background: #ccc !important; /* !important is needed by the polyfill */
}
/* Chrome */
progress::-webkit-progress-bar {
    background: #ccc !important;
}
/* Foreground Colors   */ 
/* IE10 */
progress {
    color:#ff5a5f;
}
/* Firefox */
progress::-moz-progress-bar { 
    background: #ff5a5f;   
}
/* Chrome */
progress::-webkit-progress-value {
    background:#ff5a5f;
}
/* Polyfill */
progress[aria-valuenow]:before  {
    background: #ff5a5f;
}

Read More

How to upload video using jQuery AJAX.

Upload video file using ajax call, So I have tried with simple ajax call unfortunately I have not getting FILE objects in server side script.

How to send html FILE type object data using ajax on server side script.
I am facing the issues of uploading video file in ajax call, FILE data not getting in server side.

For that reading documents of jquery and plug n play with different scenario then I got final solution and writing demo example of HTML with ajax call for video upload with progress bar.

Please find below HTML for video upload with progress bar:

                        
                        Add Video Message
                    
                

Continue
                

You need to disable progress bar first while on click of continue button it will be display for precessing of video upload. Please refer screenshots



jQuery('#frm_ecard').serializeArray(); using this function get all form data values and added into formdata.

After creating for formdata object initiates ajax request for server side to store video. Formdata used for store key/values of given form.

Below is the jquery ajax call for video upload

Below css I have used for displaying progress bar of processing video upload.

progress {background:#ccc; border: 1px solid #ff5a5f; border-radius: 5px; color: #ff5a5f; font-size: 0.6em; height: 3.8em;line-height: 1.5em;text-indent: 0.5em;}
progress[value]::-webkit-progress-bar {background-color:#ff5a5f;}
progress::-moz-progress-bar { background:#ff5a5f; }
progress::-webkit-progress-value { background:#ff5a5f; }
progress { color:#ff5a5f; }

/* Background Colors  */ 
progress,                          /* Firefox  */ 
progress[role][aria-valuenow] {    /* Polyfill */
   background: #ccc !important; /* !important is needed by the polyfill */
}
/* Chrome */
progress::-webkit-progress-bar {
    background: #ccc !important;
}
/* Foreground Colors   */ 
/* IE10 */
progress {
    color:#ff5a5f;
}
/* Firefox */
progress::-moz-progress-bar { 
    background: #ff5a5f;   
}
/* Chrome */
progress::-webkit-progress-value {
    background:#ff5a5f;
}
/* Polyfill */
progress[aria-valuenow]:before  {
    background: #ff5a5f;
}

Read More

HTML5 Range Slider - onchange v/s oninput events

The behaviour of the input event compared to the change event is not exactly the same in different browsers when applied to a range slider.

A common UI pattern for a range slider is to allow the user to move the slider and display the value of it somewhere on the page, changing the displayed value as the user moves the slider.

I think the expected behaviour in such a case is that the value should display instantly, as the user is moving the slider, rather than the page waiting for the slider to finish moving before the displayed value is updated.

I suppose there could be cases where you prefer a delay over instant results, but I think the expected behaviour is to display the results instantly.

I have share this below code for good experience with onchange event and display value in output tag of html5.
So let us see following code section by section.
1. JavaScript code section

 

var i = document.querySelector('input'),
    o = document.querySelector('output');

o.innerHTML = i.value;

i.addEventListener('change', function () {
  o.innerHTML = i.value;
}, false);

2. Html code section

3. Css code section

 
body {
  padding: 40px;
}

input {
  display: block;
  width: 200px;
  margin: auto;
}

output {
  text-align: center;
  display: block;
  padding-top: 15px;
}

Read More

HTML5 Range Slider - Range slider value not changed using keyboard arrow key

A range slider is to allow the user to move the slider using keyboard arrow key up,down..etc and change the value of it somewhere on the page based on key press, changing the displayed value as the user moves the slider using keyboard key.

I think the expected behaviour in such a case is that the value should display while you change the slider using key, as the user is moving the slider using key rather than the page waiting for the slider to finish moving before the displayed value is updated.

I have tried jquery key press event and check key code using JavaScript unfortunately I didn't found the any solution.

I think the expected behaviour is to display the results instantly while you press the key and change the slider.

The behaviour of the input event compared to the change event is not exactly the same when applied to a range slider.

Only solution for this issues is to use onkeydown event using JavaScript and you need to pass this.value in some function so it will take updated value of reange slider.

 
 function updateSlider(slideAmount) {
    var display = document.getElementById("chosen-spacing");
        display.innerHTML = slideAmount;
    }

Read More

Add More Dynamic Repeat Block using Jquery

Sharing demo of add more and remove feature of dynamic block of html using jQuery

First you need to create HTML which you want to repeat. Please make sure naming of elements should be unique which you are using. I was facing issues of naming which is taking same and block was not properly named. So I thought I will help to others for creating dynamic html add more and remove feature in simple way.

I am presenting demo for preparation steps for recipe. Recipes have multiple steps so this steps need to repeat based on your recipe. I have facing issues of repeat fields counter.

I am repeating preparation steps for recipe using jQuery as below

Step 1 : HTML for repeat preparation steps. I have taken one hidden fields for how many steps want to save database and for which next block name would be. (see in attachment block which I want to repeat)

 



                


Recipe Name: *


                        



Preparation Steps: *




STEP 1 







                                        


                                        




Add another step
                            



 

Step 3 : Add jQuery js and on page loading I have set value of totalSteps value as 1 when I click on add another step it will be increment by 1 and update the value in totalSteps hidden value. (see in attachment after adding repeat block in HTML)

    $(document).ready(function () {
        $("#totalSteps").val("1");
         });

    $("#addAnotherStep").click(function () {
        var addStep = parseInt($("#totalSteps").val()) + 1;
        $("#totalSteps").val(addStep)
        var appendStep = '


STEP ' + addStep;
        appendStep += '



';

        appendStep += '












';
        $("#allSteps").append(appendStep);
        for (var i = 2; i < addStep; i++)
        {
            $("#step_" + i + "_heading").children("#removeStep").remove();
        }
    });

Step 4 : Remove other block except first block

    $(document).on("click", "#removeStep", function () {
        $("#dialog").text('');
        $("#dialog").text('Are you sure to remove this step? This cannot be undone.');
        $("#dialog").dialog({
            resizable: false,
            height: 140,
            width: 400,
            modal: true,
            buttons: {
                "Ok": function () {
                    var removeStep = $("#totalSteps").val();
                    $("#" + removeStep).remove();
                    $("#totalSteps").val(parseInt(removeStep) - 1);
                    var lastStep = $("#totalSteps").val();
                    if (lastStep >= 2)
                    {
                        $("#step_" + lastStep + "_heading").prepend('


');
                    }
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
    });

Read More

jQuery Chosen plugin - Dynamically populated list by Ajax (Cascading dropdown)

I am going to Write regarding jQuery Chosen plugin. What is the reason behind writing this blog post, sharing my experience for one of the functionality (Populate list of drop-down using Ajax call) was achieve using jQuery Chosen plugin.
It was little twiky solution for me at moment and their for I had googling and found good solution so for reason I was thinking like why I should not share to other.

So here I am going to share one of the issue. Which was worked on drop-down populate data using Ajax call but somehow it was not render proper CSS after updating drop-down data.

For that purpose had some R&D on that and found the solution for same.

Lets see full demo of code. How to get sub-Category (Cascading dropdown) based on category selection trigger Ajax call and update the list of drop-down using trigger action of jQuery .

Step by step solution:
Step1 :: Add jQuery and chosen jQuery JS file

Step2 :: Call dropdown initialize functions (i.e for Chosen)

        A
        B
        C
        D



       

Step3:: Ajax call for get subcategory and update dropdown using trigger action so css of dropdown bind again.

Happy Coding!

Read More

Mix Razor and Javascript code on MVC 5

Many Developer confused when writing JavaScript code on Razor view at time they need to write mix c# code and Javascript code.

Such scenarios occurs when need to write mix code  on razor view.
lets see example what we are talking and how to resolve.
Just need to add @: before javascript statement.

Hope you are getting and useful.

Read More

JavaScript error SCRIPT1002: Syntax error

SCRIPT1002:Syntax error occurred most probably in Internet Explorer.

First we try to re-procedure the issue writing below code.

    
    


    Click Me!    

Yes, that is the problem. void is an operator, not a function.

Resolution
So instead of javascript:void(), write the # with href and try it. Hopefully it will work.

Read More

Visual Studio 2015 Improvement on JavaScript Editor

Recently, Microsoft has released Visual Studio 2015 IDE with new features.

I am going to write a blog related to JavaScript editor support improvement on Visual Studio 2015.

• Tooling Support for AngularJS: Now a days technologies moving ahead and improvement going on with new release. So its easy to writing app using AngularJS on 2015, its provides more intelliSense suggestions for Angular Controllers, Services, factories, directives and animations.
  
  
• New JavaScript language features: JavaScript has released new version  ES6 with improvement of coding and features. So 2015 has supported including classes, arrow functions and template strings from ES6.
  
  
• Nav bar shared project support: Navigation bar use in the shared project for windows Universal App projects.
  
  
• New navigation bar: Now its easier to navigate between two elements in JavaScript source code using new navigation bar
  
  
• JSDoc comments: A of the best feature of  2015 Visual Studio that supported documentation comments written in the JSDoc format are now display when using intelliSense. (Please visit for more information of JSDoc)
  
  
• Object literal IntelliSense: Now JavaScript editor provide you with more IntelliSense feature for passing object parameter. IntelliSense suggestions when passing an object literal to functions documented using JSDoc.
  
  
• Expand/collapse: Now JavaScript code can be more readable with this feature. This feature support at sections level as well.So now we can expand and collapse JavaScript code sections, including multi-line comments, multi-line arrays, and all multi-line blocks.
  
  
• Task List support: Before release of VS 2015 this feature supported only server side editor but not its support to JavaScript editor as well. it means we can write //TODO and Review Comment section on JavaScript code. which will be list on Task List.
  
  

Above feature are very useful to developer during development. Its provide more intelliSense means save more time and money.

Hope each developer love this feature and useful during developement.

Hope you like this blog so keep reading... !!

Read More

Display India Currency format using JavaScript

function intToFormat(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
var z = 0;
var len = String(x1).length;
var num = parseInt((len/2)-1);

while (rgx.test(x1))
{
if(z > 0)
{
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
else
{
x1 = x1.replace(rgx, '$1' + ',' + '$2');
rgx = /(\d+)(\d{2})/;
}
z++;
num--;
if(num == 0)
{
break;
}
}
return x1 + x2;
}

Read More