The-Complete-Web-Development-Bootcamp/main/15 - Boss Level Challenge 2 The Simon Game/197 - Step 4 Check Which Button is Pressed.html

<p>1. Use <strong>jQuery</strong> to detect when any of the buttons are <strong>clicked</strong> and trigger a <strong>handler function</strong>.</p><p>2. <strong>Inside</strong> the handler, create a new variable called <code>userChosenColour</code> to store the <strong>id</strong> of the button that <strong>got clicked</strong>. </p><p>--&gt; So if the Green button was clicked, <code>userChosenColour</code> will equal its <strong>id</strong> which is <code>"green"</code>.</p><figure><img height="37" src="https://img-b.udemycdn.com/redactor/raw/2018-11-21_11-39-21-bc0da91118f1ff73e42a88f12e746ee8.png" width="588"></figure><p>3. At the top of the <strong>game.js</strong> file, create a new <strong>empty</strong> array with the name <code>userClickedPattern</code>.</p><p>4. Add the contents of the variable <code>userChosenColour</code> created in step 2 to the end of this new <code>userClickedPattern</code></p><p>At this stage, if you log the <code>userClickedPattern</code> you should be able to build up an array in the console by clicking on different buttons.</p><figure><img src="https://img-b.udemycdn.com/redactor/raw/2018-11-22_11-13-09-81cb08045950bf6a12182950a4d3f5f4.gif"></figure><p>Note: If you need any hints, try scrolling down. 👇</p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p>Hint 1A. Remember that all the buttons share the same class (<code>btn</code>).</p><p>Hint 1B. Remember that jQuery has a <code>.click()</code> function: <a href="https://api.jquery.com/click/" rel="noopener noreferrer" target="_blank">https://api.jquery.com/click/</a></p><p>Hint 1C. jQuery handlers are anonymous functions: <a href="https://api.jquery.com/click/#click-handler" rel="noopener noreferrer" target="_blank">https://api.jquery.com/click/#click-handler</a></p><p>Hint 2A. Inside the handler, you can use the keyword <strong>this</strong> to refer to the button object that triggered the click. </p><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this" rel="noopener noreferrer" target="_blank">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this</a></p><p>Hint 2B. You can use the<code> attr()</code> function in jQuery to find out the value of any of the attributes of an object. <a href="https://api.jquery.com/attr" rel="noopener noreferrer" target="_blank">https://api.jquery.com/attr</a></p>