![$(“div[id]”) // has attribute
$(“div[dir=‘rtl’]”) // equals to
$(“div[id^=‘main’]”) // starts with
$(“div[id$=‘name’]”) // ends with
$(“a[href*=‘msdn’]”) // contains
$(“div[id]”) // has attribute
$(“div[dir=‘rtl’]”) // equals to
$(“div[id^=‘main’]”) // starts with
$(“div[id$=‘name’]”) // ends with
$(“a[href*=‘msdn’]”) // contains
Attribute Filters](https://image.slidesharecdn.com/jquery-190403124806/85/jQuery-42-320.jpg)
![$(“select[name=‘ddl’] option:selected”).val()$(“select[name=‘ddl’] option:selected”).val()
Find Dropdown Selected Item
<select name=“cities”>
<option value=“1”>Tel-Aviv</option>
<option value=“2” selected=“selected”>Yavne</option>
<option value=“3”>Raanana</option>
</select>
<select name=“cities”>
<option value=“1”>Tel-Aviv</option>
<option value=“2” selected=“selected”>Yavne</option>
<option value=“3”>Raanana</option>
</select>](https://image.slidesharecdn.com/jquery-190403124806/85/jQuery-45-320.jpg)
![$(“div”).get(2) or $(“div”)[2]$(“div”).get(2) or $(“div”)[2]
Returns a 2nd
DOM element of the
selection
Getting a specific DOM element](https://image.slidesharecdn.com/jquery-190403124806/85/jQuery-50-320.jpg)
![// get the value of the checked checkbox
$(“input:checkbox:checked”).val();
// get the value of the checked checkbox
$(“input:checkbox:checked”).val();
Getting and Setting Values
// set the value of the textbox
$(“:text[name=‘txt’]”).val(“Hello”);
// set the value of the textbox
$(“:text[name=‘txt’]”).val(“Hello”);
// select or check lists or checkboxes
$(“#lst”).val([“NY”,”IL”,”NS”]);
// select or check lists or checkboxes
$(“#lst”).val([“NY”,”IL”,”NS”]);](https://image.slidesharecdn.com/jquery-190403124806/85/jQuery-61-320.jpg)
![$.getJSON(“users.aspx”, {id:1},
function(users)
{
alert(users[0].name);
});
$.getJSON(“users.aspx”, {id:1},
function(users)
{
alert(users[0].name);
});
Retrieving JSON Data](https://image.slidesharecdn.com/jquery-190403124806/85/jQuery-95-320.jpg)
![$.expr[‘:’].test = function(o, i, m, s) {
// o – current object in the selection
// i – loop index in the stack
// m – meta data about your selector
// s – stack of all the elements
// return true to include the element
// return false to exclude the element
};
$.expr[‘:’].test = function(o, i, m, s) {
// o – current object in the selection
// i – loop index in the stack
// m – meta data about your selector
// s – stack of all the elements
// return true to include the element
// return false to exclude the element
};
Custom Selectors](https://image.slidesharecdn.com/jquery-190403124806/85/jQuery-101-320.jpg)
Uploaded byNiladri Karmakar
jQuery
The document discusses jQuery, a JavaScript library that simplifies HTML-JavaScript interaction. It introduces core jQuery concepts like selecting elements, manipulating the DOM, and event handling. Key points covered include using jQuery's $() function to select elements, traversing relationships between elements, and modifying attributes and content of elements. The document provides examples of common jQuery tasks like adding and removing classes, inserting new elements, and handling events.
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
jQuery
- 1. The magic ofjquery
- 2. What’s the problem withJavaScript?
- 3. JavaScript was ainitially introduced in Netscape 2.0B3 in Dec 1995, a.k.a. Mocha, LiveScript, Jscript, however, it’s official name is ECMAScript
- 4. JavaScript is aC-family, world’s worst named, extremely powerful language (not a script), totally unrelated to Java
- 5. JavaScript is aweakly typed, classless, prototype based OO language, that can also be used outside the browser. It is not a browser DOM.
- 6. The world’s most misunderstoodprogramming language. (Douglas Crockford)
- 7. Browser DOM reallysucks, and this is where jQuery comes to rescue.
- 8. This session isabout improving your Quality of Life !
- 9.
- 10. $(“#firstName”).text(“Joe Black”); $(“button”).click(function() {alert“Clicked”;}); $(“.content”).hide(); $(“#main”).load(“content.htm”); $(“<div/>”).html(“Loading…”).appendTo(“#content”); $(“#firstName”).text(“Joe Black”); $(“button”).click(function() {alert “Clicked”;}); $(“.content”).hide(); $(“#main”).load(“content.htm”); $(“<div/>”).html(“Loading…”).appendTo(“#content”); A Quality of Life by jQuery: Very compact and fluent programming model
- 11.
- 12. jQuery is alightweight, open- source JavaScript library that simplifies interaction between HTML and JavaScript
- 13. It was andstill being developed by John Resig from Mozilla and was first announced in January 2006
- 14. It has agreat community, great documentation, tons of plugins, and it was recently adopted by Microsoft (how about intellisense in VS?)
- 15. The current versionis 1.7.2 (as of July 2012)
- 16.
- 17. Download the latestversion from http://jquery.com
- 18. To enable itellisensein VS 2008 SP1 install the –vsdoc hotfix: VS90SP1-KB958502-x86.exe
- 19. Copy the jquery.js and the jquery-vsdoc.js intoyour application folder
- 20. No need toreference the –vsdoc.js <script src=“jquery.js”/><script src=“jquery.js”/> Reference it in your markup
- 21. … or justdrag it into the file ///<reference path=“jquery.js”/>///<reference path=“jquery.js”/> Reference it in your JS files:
- 22.
- 23.
- 24. Create HTML elementson the fly var el = $(“<div/>”)var el = $(“<div/>”) The Magic $() function
- 25. Manipulate existing DOMelements $(window).width()$(window).width() The Magic $() function
- 26. Selects document elements (morein a moment…) $(“div”).hide(); $(“div”, $(“p”)).hide(); $(“div”).hide(); $(“div”, $(“p”)).hide(); The Magic $() function
- 27. $(document).ready(function(){…});$(document).ready(function(){…}); Fired when thedocument is ready for programming. Better use the full syntax: $(function(){…});$(function(){…}); The Magic $() function
- 28. It may beused in case of conflict with other frameworks. jQuery(“div”);jQuery(“div”); The full name of $() function is
- 29. jQuery uses closuresfor isolation (function(){ var jQuery=window.jQuery=window.$=function(){ // … }; })(); (function(){ var jQuery=window.jQuery=window.$=function(){ // … }; })(); The library is designed to be isolated
- 30. var foo =jQuery.noConflict(); // now foo() is the jQuery main function foo(“div”).hide(); var foo = jQuery.noConflict(); // now foo() is the jQuery main function foo(“div”).hide(); Avoid $() conflict with other frameworks // remove the conflicting $ and jQuery var foo = jQuery.noConflict(true); // remove the conflicting $ and jQuery var foo = jQuery.noConflict(true);
- 31.
- 32. $(“div”).show() .addClass(“main”) .html(“Hello jQuery”); $(“div”).show() .addClass(“main”) .html(“Hello jQuery”); Almostevery function returns jQuery, which provides a fluent programming interface and chainability:
- 33. Get > Act Chainability The$() function Three Major Concepts of jQuery
- 34.
- 35. $(“*”) // findeverything$(“*”) // find everything All Selector Selectors return a pseudo-array of jQuery elements
- 36. $(“div”) // <div>Hello jQuery</div> $(“div”) //<div>Hello jQuery</div> Basic Selectors Yes, jQuery implements CSS Selectors! $(“#usr”) // <span id=“usr”>John</span> $(“#usr”) // <span id=“usr”>John</span> $(“.menu”) // <ul class=“menu”>Home</ul> $(“.menu”) // <ul class=“menu”>Home</ul> By Tag: By ID: By Class:
- 37. $(“div.main”) // tagand class $(“table#data”) // tag and id $(“div.main”) // tag and class $(“table#data”) // tag and id More Precise Selectors
- 38. // find byid + by class $(“#content, .menu”) // multiple combination $(“h1, h2, h3, div.content”) // find by id + by class $(“#content, .menu”) // multiple combination $(“h1, h2, h3, div.content”) Combination of Selectors
- 39. $(“table td”) //descendants $(“tr > td”) // children $(“label + input”) // next $(“#content ~ div”) // siblings $(“table td”) // descendants $(“tr > td”) // children $(“label + input”) // next $(“#content ~ div”) // siblings Hierarchy Selectors
- 40. $(“tr:first”) // firstelement $(“tr:last”) // last element $(“tr:lt(2)”) // index less than $(“tr:gt(2)”) // index gr. than $(“tr:eq(2)”) // index equals $(“tr:first”) // first element $(“tr:last”) // last element $(“tr:lt(2)”) // index less than $(“tr:gt(2)”) // index gr. than $(“tr:eq(2)”) // index equals Selection Index Filters
- 41. $(“div:visible”) // ifvisible $(“div:hidden”) // if not $(“div:visible”) // if visible $(“div:hidden”) // if not Visibility Filters
- 42. $(“div[id]”) // hasattribute $(“div[dir=‘rtl’]”) // equals to $(“div[id^=‘main’]”) // starts with $(“div[id$=‘name’]”) // ends with $(“a[href*=‘msdn’]”) // contains $(“div[id]”) // has attribute $(“div[dir=‘rtl’]”) // equals to $(“div[id^=‘main’]”) // starts with $(“div[id$=‘name’]”) // ends with $(“a[href*=‘msdn’]”) // contains Attribute Filters
- 43. $(“input:checkbox”) // checkboxes $(“input:radio”)// radio buttons $(“:button”) // buttons $(“:text”) // text inputs $(“input:checkbox”) // checkboxes $(“input:radio”) // radio buttons $(“:button”) // buttons $(“:text”) // text inputs Forms Selectors
- 44. $(“input:checked”) // checked $(“input:selected”)// selected $(“input:enabled”) // enabled $(“input:disabled”) // disabled $(“input:checked”) // checked $(“input:selected”) // selected $(“input:enabled”) // enabled $(“input:disabled”) // disabled Forms Filters
- 45. $(“select[name=‘ddl’] option:selected”).val()$(“select[name=‘ddl’] option:selected”).val() FindDropdown Selected Item <select name=“cities”> <option value=“1”>Tel-Aviv</option> <option value=“2” selected=“selected”>Yavne</option> <option value=“3”>Raanana</option> </select> <select name=“cities”> <option value=“1”>Tel-Aviv</option> <option value=“2” selected=“selected”>Yavne</option> <option value=“3”>Raanana</option> </select>
- 46.
- 48.
- 49. $(“div”).length$(“div”).length Returns number ofselected elements. It is the best way to check selector. A Selector returns a pseudo array of jQuery objects
- 50. $(“div”).get(2) or $(“div”)[2]$(“div”).get(2)or $(“div”)[2] Returns a 2nd DOM element of the selection Getting a specific DOM element
- 51. $(“div”).eq(2)$(“div”).eq(2) Returns a 2nd jQueryelement of the selection Getting a specific jQuery element
- 52. var sum =0; $(“div.number”).each( function(){ sum += (+this.innerHTML); }); var sum = 0; $(“div.number”).each( function(){ sum += (+this.innerHTML); }); this – is a current DOM element each(fn) traverses every selected element calling fn()
- 53. $(“table tr”).each( function(i){ if (i% 2) $(this).addClass(“odd”); }); $(“table tr”).each( function(i){ if (i % 2) $(this).addClass(“odd”); }); $(this) – convert DOM to jQuery i - index of the current element each(fn) also passes an indexer
- 54. .next(expr) // nextsibling .prev(expr) // previous sibling .siblings(expr) // siblings .children(expr) // children .parent(expr) // parent .next(expr) // next sibling .prev(expr) // previous sibling .siblings(expr) // siblings .children(expr) // children .parent(expr) // parent Traversing HTML
- 55. $(“table td”).each(function() { if($(this).is(“:first-child”)) { $(this).addClass(“firstCol”); } }); $(“table td”).each(function() { if ($(this).is(“:first-child”)) { $(this).addClass(“firstCol”); } }); Check for expression
- 56. // select paragraphand then find // elements with class ‘header’ inside $(“p”).find(“.header”).show(); // equivalent to: $(“.header”, $(“p”)).show(); // select paragraph and then find // elements with class ‘header’ inside $(“p”).find(“.header”).show(); // equivalent to: $(“.header”, $(“p”)).show(); Find in selected
- 57. $(“<li><span></span></li>”) // li .find(“span”)// span .html(“About Us”) // span .andSelf() // span, li .addClass(“menu”) // span,li .end() // span .end() // li .appendTo(“ul.main-menu”); $(“<li><span></span></li>”) // li .find(“span”) // span .html(“About Us”) // span .andSelf() // span, li .addClass(“menu”) // span,li .end() // span .end() // li .appendTo(“ul.main-menu”); Advanced Chaining
- 58.
- 59.
- 60. $(“p”).html(“<div>Hello $!</div>”); // escapethe content of div.b $(“div.a”).text($(“div.b”).html()); $(“p”).html(“<div>Hello $!</div>”); // escape the content of div.b $(“div.a”).text($(“div.b”).html()); Getting and Setting Inner Content
- 61. // get thevalue of the checked checkbox $(“input:checkbox:checked”).val(); // get the value of the checked checkbox $(“input:checkbox:checked”).val(); Getting and Setting Values // set the value of the textbox $(“:text[name=‘txt’]”).val(“Hello”); // set the value of the textbox $(“:text[name=‘txt’]”).val(“Hello”); // select or check lists or checkboxes $(“#lst”).val([“NY”,”IL”,”NS”]); // select or check lists or checkboxes $(“#lst”).val([“NY”,”IL”,”NS”]);
- 62. Handling CSS Classes //add and remove class $(“p”).removeClass(“blue”).addClass(“red”); // add and remove class $(“p”).removeClass(“blue”).addClass(“red”); // add if absent, remove otherwise $(“div”).toggleClass(“main”); // add if absent, remove otherwise $(“div”).toggleClass(“main”); // test for class existance if ($(“div”).hasClass(“main”)) { //… } // test for class existance if ($(“div”).hasClass(“main”)) { //… }
- 63. // select >append to the end $(“h1”).append(“<li>Hello $!</li>”); // select > append to the beginning $(“ul”).prepend(“<li>Hello $!</li>”); // select > append to the end $(“h1”).append(“<li>Hello $!</li>”); // select > append to the beginning $(“ul”).prepend(“<li>Hello $!</li>”); Inserting new Elements // create > append/prepend to selector $(“<li/>”).html(“9”).appendTo(“ul”); $(“<li/>”).html(“1”).prependTo(“ul”); // create > append/prepend to selector $(“<li/>”).html(“9”).appendTo(“ul”); $(“<li/>”).html(“1”).prependTo(“ul”);
- 64. // select >replace $(“h1”).replaceWith(“<div>Hello</div>”); // select > replace $(“h1”).replaceWith(“<div>Hello</div>”); Replacing Elements // create > replace selection $(“<div>Hello</div>”).replaceAll(“h1”); // create > replace selection $(“<div>Hello</div>”).replaceAll(“h1”);
- 65. $(“h3”).each(function(){ $(this).replaceWith(“<div>” + $(this).html() + ”</div>”); }); $(“h3”).each(function(){ $(this).replaceWith(“<div>” +$(this).html() + ”</div>”); }); Replacing Elements while keeping the content
- 66. // remove allchildren $(“#mainContent”).empty(); // remove all children $(“#mainContent”).empty(); Deleting Elements // remove selection $(“span.names”).remove(); // remove selection $(“span.names”).remove(); // change position $(“p”).remove(“:not(.red)”) .appendTo(“#main”); // change position $(“p”).remove(“:not(.red)”) .appendTo(“#main”);
- 67. $(“a”).attr(“href”,”home.htm”); // <a href=“home.htm”>…</a> $(“a”).attr(“href”,”home.htm”); //<a href=“home.htm”>…</a> Handling attributes // set the same as the first one $(“button:gt(0)”).attr(“disabled”, $(“button:eq(0)”).attr(“disabled)); // set the same as the first one $(“button:gt(0)”).attr(“disabled”, $(“button:eq(0)”).attr(“disabled)); // remove attribute - enable $(“button”).removeAttr(“disabled”) // remove attribute - enable $(“button”).removeAttr(“disabled”)
- 68. $(“img”).attr({ “src” : “/images/smile.jpg”, “alt”: “Smile”, “width” : 10, “height” : 10 }); $(“img”).attr({ “src” : “/images/smile.jpg”, “alt” : “Smile”, “width” : 10, “height” : 10 }); Setting multiple attributes
- 69. // get style $(“div”).css(“background-color”); //get style $(“div”).css(“background-color”); CSS Manipulations // set style $(“div”).css(“float”, “left”); // set style $(“div”).css(“float”, “left”); // set multiple style properties $(“div”).css({“color”:”blue”, “padding”: “1em” “margin-right”: “0”, marginLeft: “10px”}); // set multiple style properties $(“div”).css({“color”:”blue”, “padding”: “1em” “margin-right”: “0”, marginLeft: “10px”});
- 70. // get windowheight var winHeight = $(window).height(); // set element height $(“#main”).height(winHeight); //.width() – element //.innerWidth() – .width() + padding //.outerWidth() – .innerWidth() + border //.outerWidth(true) – including margin // get window height var winHeight = $(window).height(); // set element height $(“#main”).height(winHeight); //.width() – element //.innerWidth() – .width() + padding //.outerWidth() – .innerWidth() + border //.outerWidth(true) – including margin Dimensions The default unit is Pixel (px)
- 71. // from thedocument $(“div”).offset().top; // from the parent element $(“div”).position().left; // scrolling position $(window).scrollTop(); // from the document $(“div”).offset().top; // from the parent element $(“div”).position().left; // scrolling position $(window).scrollTop(); Positioning
- 72.
- 73. $(document).ready(function(){ //… }); $(document).ready(function(){ //… }); When the DOMis ready… Fires when the document is ready for programming. Uses advanced listeners for detecting. window.onload() is a fallback.
- 74. // execute always $(“div”).bind(“click”,fn); // execute only once $(“div”).one(“click”, fn); // execute always $(“div”).bind(“click”, fn); // execute only once $(“div”).one(“click”, fn); Attach Event Possible event values: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error (or any custom event)
- 75.
- 76. $(“div”).unbind(“click”, fn);$(“div”).unbind(“click”, fn); DetachingEvents (Unique ID added to every attached function)
- 77. $(“div”).trigger(“click”);$(“div”).trigger(“click”); Events Triggering Triggers browser’sevent action as well. Can trigger custom events. Triggered events bubble up.
- 78. // attach /trigger elem.blur(fn) / elem.blur() elem.focus(fn) / elem.focus() elem.click(fn) / elem.click() elem.change(fn) / elem.change() // attach / trigger elem.blur(fn) / elem.blur() elem.focus(fn) / elem.focus() elem.click(fn) / elem.click() elem.change(fn) / elem.change() Events Helpers And many others…
- 79. // use differenttriggering function $(“div”).triggerHandler(“click”); // use different triggering function $(“div”).triggerHandler(“click”); Preventing Browser Default Action // prevent default action in handler function clickHandler(e) { e.preventDefault(); } // prevent default action in handler function clickHandler(e) { e.preventDefault(); } // or just return false function clickHandler(e) {return false;} // or just return false function clickHandler(e) {return false;}
- 80. // stop bubbling,keep other handler function clickHandler(e) { e.stopPropagation(); } // stop bubbling, keep other handler function clickHandler(e) { e.stopPropagation(); } Preventing Bubbling // stop bubbling and other handlers function clickHandler(e) { e.stopImmediatePropagation(); } // stop bubbling and other handlers function clickHandler(e) { e.stopImmediatePropagation(); } // or just return false function clickHandler(e) {return false;} // or just return false function clickHandler(e) {return false;}
- 81. // attach liveevent (“div”).live(“click”, fn); // detach live event (“div”).die(“click”, fn); // attach live event (“div”).live(“click”, fn); // detach live event (“div”).die(“click”, fn); Live Events Currently supported events: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
- 82.
- 83.
- 84. // just show $(“div”).show(); //reveal slowly, slow=600ms $(“div”).show(“slow”); // hide fast, fast=200ms $(“div”).hide(“fast”); // hide or show in 100ms $ (“div”).toggle(100); // just show $(“div”).show(); // reveal slowly, slow=600ms $(“div”).show(“slow”); // hide fast, fast=200ms $(“div”).hide(“fast”); // hide or show in 100ms $ (“div”).toggle(100); Showing or Hiding Element
- 85.
- 86. $(“div”).fadeIn(“fast”); $(“div”).fadeOut(“normal”); // fade toa custom opacity $(“div”).fadeTo (“fast”, 0.5); $(“div”).fadeIn(“fast”); $(“div”).fadeOut(“normal”); // fade to a custom opacity $(“div”).fadeTo (“fast”, 0.5); Fading Elements Fading === changing opacity
- 87. $(“div”).hide(“slow”, function() { alert(“TheDIV is hidden”); }); $(“div”).show(“fast”, function() { $(this).html(“Hello jQuery”); }); // this is a current DOM element $(“div”).hide(“slow”, function() { alert(“The DIV is hidden”); }); $(“div”).show(“fast”, function() { $(this).html(“Hello jQuery”); }); // this is a current DOM element Detecting animation completion Every effect function has a (speed, callback) overload
- 88. // .animate(options, duration) $(“div”).animate({ width:“90%”, opacity: 0.5, borderWidth: “5px” }, 1000); // .animate(options, duration) $(“div”).animate({ width: “90%”, opacity: 0.5, borderWidth: “5px” }, 1000); Custom Animation
- 89. $(“div”).animate({width: “90%”},100) .animate({opacity: 0.5},200) .animate({borderWidth:“5px”}); $(“div”).animate({width: “90%”},100) .animate({opacity: 0.5},200) .animate({borderWidth: “5px”}); Chaining Animation By default animations are queued and than performed one by one
- 90. $(“div”) .animate({width: “90%”}, {queue:false, duration:1000}) .animate({opacity: 0.5}); $(“div”) .animate({width: “90%”}, {queue:false, duration:1000}) .animate({opacity : 0.5}); Controlling Animations Sync The first animation will be performed immediately without queuing
- 91.
- 92.
- 93. $(“div”).load(“content.htm”); // passing parameters $(“#content”).load(“getcontent.aspx”, {“id”:”33”, “type”:”main”}); $(“div”).load(“content.htm”); //passing parameters $(“#content”).load(“getcontent.aspx”, {“id”:”33”, “type”:”main”}); Loading content
- 94. $.get(“test.aspx”, {id:1}, function(data){alert(data);}); $.post(“test.aspx”, {id:1}, function(data){alert(data);}); $.get(“test.aspx”,{id:1}, function(data){alert(data);}); $.post(“test.aspx”, {id:1}, function(data){alert(data);}); Sending GET/POST requests
- 95.
- 96.
- 97.
- 98.
- 99. // definition jQuery.fn.printLine =function(s) { return jQuery(this).each(function() { this.append(“<div>”+ s +“</div>”); }); }; // usage $(“#log”).printLine(“Hello”); // definition jQuery.fn.printLine = function(s) { return jQuery(this).each(function() { this.append(“<div>”+ s +“</div>”); }); }; // usage $(“#log”).printLine(“Hello”); Adding Methods Do not use $ in the method (at least not until next slide)
- 100. (function ($) { jQuery.fn.printLine= function(s) { return $(this).each(function() { this.append(“<div>”+ s +“</div>”); }); }; })(jQuery); (function ($) { jQuery.fn.printLine = function(s) { return $(this).each(function() { this.append(“<div>”+ s +“</div>”); }); }; })(jQuery); Closure to solve the $ issue
- 101. $.expr[‘:’].test = function(o,i, m, s) { // o – current object in the selection // i – loop index in the stack // m – meta data about your selector // s – stack of all the elements // return true to include the element // return false to exclude the element }; $.expr[‘:’].test = function(o, i, m, s) { // o – current object in the selection // i – loop index in the stack // m – meta data about your selector // s – stack of all the elements // return true to include the element // return false to exclude the element }; Custom Selectors
- 102. More Functionality onevery aspect URL parameters parser Browser and features detection Data Cache Utilities Helper functions Various Plug-ins More things to explore
- 103. Niladri Karmakar Phone: 9832495742,9800095111 Email:niladri.17@gmail.com arena1slg@gmail.com Contact me Thank YOU!