Before starting the tutorial you should know some jQuery history and its features. In order to work with jQuery, you should be aware of the basics of JavaScript, HTML, and CSS.
Chapter 1
jQuery
jQuery is not a language, it is well-written JavaScript code. jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is a fast and concise JavaScript Library created by John Resig in 2006 and it was released in January 2006 at BarCamp NYC.
jQuery core features:
- Ajax support
- Animations
- Cross-browser support
- DOM manipulation
- Event handling
- Lightweight
jQuery advantages:
- Improve the performance of the application
- Develop most browser compatible web page
- Fast and extensible
- UI integrity
Downloading
The jQuery scripting file can be downloaded from the jQuery Official website.
Chapter 2
In this chapter I will show you how to create an interactive game using jQuery, HTML 5 and CSS3 step-by-step. It consists of the following three major parts.
- Creating HTML elements
- Styling with CSS
- Scripting with jQuery
The following figures define the main index page:
Figure 1: Game main index page
The Figure 2 defines the Brain Teaser game process.
Figure 2: Brain teaser grid
Part 1: HTML
Before I start this tutorial, I assume that you are familiar with HTML, CSS and jQuery. I also assume that you understand what jQuery is and how to use it in your pages.
Use basic HTML code to create the HTML elements. The following is the HTML code I used for this tutorial.
The preceding HTML code defines the entire page design. Use a different HTML tag to create the entire page design. It contains three major processes. The first process uses a SELECT tag to create a drop down list with data. The second process uses an INPUT tag to create buttons and the third process is an IMG tag to link with the image destination path.
Part 2: CSS
Now I am moving to the second part. The second part process defines CSS code to make the look and feel for all the HTML elements as we used before in the HTML part. The following is the CSS code I have used in this tutorial.
- <style type="text/css">
- html {
- text-align: center;
- }
-
- body {
- background-color: Aquamarine;
- }
-
- select {
- padding: 3px;
- margin: 0;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
- -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
- box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
- background: #f8f8f8;
- color: #888;
- border: none;
- outline: none;
- display: inline-block;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- cursor: pointer;
- }
-
- @media screen and (-webkit-min-device-pixel-ratio:0) {
- select {
- padding-right: 18px
- }
- }
-
- Label {
- position: relative
- }
-
- label:after {
- content: '<>';
- font: 11px "Consolas", monospace;
- color: #aaa;
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
- right: 8px;
- top: 2px;
- padding: 0 0 2px;
- border-bottom: 1px solid #ddd;
- position: absolute;
- pointer-events: none;
- }
-
- label:before {
- content: '';
- right: 6px;
- top: 0px;
- width: 20px;
- height: 20px;
- background: #f8f8f8;
- position: absolute;
- pointer-events: none;
- display: block;
- }
-
- .styled-button-2 {
- -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
- -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
- box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
- border-bottom-color: #333;
- border: 1px solid #61c4ea;
- background-color: #7cceee;
- border-radius: 5px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- color: #333;
- font-family: 'Verdana', Arial, sans-serif;
- font-size: 14px;
- text-shadow: #b2e2f5 0 1px 0;
- padding: 10px
- }
-
- .styled-button-3 {
- -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
- -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
- box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
- border-bottom-color: #333;
- border: 1px solid #61c4ea;
- background-color: HotPink;
- border-radius: 5px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- color: #333;
- font-family: 'Verdana', Arial, sans-serif;
- font-size: 14px;
- text-shadow: #b2e2f5 0 1px 0;
- padding: 5px
- }
-
- #shuffle > div {
- float: left;
- line-height: 30px;
- width: 30px;
- text-align: center;
- background-color: HotPink;
- color: #fff;
- border-radius: 4px;
- margin: 3px;
- }
-
- #shuffle {
- max-width: 360px;
- }
-
- .web_dialog_overlay {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- height: 100%;
- width: 100%;
- margin: 0;
- padding: 0;
- background: #000000;
- opacity: .15;
- filter: alpha(opacity=15);
- -moz-opacity: .15;
- z-index: 101;
- display: none;
- }
-
- .web_dialog {
- display: none;
- position: fixed;
- width: 390px;
- height: 580px;
- top: 15%;
- left: 50%;
- margin-left: -190px;
- margin-top: -100px;
- background-color: #F5F5F5;
- border: 5px solid #7FFFD4;
- padding: 0px;
- z-index: 102;
- font-family: Verdana;
- font-size: 10pt;
- }
-
- .web_dialog_title {
- border-bottom: solid 5px #7FFFD4;
- background-color: #7FFFD4;
- padding: 5px;
- color: White;
- font-weight: bold;
- }
-
- .web_dialog_title a {
- color: White;
- text-decoration: none;
- }
-
- .align_right {
- text-align: right;
- }
- </style>
Before adding the CSS code be sure it cover the entire browser display area. The preceding CSS code defines the entire HTML element design process.
Part 3
Now I am moving to the third part. This is the final important jQuery scripting code, it makes the HTML element functionalities, effects and animations. The following is the jQuery scripting code I have used in this tutorial.
The first step in the jQuery scripting part is to include the required jQuery library reference in the head element of your page.
- <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
The following is the complete jQuery and JavaScript code I used in this tutorial.
- <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
- <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- var seconds;
- $("#btnShowSimple").click(function(e) {
- $("#output").html("00");
-
- function countdown() {
- seconds = 60;
-
- function tick() {
- var counter = document.getElementById('countdown');
- seconds--;
- counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);
- if (seconds > 0) {
- setTimeout(tick, 1000);
- } else {
- alert("Game over");
- HideDialog();
- }
- }
- tick();
- }
- countdown();
- ShowDialog(true);
- e.preventDefault();
- });
- $("#btnShowModal").click(function(e) {
- function countdown() {
- seconds = 60;
-
- function tick() {
- var counter = document.getElementById('countdown');
- seconds--;
- counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);
- if (seconds > 0) {
- setTimeout(tick, 1000);
- } else {
- alert("Game over");
- HideDialog();
- }
- }
- tick();
- }
- countdown();
- ShowDialog(true);
- e.preventDefault();
- });
- $("#btnClose").click(function(e) {
- HideDialog();
- location.reload();
- e.preventDefault();
- });
- $("#btnSubmit").click(function(e) {
- ShowDialog(false);
- location.reload();
- e.preventDefault();
- });
- $("#shuffle div").hover(function() {
- $(this).css('cursor', 'pointer');
-
- }, function() {
- $(this).css('cursor', 'auto');
- });
- $("#shuffle div").click(function(e) {
- var select = $('#dropDownId :selected').text();
- var Original = ($(this).attr("id"));
- var parent = $("#shuffle");
- var divs = parent.children();
- var Count = 0;
- if (Original == select) {
- $('#output').html(function(i, val) {
- return val * 1 + 1
- });
- }
- while (divs.length) {
- parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
-
- }
- });
- });
-
- function ShowDialog(modal) {
- $("#overlay").show();
- $("#dialog").fadeIn(300);
- if (modal) {
- $("#overlay").unbind("click");
- } else {
- $("#overlay").click(function(e) {
- HideDialog();
- });
- }
- }
-
- function HideDialog() {
- $("#overlay").hide();
- $("#dialog").fadeOut(300);
- }
- </script>
The preceding jQuery scripting code improves the performance of the application and it defines the entire HTML element UI functionality and effects.
Complete code
Following is the complete HTML, CSS and jQuery scripting codes I used in this tutorial.
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="utf-8">
- <style type="text/css">
- html {
- text-align: center;
- }
-
- body {
- background-color: Aquamarine;
- }
-
- select {
- padding: 3px;
- margin: 0;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
- -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
- box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
- background: #f8f8f8;
- color: #888;
- border: none;
- outline: none;
- display: inline-block;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- cursor: pointer;
- }
-
- @media screen and (-webkit-min-device-pixel-ratio:0) {
- select {
- padding-right: 18px
- }
- }
-
- Label {
- position: relative
- }
-
- label:after {
- content: '<>';
- font: 11px "Consolas", monospace;
- color: #aaa;
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
- right: 8px;
- top: 2px;
- padding: 0 0 2px;
- border-bottom: 1px solid #ddd;
- position: absolute;
- pointer-events: none;
- }
-
- label:before {
- content: '';
- right: 6px;
- top: 0px;
- width: 20px;
- height: 20px;
- background: #f8f8f8;
- position: absolute;
- pointer-events: none;
- display: block;
- }
-
- .styled-button-2 {
- -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
- -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
- box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
- border-bottom-color: #333;
- border: 1px solid #61c4ea;
- background-color: #7cceee;
- border-radius: 5px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- color: #333;
- font-family: 'Verdana', Arial, sans-serif;
- font-size: 14px;
- text-shadow: #b2e2f5 0 1px 0;
- padding: 10px
- }
-
- .styled-button-3 {
- -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
- -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
- box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
- border-bottom-color: #333;
- border: 1px solid #61c4ea;
- background-color: HotPink;
- border-radius: 5px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- color: #333;
- font-family: 'Verdana', Arial, sans-serif;
- font-size: 14px;
- text-shadow: #b2e2f5 0 1px 0;
- padding: 5px
- }
-
- #shuffle > div {
- float: left;
- line-height: 30px;
- width: 30px;
- text-align: center;
- background-color: HotPink;
- color: #fff;
- border-radius: 4px;
- margin: 3px;
- }
-
- #shuffle {
- max-width: 360px;
- }
-
- .web_dialog_overlay {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- height: 100%;
- width: 100%;
- margin: 0;
- padding: 0;
- background: #000000;
- opacity: .15;
- filter: alpha(opacity=15);
- -moz-opacity: .15;
- z-index: 101;
- display: none;
- }
-
- .web_dialog {
- display: none;
- position: fixed;
- width: 390px;
- height: 580px;
- top: 15%;
- left: 50%;
- margin-left: -190px;
- margin-top: -100px;
- background-color: #F5F5F5;
- border: 5px solid #7FFFD4;
- padding: 0px;
- z-index: 102;
- font-family: Verdana;
- font-size: 10pt;
- }
-
- .web_dialog_title {
- border-bottom: solid 5px #7FFFD4;
- background-color: #7FFFD4;
- padding: 5px;
- color: White;
- font-weight: bold;
- }
-
- .web_dialog_title a {
- color: White;
- text-decoration: none;
- }
-
- .align_right {
- text-align: right;
- }
- </style>
- <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
- <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- var seconds;
- $("#btnShowSimple").click(function(e) {
- $("#output").html("00");
-
- function countdown() {
- seconds = 60;
-
- function tick() {
- var counter = document.getElementById('countdown');
- seconds--;
- counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);
- if (seconds > 0) {
- setTimeout(tick, 1000);
- } else {
- alert("Game over");
- HideDialog();
- }
- }
- tick();
- }
- countdown();
- ShowDialog(true);
- e.preventDefault();
- });
- $("#btnShowModal").click(function(e) {
- function countdown() {
- seconds = 60;
-
- function tick() {
- var counter = document.getElementById('countdown');
- seconds--;
- counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);
- if (seconds > 0) {
- setTimeout(tick, 1000);
- } else {
- alert("Game over");
- HideDialog();
- }
- }
- tick();
- }
- countdown();
- ShowDialog(true);
- e.preventDefault();
- });
- $("#btnClose").click(function(e) {
- HideDialog();
- location.reload();
- e.preventDefault();
- });
- $("#btnSubmit").click(function(e) {
- ShowDialog(false);
- location.reload();
- e.preventDefault();
- });
- $("#shuffle div").hover(function() {
- $(this).css('cursor', 'pointer');
-
- }, function() {
- $(this).css('cursor', 'auto');
- });
- $("#shuffle div").click(function(e) {
- var select = $('#dropDownId :selected').text();
- var Original = ($(this).attr("id"));
- var parent = $("#shuffle");
- var divs = parent.children();
- var Count = 0;
- if (Original == select) {
- $('#output').html(function(i, val) {
- return val * 1 + 1
- });
- }
- while (divs.length) {
- parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
-
- }
- });
- });
-
- function ShowDialog(modal) {
- $("#overlay").show();
- $("#dialog").fadeIn(300);
- if (modal) {
- $("#overlay").unbind("click");
- } else {
- $("#overlay").click(function(e) {
- HideDialog();
- });
- }
- }
-
- function HideDialog() {
- $("#overlay").hide();
- $("#dialog").fadeOut(300);
- }
- </script>
- </head>
-
- <body>
- <form>
- <img src="Images/bulb_mind_brain_svg-256.png" alt="hi" style="width:256px;height:256px;">
- <br>
- <br>
- <h1>SCORE</h1>
- <h1><div id="output">00</div></h1>
- <p>Choose your number</p>
- <select id="dropDownId">
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- <option value="5">5</option>
- <option value="6">6</option>
- <option value="7">7</option>
- <option value="8">8</option>
- <option value="9">9</option>
- <option value="10">10</option>
- <option value="11">11</option>
- <option value="12">12</option>
- <option value="13">13</option>
- <option value="14">14</option>
- <option value="15">15</option>
- <option value="16">16</option>
- <option value="17">17</option>
- <option value="18">18</option>
- <option value="19">19</option>
- <option value="20">20</option>
- <option value="21">21</option>
- <option value="22">21</option>
- <option value="23">22</option>
- <option value="24">23</option>
- <option value="25">25</option>
- <option value="26">26</option>
- <option value="27">27</option>
- <option value="28">28</option>
- <option value="29">29</option>
- <option value="30">30</option>
- <option value="31">31</option>
- <option value="32">32</option>
- <option value="33">33</option>
- <option value="34">34</option>
- <option value="35">35</option>
- <option value="36">36</option>
- <option value="37">37</option>
- <option value="38">38</option>
- <option value="39">39</option>
- <option value="40">40</option>
- <option value="41">41</option>
- <option value="42">42</option>
- <option value="43">43</option>
- <option value="44">44</option>
- <option value="45">45</option>
- <option value="46">46</option>
- <option value="47">47</option>
- <option value="48">48</option>
- <option value="49">49</option>
- <option value="50">50</option>
- <option value="51">51</option>
- <option value="52">52</option>
- <option value="53">53</option>
- <option value="54">54</option>
- <option value="55">55</option>
- <option value="56">56</option>
- <option value="57">57</option>
- <option value="58">58</option>
- <option value="59">59</option>
- <option value="60">60</option>
- <option value="61">61</option>
- <option value="62">62</option>
- <option value="63">63</option>
- <option value="64">64</option>
- <option value="65">65</option>
- <option value="66">66</option>
- <option value="67">67</option>
- <option value="68">68</option>
- <option value="69">69</option>
- <option value="70">70</option>
- <option value="71">71</option>
- <option value="72">72</option>
- <option value="73">73</option>
- <option value="74">74</option>
- <option value="75">75</option>
- <option value="76">76</option>
- <option value="77">77</option>
- <option value="78">78</option>
- <option value="79">79</option>
- <option value="80">80</option>
- <option value="81">81</option>
- <option value="82">82</option>
- <option value="83">83</option>
- <option value="84">84</option>
- <option value="85">85</option>
- <option value="86">86</option>
- <option value="87">87</option>
- <option value="88">88</option>
- <option value="89">89</option>
- <option value="90">90</option>
- <option value="91">91</option>
- <option value="92">92</option>
- <option value="93">93</option>
- <option value="94">94</option>
- <option value="95">95</option>
- <option value="96">96</option>
- <option value="97">97</option>
- <option value="98">98</option>
- <option value="99">99</option>
- <option value="100">100</option>
- </select>
- <br>
- <br>
- <br>
- <input type="button" class="styled-button-2" id="btnShowSimple" value="START" />
- <input type="button" class="styled-button-2" id="btnShowModal" value="RESTART" />
- <br />
- <br />
- <div id="output"></div>
- <div id="overlay" class="web_dialog_overlay"></div>
- <div id="dialog" class="web_dialog">
- <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
- <tr>
- <td class="web_dialog_title">Find your number ?</td>
- <td class="web_dialog_title align_right">
- <a href="#" id="btnClose">Close</a>
- </td>
- </tr>
- <td> </td>
- <td> </td>
- <tr>
- <td>
- Time Left <b id="countdown"></b> seconds
- <img src="Images/Alarm.png" alt="Timer" style="width:48px;height:48px;">
- </td>
- </tr>
- <tr>
- <td> </td>
- </tr>
- <tr>
- <td colspan="2" style="padding-left: 15px;">
- </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td colspan="2" style="padding-left: 15px;">
- <div id="shuffle">
- <div id=1>1</div>
- <div id=2>2</div>
- <div id=3>3</div>
- <div id=4>4</div>
- <div id=5>5</div>
- <div id=6>6</div>
- <div id=7>7</div>
- <div id=8>8</div>
- <div id=9>9</div>
- <div id=10>10</div>
- <div id=11>11</div>
- <div id=12>12</div>
- <div id=13>13</div>
- <div id=14>14</div>
- <div id=15>15</div>
- <div id=16>16</div>
- <div id=17>17</div>
- <div id=18>18</div>
- <div id=19>19</div>
- <div id=20>20</div>
- <div id=21>21</div>
- <div id=22>22</div>
- <div id=23>23</div>
- <div id=24>24</div>
- <div id=25>25</div>
- <div id=26>26</div>
- <div id=27>27</div>
- <div id=28>28</div>
- <div id=29>29</div>
- <div id=30>30</div>
- <div id=31>31</div>
- <div id=32>32</div>
- <div id=33>33</div>
- <div id=34>34</div>
- <div id=35>35</div>
- <div id=36>36</div>
- <div id=37>37</div>
- <div id=38>38</div>
- <div id=39>39</div>
- <div id=40>40</div>
- <div id=41>41</div>
- <div id=42>42</div>
- <div id=43>43</div>
- <div id=44>44</div>
- <div id=45>45</div>
- <div id=46>46</div>
- <div id=47>47</div>
- <div id=48>48</div>
- <div id=49>49</div>
- <div id=50>50</div>
- <div id=51>51</div>
- <div id=52>52</div>
- <div id=53>53</div>
- <div id=54>54</div>
- <div id=55>55</div>
- <div id=56>56</div>
- <div id=57>57</div>
- <div id=58>58</div>
- <div id=59>59</div>
- <div id=60>60</div>
- <div id=61>61</div>
- <div id=62>62</div>
- <div id=63>63</div>
- <div id=64>64</div>
- <div id=65>65</div>
- <div id=66>66</div>
- <div id=67>67</div>
- <div id=68>68</div>
- <div id=69>69</div>
- <div id=70>70</div>
- <div id=71>71</div>
- <div id=72>72</div>
- <div id=73>73</div>
- <div id=74>74</div>
- <div id=75>75</div>
- <div id=76>76</div>
- <div id=77>77</div>
- <div id=78>78</div>
- <div id=79>79</div>
- <div id=80>80</div>
- <div id=81>81</div>
- <div id=82>82</div>
- <div id=83>83</div>
- <div id=84>84</div>
- <div id=85>85</div>
- <div id=86>86</div>
- <div id=87>87</div>
- <div id=88>88</div>
- <div id=89>89</div>
- <div id=90>90</div>
- <div id=91>91</div>
- <div id=92>92</div>
- <div id=93>93</div>
- <div id=94>94</div>
- <div id=95>95</div>
- <div id=96>96</div>
- <div id=97>97</div>
- <div id=98>98</div>
- <div id=99>99</div>
- <div id=100>100</div>
- </div>
- </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td colspan="2" style="text-align: center;">
- <input id="btnSubmit" class="styled-button-3" type="button" value="Exit" />
- </td>
- </tr>
- </table>
- </div>
- </form>
- </body </html>
Output
- Open the main Index html file in web browser.
Figure 3: Game main index page
- Select any number in the drop down select box then press the Start button. If you played already then press the Restart button.
- Find your number in the number grid.
Figure 4: Find number popup window
Figure 5: Find number with time left alert
Figure 6: Game over alert window
Figure 7: Game main page with score
Conclusion
I hope you liked this useful article. It will be useful for jQuery beginners and developers. Please provide your valuable feedback and suggestions.
Live demo:
Game Link: Jsfiddle.
References:
- http://www.w3schools.com/jquery/
- http://www.tutorialspoint.com/jquery/
- http://www.jquery-tutorial.net/
Sr KarthigaPosted Feb 26, 2016, 9:38 AM
good one
Sr KarthigaPosted Feb 26, 2016, 9:38 AM
nice explanation
Gowtham RajamanickamPosted Jan 5, 2016, 7:27 AM
Good article
Karthikeyan KPosted Sep 11, 2015, 4:34 AM
Thanks bro :)
Jithil JohnPosted Sep 11, 2015, 4:15 AM
Good one
Karthikeyan KPosted Sep 2, 2015, 12:05 AM
Thank you Gunavadhi A S
Gunavadhi A SPosted Sep 2, 2015, 12:04 AM
Good
Karthikeyan KPosted Aug 25, 2015, 2:43 AM
Thank you Vaikesh K P sir
Vaikesh K PPosted Aug 25, 2015, 2:37 AM
Nice
Karthikeyan KPosted Aug 25, 2015, 2:00 AM
Thank you Upendra Pratap Shahi sir
Upendra Pratap ShahiPosted Aug 25, 2015, 1:43 AM
very nice Karthikeyan K.....keep it up..
Karthikeyan KPosted Aug 24, 2015, 11:21 PM
Thank you Gowtham sir
Karthikeyan KPosted Aug 24, 2015, 11:20 PM
Thank you Ravivarma Balakrishnan sir
Ravivarma BalakrishnanPosted Aug 24, 2015, 4:09 PM
Good One...
Gowtham KPosted Aug 24, 2015, 2:39 PM
Good one
Karthikeyan KPosted Aug 24, 2015, 1:21 PM
Thank you Shridhar Sharma sir
Shridhar SharmaPosted Aug 24, 2015, 12:52 PM
nice one Karthikeyan K :)
Karthikeyan KPosted Aug 24, 2015, 10:09 AM
Thank you Sumit Joshi sir
Sumit JoshiPosted Aug 24, 2015, 9:55 AM
thanks for sharing...
Karthikeyan KPosted Aug 24, 2015, 9:24 AM
Thank you Sibeesh Venu sir
Sibeesh VenuPosted Aug 24, 2015, 9:22 AM
Nice Share :)
Karthikeyan KPosted Aug 24, 2015, 8:39 AM
Thank you Gowtham sir for your valuable feedback
Gowtham RajamanickamPosted Aug 24, 2015, 7:24 AM
great effort...
Gowtham RajamanickamPosted Aug 24, 2015, 7:23 AM
simlpy awesome.,...
Karthikeyan KPosted Aug 24, 2015, 7:09 AM
Thank you Yashwanth Muthineni sir
Karthikeyan KPosted Aug 24, 2015, 7:09 AM
Thank you Rakesh Chavda sir
Karthikeyan KPosted Aug 24, 2015, 7:09 AM
Thank you Mohammed Ibrahim sir
Karthikeyan KPosted Aug 24, 2015, 7:08 AM
Thank you Rajeesh Menoth sir
Yashwanth MuthineniPosted Aug 24, 2015, 7:05 AM
Nice Explanation
RakeshPosted Aug 24, 2015, 7:00 AM
Good work
Mohammed IbrahimPosted Aug 24, 2015, 6:41 AM
nice work
Rajeesh MenothPosted Aug 24, 2015, 6:28 AM
Good Karthikeyan K...