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.

  1. Creating HTML elements
  2. Styling with CSS
  3. Scripting with jQuery

The following figures define the main index page:

main index page
Figure 1: Game main index page

The Figure 2 defines the Brain Teaser game process.

Brain teaser grid
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.

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. </head>
  8. <body>
  9. <form>
  10. <img src="Images/bulb_mind_brain_svg-256.png" alt="hi" style="width:256px;height:256px;">
  11. <br>
  12. <br>
  13. <h1>SCORE</h1>
  14. <h1><div id="output">00</div></h1>
  15. <p>Choose your number</p>
  16. <select id="dropDownId">
  17. <option value="1">1</option>
  18. <option value="2">2</option>
  19. <option value="3">3</option>
  20. <option value="4">4</option>
  21. <option value="5">5</option>
  22. <option value="6">6</option>
  23. <option value="7">7</option>
  24. <option value="8">8</option>
  25. <option value="9">9</option>
  26. <option value="10">10</option>
  27. <option value="11">11</option>
  28. <option value="12">12</option>
  29. <option value="13">13</option>
  30. <option value="14">14</option>
  31. <option value="15">15</option>
  32. <option value="16">16</option>
  33. <option value="17">17</option>
  34. <option value="18">18</option>
  35. <option value="19">19</option>
  36. <option value="20">20</option>
  37. <option value="21">21</option>
  38. <option value="22">21</option>
  39. <option value="23">22</option>
  40. <option value="24">23</option>
  41. <option value="25">25</option>
  42. <option value="26">26</option>
  43. <option value="27">27</option>
  44. <option value="28">28</option>
  45. <option value="29">29</option>
  46. <option value="30">30</option>
  47. <option value="31">31</option>
  48. <option value="32">32</option>
  49. <option value="33">33</option>
  50. <option value="34">34</option>
  51. <option value="35">35</option>
  52. <option value="36">36</option>
  53. <option value="37">37</option>
  54. <option value="38">38</option>
  55. <option value="39">39</option>
  56. <option value="40">40</option>
  57. <option value="41">41</option>
  58. <option value="42">42</option>
  59. <option value="43">43</option>
  60. <option value="44">44</option>
  61. <option value="45">45</option>
  62. <option value="46">46</option>
  63. <option value="47">47</option>
  64. <option value="48">48</option>
  65. <option value="49">49</option>
  66. <option value="50">50</option>
  67. <option value="51">51</option>
  68. <option value="52">52</option>
  69. <option value="53">53</option>
  70. <option value="54">54</option>
  71. <option value="55">55</option>
  72. <option value="56">56</option>
  73. <option value="57">57</option>
  74. <option value="58">58</option>
  75. <option value="59">59</option>
  76. <option value="60">60</option>
  77. <option value="61">61</option>
  78. <option value="62">62</option>
  79. <option value="63">63</option>
  80. <option value="64">64</option>
  81. <option value="65">65</option>
  82. <option value="66">66</option>
  83. <option value="67">67</option>
  84. <option value="68">68</option>
  85. <option value="69">69</option>
  86. <option value="70">70</option>
  87. <option value="71">71</option>
  88. <option value="72">72</option>
  89. <option value="73">73</option>
  90. <option value="74">74</option>
  91. <option value="75">75</option>
  92. <option value="76">76</option>
  93. <option value="77">77</option>
  94. <option value="78">78</option>
  95. <option value="79">79</option>
  96. <option value="80">80</option>
  97. <option value="81">81</option>
  98. <option value="82">82</option>
  99. <option value="83">83</option>
  100. <option value="84">84</option>
  101. <option value="85">85</option>
  102. <option value="86">86</option>
  103. <option value="87">87</option>
  104. <option value="88">88</option>
  105. <option value="89">89</option>
  106. <option value="90">90</option>
  107. <option value="91">91</option>
  108. <option value="92">92</option>
  109. <option value="93">93</option>
  110. <option value="94">94</option>
  111. <option value="95">95</option>
  112. <option value="96">96</option>
  113. <option value="97">97</option>
  114. <option value="98">98</option>
  115. <option value="99">99</option>
  116. <option value="100">100</option>
  117. </select>
  118. <br>
  119. <br>
  120. <br>
  121. <input type="button" class="styled-button-2" id="btnShowSimple" value="START" />
  122. <input type="button" class="styled-button-2" id="btnShowModal" value="RESTART" />
  123. <br />
  124. <br />
  125. <div id="output"></div>
  126. <div id="overlay" class="web_dialog_overlay"></div>
  127. <div id="dialog" class="web_dialog">
  128. <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
  129. <tr>
  130. <td class="web_dialog_title">Find your number ?</td>
  132. <td class="web_dialog_title align_right">
  133. <a href="#" id="btnClose">Close</a>
  134. </td>
  135. </tr>
  136. <td> </td>
  137. <td> </td>
  138. <tr>
  139. <td>
  140. Time Left <b id="countdown"></b> seconds
  141. <img src="Images/Alarm.png" alt="Timer" style="width:48px;height:48px;">
  142. </td>
  143. </tr>
  144. <tr>
  145. <td> </td>
  146. </tr>
  147. <tr>
  148. <td colspan="2" style="padding-left: 15px;">
  149. </td>
  150. </tr>
  151. <tr>
  152. <td> </td>
  153. <td> </td>
  154. </tr>
  155. <tr>
  156. <td colspan="2" style="padding-left: 15px;">
  157. <div id="shuffle">
  158. <div id=1>1</div>
  159. <div id=2>2</div>
  160. <div id=3>3</div>
  161. <div id=4>4</div>
  162. <div id=5>5</div>
  163. <div id=6>6</div>
  164. <div id=7>7</div>
  165. <div id=8>8</div>
  166. <div id=9>9</div>
  167. <div id=10>10</div>
  168. <div id=11>11</div>
  169. <div id=12>12</div>
  170. <div id=13>13</div>
  171. <div id=14>14</div>
  172. <div id=15>15</div>
  173. <div id=16>16</div>
  174. <div id=17>17</div>
  175. <div id=18>18</div>
  176. <div id=19>19</div>
  177. <div id=20>20</div>
  178. <div id=21>21</div>
  179. <div id=22>22</div>
  180. <div id=23>23</div>
  181. <div id=24>24</div>
  182. <div id=25>25</div>
  183. <div id=26>26</div>
  184. <div id=27>27</div>
  185. <div id=28>28</div>
  186. <div id=29>29</div>
  187. <div id=30>30</div>
  188. <div id=31>31</div>
  189. <div id=32>32</div>
  190. <div id=33>33</div>
  191. <div id=34>34</div>
  192. <div id=35>35</div>
  193. <div id=36>36</div>
  194. <div id=37>37</div>
  195. <div id=38>38</div>
  196. <div id=39>39</div>
  197. <div id=40>40</div>
  198. <div id=41>41</div>
  199. <div id=42>42</div>
  200. <div id=43>43</div>
  201. <div id=44>44</div>
  202. <div id=45>45</div>
  203. <div id=46>46</div>
  204. <div id=47>47</div>
  205. <div id=48>48</div>
  206. <div id=49>49</div>
  207. <div id=50>50</div>
  208. <div id=51>51</div>
  209. <div id=52>52</div>
  210. <div id=53>53</div>
  211. <div id=54>54</div>
  212. <div id=55>55</div>
  213. <div id=56>56</div>
  214. <div id=57>57</div>
  215. <div id=58>58</div>
  216. <div id=59>59</div>
  217. <div id=60>60</div>
  218. <div id=61>61</div>
  219. <div id=62>62</div>
  220. <div id=63>63</div>
  221. <div id=64>64</div>
  222. <div id=65>65</div>
  223. <div id=66>66</div>
  224. <div id=67>67</div>
  225. <div id=68>68</div>
  226. <div id=69>69</div>
  227. <div id=70>70</div>
  228. <div id=71>71</div>
  229. <div id=72>72</div>
  230. <div id=73>73</div>
  231. <div id=74>74</div>
  232. <div id=75>75</div>
  233. <div id=76>76</div>
  234. <div id=77>77</div>
  235. <div id=78>78</div>
  236. <div id=79>79</div>
  237. <div id=80>80</div>
  238. <div id=81>81</div>
  239. <div id=82>82</div>
  240. <div id=83>83</div>
  241. <div id=84>84</div>
  242. <div id=85>85</div>
  243. <div id=86>86</div>
  244. <div id=87>87</div>
  245. <div id=88>88</div>
  246. <div id=89>89</div>
  247. <div id=90>90</div>
  248. <div id=91>91</div>
  249. <div id=92>92</div>
  250. <div id=93>93</div>
  251. <div id=94>94</div>
  252. <div id=95>95</div>
  253. <div id=96>96</div>
  254. <div id=97>97</div>
  255. <div id=98>98</div>
  256. <div id=99>99</div>
  257. <div id=100>100</div>
  258. </div>
  259. </td>
  260. </tr>
  261. <tr>
  262. <td> </td>
  263. <td> </td>
  264. </tr>
  265. <tr>
  266. <td colspan="2" style="text-align: center;">
  267. <input id="btnSubmit" class="styled-button-3" type="button" value="Exit" />
  268. </td>
  269. </tr>
  270. </table>
  271. </div>
  272. </form>
  273. </body </html>
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.
  1. <style type="text/css">
  2. html {
  3. text-align: center;
  4. }
  6. body {
  7. background-color: Aquamarine;
  8. }
  10. select {
  11. padding: 3px;
  12. margin: 0;
  13. -webkit-border-radius: 4px;
  14. -moz-border-radius: 4px;
  15. border-radius: 4px;
  16. -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
  17. -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
  18. box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
  19. background: #f8f8f8;
  20. color: #888;
  21. border: none;
  22. outline: none;
  23. display: inline-block;
  24. -webkit-appearance: none;
  25. -moz-appearance: none;
  26. appearance: none;
  27. cursor: pointer;
  28. }
  30. @media screen and (-webkit-min-device-pixel-ratio:0) {
  31. select {
  32. padding-right: 18px
  33. }
  34. }
  36. Label {
  37. position: relative
  38. }
  40. label:after {
  41. content: '<>';
  42. font: 11px "Consolas", monospace;
  43. color: #aaa;
  44. -webkit-transform: rotate(90deg);
  45. -moz-transform: rotate(90deg);
  46. -ms-transform: rotate(90deg);
  47. transform: rotate(90deg);
  48. right: 8px;
  49. top: 2px;
  50. padding: 0 0 2px;
  51. border-bottom: 1px solid #ddd;
  52. position: absolute;
  53. pointer-events: none;
  54. }
  56. label:before {
  57. content: '';
  58. right: 6px;
  59. top: 0px;
  60. width: 20px;
  61. height: 20px;
  62. background: #f8f8f8;
  63. position: absolute;
  64. pointer-events: none;
  65. display: block;
  66. }
  68. .styled-button-2 {
  69. -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
  70. -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
  71. box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
  72. border-bottom-color: #333;
  73. border: 1px solid #61c4ea;
  74. background-color: #7cceee;
  75. border-radius: 5px;
  76. -moz-border-radius: 5px;
  77. -webkit-border-radius: 5px;
  78. color: #333;
  79. font-family: 'Verdana', Arial, sans-serif;
  80. font-size: 14px;
  81. text-shadow: #b2e2f5 0 1px 0;
  82. padding: 10px
  83. }
  85. .styled-button-3 {
  86. -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
  87. -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
  88. box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
  89. border-bottom-color: #333;
  90. border: 1px solid #61c4ea;
  91. background-color: HotPink;
  92. border-radius: 5px;
  93. -moz-border-radius: 5px;
  94. -webkit-border-radius: 5px;
  95. color: #333;
  96. font-family: 'Verdana', Arial, sans-serif;
  97. font-size: 14px;
  98. text-shadow: #b2e2f5 0 1px 0;
  99. padding: 5px
  100. }
  102. #shuffle > div {
  103. float: left;
  104. line-height: 30px;
  105. width: 30px;
  106. text-align: center;
  107. background-color: HotPink;
  108. color: #fff;
  109. border-radius: 4px;
  110. margin: 3px;
  111. }
  113. #shuffle {
  114. max-width: 360px;
  115. }
  117. .web_dialog_overlay {
  118. position: fixed;
  119. top: 0;
  120. right: 0;
  121. bottom: 0;
  122. left: 0;
  123. height: 100%;
  124. width: 100%;
  125. margin: 0;
  126. padding: 0;
  127. background: #000000;
  128. opacity: .15;
  129. filter: alpha(opacity=15);
  130. -moz-opacity: .15;
  131. z-index: 101;
  132. display: none;
  133. }
  135. .web_dialog {
  136. display: none;
  137. position: fixed;
  138. width: 390px;
  139. height: 580px;
  140. top: 15%;
  141. left: 50%;
  142. margin-left: -190px;
  143. margin-top: -100px;
  144. background-color: #F5F5F5;
  145. border: 5px solid #7FFFD4;
  146. padding: 0px;
  147. z-index: 102;
  148. font-family: Verdana;
  149. font-size: 10pt;
  150. }
  152. .web_dialog_title {
  153. border-bottom: solid 5px #7FFFD4;
  154. background-color: #7FFFD4;
  155. padding: 5px;
  156. color: White;
  157. font-weight: bold;
  158. }
  160. .web_dialog_title a {
  161. color: White;
  162. text-decoration: none;
  163. }
  165. .align_right {
  166. text-align: right;
  167. }
  168. </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.
  1. <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.
  1. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  2. <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function() {
  5. var seconds;
  6. $("#btnShowSimple").click(function(e) {
  7. $("#output").html("00");
  9. function countdown() {
  10. seconds = 60;
  12. function tick() {
  13. var counter = document.getElementById('countdown');
  14. seconds--;
  15. counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);
  16. if (seconds > 0) {
  17. setTimeout(tick, 1000);
  18. } else {
  19. alert("Game over");
  20. HideDialog();
  21. }
  22. }
  23. tick();
  24. }
  25. countdown();
  26. ShowDialog(true);
  27. e.preventDefault();
  28. });
  29. $("#btnShowModal").click(function(e) {
  30. function countdown() {
  31. seconds = 60;
  33. function tick() {
  34. var counter = document.getElementById('countdown');
  35. seconds--;
  36. counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);
  37. if (seconds > 0) {
  38. setTimeout(tick, 1000);
  39. } else {
  40. alert("Game over");
  41. HideDialog();
  42. }
  43. }
  44. tick();
  45. }
  46. countdown();
  47. ShowDialog(true);
  48. e.preventDefault();
  49. });
  50. $("#btnClose").click(function(e) {
  51. HideDialog();
  52. location.reload();
  53. e.preventDefault();
  54. });
  55. $("#btnSubmit").click(function(e) {
  56. ShowDialog(false);
  57. location.reload();
  58. e.preventDefault();
  59. });
  60. $("#shuffle div").hover(function() {
  61. $(this).css('cursor', 'pointer');
  63. }, function() {
  64. $(this).css('cursor', 'auto');
  65. });
  66. $("#shuffle div").click(function(e) {
  67. var select = $('#dropDownId :selected').text();
  68. var Original = ($(this).attr("id"));
  69. var parent = $("#shuffle");
  70. var divs = parent.children();
  71. var Count = 0;
  72. if (Original == select) {
  73. $('#output').html(function(i, val) {
  74. return val * 1 + 1
  75. });
  76. }
  77. while (divs.length) {
  78. parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
  80. }
  81. });
  82. });
  84. function ShowDialog(modal) {
  85. $("#overlay").show();
  86. $("#dialog").fadeIn(300);
  87. if (modal) {
  88. $("#overlay").unbind("click");
  89. } else {
  90. $("#overlay").click(function(e) {
  91. HideDialog();
  92. });
  93. }
  94. }
  96. function HideDialog() {
  97. $("#overlay").hide();
  98. $("#dialog").fadeOut(300);
  99. }
  100. </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.
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <style type="text/css">
  7. html {
  8. text-align: center;
  9. }
  11. body {
  12. background-color: Aquamarine;
  13. }
  15. select {
  16. padding: 3px;
  17. margin: 0;
  18. -webkit-border-radius: 4px;
  19. -moz-border-radius: 4px;
  20. border-radius: 4px;
  21. -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
  22. -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
  23. box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
  24. background: #f8f8f8;
  25. color: #888;
  26. border: none;
  27. outline: none;
  28. display: inline-block;
  29. -webkit-appearance: none;
  30. -moz-appearance: none;
  31. appearance: none;
  32. cursor: pointer;
  33. }
  35. @media screen and (-webkit-min-device-pixel-ratio:0) {
  36. select {
  37. padding-right: 18px
  38. }
  39. }
  41. Label {
  42. position: relative
  43. }
  45. label:after {
  46. content: '<>';
  47. font: 11px "Consolas", monospace;
  48. color: #aaa;
  49. -webkit-transform: rotate(90deg);
  50. -moz-transform: rotate(90deg);
  51. -ms-transform: rotate(90deg);
  52. transform: rotate(90deg);
  53. right: 8px;
  54. top: 2px;
  55. padding: 0 0 2px;
  56. border-bottom: 1px solid #ddd;
  57. position: absolute;
  58. pointer-events: none;
  59. }
  61. label:before {
  62. content: '';
  63. right: 6px;
  64. top: 0px;
  65. width: 20px;
  66. height: 20px;
  67. background: #f8f8f8;
  68. position: absolute;
  69. pointer-events: none;
  70. display: block;
  71. }
  73. .styled-button-2 {
  74. -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
  75. -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
  76. box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
  77. border-bottom-color: #333;
  78. border: 1px solid #61c4ea;
  79. background-color: #7cceee;
  80. border-radius: 5px;
  81. -moz-border-radius: 5px;
  82. -webkit-border-radius: 5px;
  83. color: #333;
  84. font-family: 'Verdana', Arial, sans-serif;
  85. font-size: 14px;
  86. text-shadow: #b2e2f5 0 1px 0;
  87. padding: 10px
  88. }
  90. .styled-button-3 {
  91. -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
  92. -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
  93. box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
  94. border-bottom-color: #333;
  95. border: 1px solid #61c4ea;
  96. background-color: HotPink;
  97. border-radius: 5px;
  98. -moz-border-radius: 5px;
  99. -webkit-border-radius: 5px;
  100. color: #333;
  101. font-family: 'Verdana', Arial, sans-serif;
  102. font-size: 14px;
  103. text-shadow: #b2e2f5 0 1px 0;
  104. padding: 5px
  105. }
  107. #shuffle > div {
  108. float: left;
  109. line-height: 30px;
  110. width: 30px;
  111. text-align: center;
  112. background-color: HotPink;
  113. color: #fff;
  114. border-radius: 4px;
  115. margin: 3px;
  116. }
  118. #shuffle {
  119. max-width: 360px;
  120. }
  122. .web_dialog_overlay {
  123. position: fixed;
  124. top: 0;
  125. right: 0;
  126. bottom: 0;
  127. left: 0;
  128. height: 100%;
  129. width: 100%;
  130. margin: 0;
  131. padding: 0;
  132. background: #000000;
  133. opacity: .15;
  134. filter: alpha(opacity=15);
  135. -moz-opacity: .15;
  136. z-index: 101;
  137. display: none;
  138. }
  140. .web_dialog {
  141. display: none;
  142. position: fixed;
  143. width: 390px;
  144. height: 580px;
  145. top: 15%;
  146. left: 50%;
  147. margin-left: -190px;
  148. margin-top: -100px;
  149. background-color: #F5F5F5;
  150. border: 5px solid #7FFFD4;
  151. padding: 0px;
  152. z-index: 102;
  153. font-family: Verdana;
  154. font-size: 10pt;
  155. }
  157. .web_dialog_title {
  158. border-bottom: solid 5px #7FFFD4;
  159. background-color: #7FFFD4;
  160. padding: 5px;
  161. color: White;
  162. font-weight: bold;
  163. }
  165. .web_dialog_title a {
  166. color: White;
  167. text-decoration: none;
  168. }
  170. .align_right {
  171. text-align: right;
  172. }
  173. </style>
  174. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  175. <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  176. <script type="text/javascript">
  177. $(document).ready(function() {
  178. var seconds;
  179. $("#btnShowSimple").click(function(e) {
  180. $("#output").html("00");
  182. function countdown() {
  183. seconds = 60;
  185. function tick() {
  186. var counter = document.getElementById('countdown');
  187. seconds--;
  188. counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);
  189. if (seconds > 0) {
  190. setTimeout(tick, 1000);
  191. } else {
  192. alert("Game over");
  193. HideDialog();
  194. }
  195. }
  196. tick();
  197. }
  198. countdown();
  199. ShowDialog(true);
  200. e.preventDefault();
  201. });
  202. $("#btnShowModal").click(function(e) {
  203. function countdown() {
  204. seconds = 60;
  206. function tick() {
  207. var counter = document.getElementById('countdown');
  208. seconds--;
  209. counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);
  210. if (seconds > 0) {
  211. setTimeout(tick, 1000);
  212. } else {
  213. alert("Game over");
  214. HideDialog();
  215. }
  216. }
  217. tick();
  218. }
  219. countdown();
  220. ShowDialog(true);
  221. e.preventDefault();
  222. });
  223. $("#btnClose").click(function(e) {
  224. HideDialog();
  225. location.reload();
  226. e.preventDefault();
  227. });
  228. $("#btnSubmit").click(function(e) {
  229. ShowDialog(false);
  230. location.reload();
  231. e.preventDefault();
  232. });
  233. $("#shuffle div").hover(function() {
  234. $(this).css('cursor', 'pointer');
  236. }, function() {
  237. $(this).css('cursor', 'auto');
  238. });
  239. $("#shuffle div").click(function(e) {
  240. var select = $('#dropDownId :selected').text();
  241. var Original = ($(this).attr("id"));
  242. var parent = $("#shuffle");
  243. var divs = parent.children();
  244. var Count = 0;
  245. if (Original == select) {
  246. $('#output').html(function(i, val) {
  247. return val * 1 + 1
  248. });
  249. }
  250. while (divs.length) {
  251. parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
  253. }
  254. });
  255. });
  257. function ShowDialog(modal) {
  258. $("#overlay").show();
  259. $("#dialog").fadeIn(300);
  260. if (modal) {
  261. $("#overlay").unbind("click");
  262. } else {
  263. $("#overlay").click(function(e) {
  264. HideDialog();
  265. });
  266. }
  267. }
  269. function HideDialog() {
  270. $("#overlay").hide();
  271. $("#dialog").fadeOut(300);
  272. }
  273. </script>
  274. </head>
  276. <body>
  277. <form>
  278. <img src="Images/bulb_mind_brain_svg-256.png" alt="hi" style="width:256px;height:256px;">
  279. <br>
  280. <br>
  281. <h1>SCORE</h1>
  282. <h1><div id="output">00</div></h1>
  283. <p>Choose your number</p>
  284. <select id="dropDownId">
  285. <option value="1">1</option>
  286. <option value="2">2</option>
  287. <option value="3">3</option>
  288. <option value="4">4</option>
  289. <option value="5">5</option>
  290. <option value="6">6</option>
  291. <option value="7">7</option>
  292. <option value="8">8</option>
  293. <option value="9">9</option>
  294. <option value="10">10</option>
  295. <option value="11">11</option>
  296. <option value="12">12</option>
  297. <option value="13">13</option>
  298. <option value="14">14</option>
  299. <option value="15">15</option>
  300. <option value="16">16</option>
  301. <option value="17">17</option>
  302. <option value="18">18</option>
  303. <option value="19">19</option>
  304. <option value="20">20</option>
  305. <option value="21">21</option>
  306. <option value="22">21</option>
  307. <option value="23">22</option>
  308. <option value="24">23</option>
  309. <option value="25">25</option>
  310. <option value="26">26</option>
  311. <option value="27">27</option>
  312. <option value="28">28</option>
  313. <option value="29">29</option>
  314. <option value="30">30</option>
  315. <option value="31">31</option>
  316. <option value="32">32</option>
  317. <option value="33">33</option>
  318. <option value="34">34</option>
  319. <option value="35">35</option>
  320. <option value="36">36</option>
  321. <option value="37">37</option>
  322. <option value="38">38</option>
  323. <option value="39">39</option>
  324. <option value="40">40</option>
  325. <option value="41">41</option>
  326. <option value="42">42</option>
  327. <option value="43">43</option>
  328. <option value="44">44</option>
  329. <option value="45">45</option>
  330. <option value="46">46</option>
  331. <option value="47">47</option>
  332. <option value="48">48</option>
  333. <option value="49">49</option>
  334. <option value="50">50</option>
  335. <option value="51">51</option>
  336. <option value="52">52</option>
  337. <option value="53">53</option>
  338. <option value="54">54</option>
  339. <option value="55">55</option>
  340. <option value="56">56</option>
  341. <option value="57">57</option>
  342. <option value="58">58</option>
  343. <option value="59">59</option>
  344. <option value="60">60</option>
  345. <option value="61">61</option>
  346. <option value="62">62</option>
  347. <option value="63">63</option>
  348. <option value="64">64</option>
  349. <option value="65">65</option>
  350. <option value="66">66</option>
  351. <option value="67">67</option>
  352. <option value="68">68</option>
  353. <option value="69">69</option>
  354. <option value="70">70</option>
  355. <option value="71">71</option>
  356. <option value="72">72</option>
  357. <option value="73">73</option>
  358. <option value="74">74</option>
  359. <option value="75">75</option>
  360. <option value="76">76</option>
  361. <option value="77">77</option>
  362. <option value="78">78</option>
  363. <option value="79">79</option>
  364. <option value="80">80</option>
  365. <option value="81">81</option>
  366. <option value="82">82</option>
  367. <option value="83">83</option>
  368. <option value="84">84</option>
  369. <option value="85">85</option>
  370. <option value="86">86</option>
  371. <option value="87">87</option>
  372. <option value="88">88</option>
  373. <option value="89">89</option>
  374. <option value="90">90</option>
  375. <option value="91">91</option>
  376. <option value="92">92</option>
  377. <option value="93">93</option>
  378. <option value="94">94</option>
  379. <option value="95">95</option>
  380. <option value="96">96</option>
  381. <option value="97">97</option>
  382. <option value="98">98</option>
  383. <option value="99">99</option>
  384. <option value="100">100</option>
  385. </select>
  386. <br>
  387. <br>
  388. <br>
  389. <input type="button" class="styled-button-2" id="btnShowSimple" value="START" />
  390. <input type="button" class="styled-button-2" id="btnShowModal" value="RESTART" />
  391. <br />
  392. <br />
  393. <div id="output"></div>
  394. <div id="overlay" class="web_dialog_overlay"></div>
  395. <div id="dialog" class="web_dialog">
  396. <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
  397. <tr>
  398. <td class="web_dialog_title">Find your number ?</td>
  399. <td class="web_dialog_title align_right">
  400. <a href="#" id="btnClose">Close</a>
  401. </td>
  402. </tr>
  403. <td> </td>
  404. <td> </td>
  405. <tr>
  406. <td>
  407. Time Left <b id="countdown"></b> seconds
  408. <img src="Images/Alarm.png" alt="Timer" style="width:48px;height:48px;">
  409. </td>
  410. </tr>
  411. <tr>
  412. <td> </td>
  413. </tr>
  414. <tr>
  415. <td colspan="2" style="padding-left: 15px;">
  416. </td>
  417. </tr>
  418. <tr>
  419. <td> </td>
  420. <td> </td>
  421. </tr>
  422. <tr>
  423. <td colspan="2" style="padding-left: 15px;">
  424. <div id="shuffle">
  425. <div id=1>1</div>
  426. <div id=2>2</div>
  427. <div id=3>3</div>
  428. <div id=4>4</div>
  429. <div id=5>5</div>
  430. <div id=6>6</div>
  431. <div id=7>7</div>
  432. <div id=8>8</div>
  433. <div id=9>9</div>
  434. <div id=10>10</div>
  435. <div id=11>11</div>
  436. <div id=12>12</div>
  437. <div id=13>13</div>
  438. <div id=14>14</div>
  439. <div id=15>15</div>
  440. <div id=16>16</div>
  441. <div id=17>17</div>
  442. <div id=18>18</div>
  443. <div id=19>19</div>
  444. <div id=20>20</div>
  445. <div id=21>21</div>
  446. <div id=22>22</div>
  447. <div id=23>23</div>
  448. <div id=24>24</div>
  449. <div id=25>25</div>
  450. <div id=26>26</div>
  451. <div id=27>27</div>
  452. <div id=28>28</div>
  453. <div id=29>29</div>
  454. <div id=30>30</div>
  455. <div id=31>31</div>
  456. <div id=32>32</div>
  457. <div id=33>33</div>
  458. <div id=34>34</div>
  459. <div id=35>35</div>
  460. <div id=36>36</div>
  461. <div id=37>37</div>
  462. <div id=38>38</div>
  463. <div id=39>39</div>
  464. <div id=40>40</div>
  465. <div id=41>41</div>
  466. <div id=42>42</div>
  467. <div id=43>43</div>
  468. <div id=44>44</div>
  469. <div id=45>45</div>
  470. <div id=46>46</div>
  471. <div id=47>47</div>
  472. <div id=48>48</div>
  473. <div id=49>49</div>
  474. <div id=50>50</div>
  475. <div id=51>51</div>
  476. <div id=52>52</div>
  477. <div id=53>53</div>
  478. <div id=54>54</div>
  479. <div id=55>55</div>
  480. <div id=56>56</div>
  481. <div id=57>57</div>
  482. <div id=58>58</div>
  483. <div id=59>59</div>
  484. <div id=60>60</div>
  485. <div id=61>61</div>
  486. <div id=62>62</div>
  487. <div id=63>63</div>
  488. <div id=64>64</div>
  489. <div id=65>65</div>
  490. <div id=66>66</div>
  491. <div id=67>67</div>
  492. <div id=68>68</div>
  493. <div id=69>69</div>
  494. <div id=70>70</div>
  495. <div id=71>71</div>
  496. <div id=72>72</div>
  497. <div id=73>73</div>
  498. <div id=74>74</div>
  499. <div id=75>75</div>
  500. <div id=76>76</div>
  501. <div id=77>77</div>
  502. <div id=78>78</div>
  503. <div id=79>79</div>
  504. <div id=80>80</div>
  505. <div id=81>81</div>
  506. <div id=82>82</div>
  507. <div id=83>83</div>
  508. <div id=84>84</div>
  509. <div id=85>85</div>
  510. <div id=86>86</div>
  511. <div id=87>87</div>
  512. <div id=88>88</div>
  513. <div id=89>89</div>
  514. <div id=90>90</div>
  515. <div id=91>91</div>
  516. <div id=92>92</div>
  517. <div id=93>93</div>
  518. <div id=94>94</div>
  519. <div id=95>95</div>
  520. <div id=96>96</div>
  521. <div id=97>97</div>
  522. <div id=98>98</div>
  523. <div id=99>99</div>
  524. <div id=100>100</div>
  525. </div>
  526. </td>
  527. </tr>
  528. <tr>
  529. <td> </td>
  530. <td> </td>
  531. </tr>
  532. <tr>
  533. <td colspan="2" style="text-align: center;">
  534. <input id="btnSubmit" class="styled-button-3" type="button" value="Exit" />
  535. </td>
  536. </tr>
  537. </table>
  538. </div>
  539. </form>
  540. </body </html>
Output
  1. Open the main Index html file in web browser.

    Game main index page
    Figure 3: Game main index page

  2. Select any number in the drop down select box then press the Start button. If you played already then press the Restart button.

  3. Find your number in the number grid.

    Find number popup window
    Figure 4: Find number popup window

    Find number with time left alert
    Figure 5: Find number with time left alert

    Game over alert window
    Figure 6: Game over alert window

    Game main page with score
    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:

  1. http://www.w3schools.com/jquery/
  2. http://www.tutorialspoint.com/jquery/
  3. http://www.jquery-tutorial.net/