JavaScript Design Patterns

Creational Patterns   Abstract Factory Creates an instance of several families of classes   Builder Separates object construction from its representation   Factory Method Creates an instance of sev…

Source: JavaScript Design Patterns

JavaScript Cascade function

In a cascade, we can call many methods on the same object in sequence in a single statement. The trick is that the method itself should only return this. That way, each time you chain these methods…

Source: JavaScript Cascade function

Find Pangram in JS

Pangram is a sentence containing every letter of the alphabet. A simple try in js to find Pangram. DEMO

var i, alphabets = "abcdefghijklmnopqrstuvwxyz";

function isPangramFun() {
    var isPangram = true;
    var input = document.getElementById("inputTxt").value;
    for (i = 0; i < 26; i++) {
        if (input.toLowerCase().indexOf(alphabets[i]) == -1) {
            isPangram = false;
            break;
        }
    }
    alert(isPangram ? "Pangram" : "Not Pangram");
}

Number Animation using jQuery

Number is an important value that we could see in many places, Just a try to make that number look awesome. DEMO

$(function(){
  $('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 2000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
   });
});

Draw a line from x,y with a given angle and length

Draw a line from x,y with a given angle and length. DEMO Fiddle

function drawLine(x1,y1,r,theta){
    ctx.clearRect(0, 0, c.width, c.height);    
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x1 + r * Math.cos(Math.PI * theta / 180.0), y1 + r * Math.sin(Math.PI * theta / 180.0));   
    ctx.closePath();
    ctx.stroke();
  }

Angular Bind Model to Model

I had a scenario, i have to show 4 inputs. In which 4th input is the sum of other 3. this should be easy, but the challenging factor is that i have to save the last input value in a model. So the scenario changed to “Give value for a model from another three model” and the change should be dynamic. Here is the solution i found for that. 🙂 DEMO

<input type="text" ng-model="textInput1" id="textBoxval1" value="temp2"/>
<input type="text" ng-model="textInput2" id="textBoxval2" value="temp2"/>
<input type="text" ng-model="textInput3" id="textBoxval3" value="temp2"/>
<input type="text" ng-model="textInputT" id="textBoxvalT" 
value = "{{textInputT=textInput1 +'-'+ textInput2 +'-'+ textInput3}}"/>