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}}"/>

Placing Items on a Circle

It can be quite challenging to place items on a circle, But with some help from maths we can 🙂 … DEMO

var radius = 200;
var fields = $('.field'), container = $('#container'),
    width = container.width(), height = container.height(),
    angle = 0, step = (2*Math.PI) / fields.length;
fields.each(function() {
    var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
    var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
    if (window.console) {
        console.log($(this).text(), x, y);
    }
    $(this).css({
        left: x + 'px',
        top: y + 'px'
    });
    angle += step;
});

Google – Get Direction

This example gives you a direction from origin to destination. First adds a search box to a map, using the Google Place Autocomplete feature. People can enter geographical searches. The search box will return a pick list containing a mix of places and predicted search terms. Then sending the search values to google “directionsService” you can get the direction. Then send the api response to “directionsDisplay” to draw the route. DEMO

function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -33.8688,
            lng: 151.2195
        },
        zoom: 13,
        mapTypeId: 'roadmap'
    });
    directionsDisplay.setMap(map);

    // Create the search box and link it to the UI element.
    var inputO = document.getElementById('pac-input-origin');
    var inputD = document.getElementById('pac-input-dest');
    searchBoxO = new google.maps.places.SearchBox(inputO);
    searchBoxD = new google.maps.places.SearchBox(inputD);

    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBoxO.addListener('places_changed', function() {
        onChangeHandler();
    });
    searchBoxD.addListener('places_changed', function() {
        onChangeHandler();
    });

    var onChangeHandler = function() {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var placesO = searchBoxO.getPlaces();
    var placesD = searchBoxD.getPlaces();
    if (!placesO || !placesD || placesO.length == 0 || placesD.length == 0) {
        return;
    }
    directionsService.route({
        origin: {
            lat: placesO[0].geometry.location.lat(),
            lng: placesO[0].geometry.location.lng()
        },
        destination: {
            lat: placesD[0].geometry.location.lat(),
            lng: placesD[0].geometry.location.lng()
        },
        travelMode: 'DRIVING'
    }, function(response, status) {
        console.log(response);
        document.getElementById("distLen").value = response.routes[0].legs[0].distance.text;
        document.getElementById("timeLen").value = response.routes[0].legs[0].duration.text;
        if (status === 'OK') {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}