<p dir="auto">Screenie: <a href="http://puu.sh/l7m9w/0f05381eb0.png" rel="nofollow">http://puu.sh/l7m9w/0f05381eb0.png</a></p>
<p dir="auto">I finished the lesson, but I'm unable to progress. This happened with every lesson in the jQuery section, but all the others finally worked after a dozen clicks or thereabouts. The script runs correctly, and the hinge animated takes place (wasn't able to puush fast enough to catch it in action). I'm going to keep clicking in the hopes that it eventually works, but it is very discouraging.</p>
<p dir="auto">Challenge <a href="http://www.freecodecamp.com/challenges/waypoint-use-jquery-to-modify-the-entire-page#?solution=fccss%0A%20%20%24%28document%29.ready%28function%28%29%20%7B%0A%20%20%20%20%24%28%22%23target1%22%29.css%28%22color%22%2C%20%22red%22%29%3B%0A%20%20%20%20%24%28%22%23target1%22%29.prop%28%22disabled%22%2C%20true%29%3B%0A%20%20%20%20%24%28%22%23target4%22%29.remove%28%29%3B%0A%20%20%20%20%24%28%22%23target2%22%29.appendTo%28%22%23right-well%22%29%3B%0A%20%20%20%20%24%28%22%23target5%22%29.clone%28%29.appendTo%28%22%23left-well%22%29%3B%0A%20%20%20%20%24%28%22%23target1%22%29.parent%28%29.css%28%22background-color%22%2C%20%22red%22%29%3B%0A%20%20%20%20%24%28%22%23right-well%22%29.children%28%29.css%28%22color%22%2C%20%22green%22%29%3B%0A%20%20%20%20%24%28%22%23left-well%22%29.children%28%29.css%28%22color%22%2C%20%22green%22%29%3B%0A%20%20%20%20%24%28%22.target%3Anth-child%282%29%22%29.addClass%28%22animated%20bounce%22%29%3B%0A%20%20%20%20%24%28%22.target%3Aeven%22%29.addClass%28%22animated%20shake%22%29%3B%0A%20%20%20%20%24%28%22body%22%29.addClass%28%22animated%20hinge%22%29%3B%0A%0A%20%20%7D%29%3B%0Afcces%0A%0A%3C!--%20Only%20change%20code%20above%20this%20line.%20--%3E%0A%0A%3Cdiv%20class%3D%22container-fluid%22%3E%0A%20%20%3Ch3%20class%3D%22text-primary%20text-center%22%3EjQuery%20Playground%3C%2Fh3%3E%0A%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-6%22%3E%0A%20%20%20%20%20%20%3Ch4%3E%23left-well%3C%2Fh4%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22well%22%20id%3D%22left-well%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target1%22%3E%23target1%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target2%22%3E%23target2%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target3%22%3E%23target3%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-6%22%3E%0A%20%20%20%20%20%20%3Ch4%3E%23right-well%3C%2Fh4%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22well%22%20id%3D%22right-well%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target4%22%3E%23target4%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target5%22%3E%23target5%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target6%22%3E%23target6%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A" rel="nofollow">Waypoint: Use jQuery to Modify the Entire Page</a> has an issue.<br>
User Agent is: <code class="notranslate">Mozilla/5.0 (Windows NT 10.0; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0</code>.<br>
Please describe how to reproduce this issue, and include links to screenshots if possible.</p>
<p dir="auto">My code:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;script&gt;
  $(document).ready(function() {
    $(&quot;#target1&quot;).css(&quot;color&quot;, &quot;red&quot;);
    $(&quot;#target1&quot;).prop(&quot;disabled&quot;, true);
    $(&quot;#target4&quot;).remove();
    $(&quot;#target2&quot;).appendTo(&quot;#right-well&quot;);
    $(&quot;#target5&quot;).clone().appendTo(&quot;#left-well&quot;);
    $(&quot;#target1&quot;).parent().css(&quot;background-color&quot;, &quot;red&quot;);
    $(&quot;#right-well&quot;).children().css(&quot;color&quot;, &quot;green&quot;);
    $(&quot;#left-well&quot;).children().css(&quot;color&quot;, &quot;green&quot;);
    $(&quot;.target:nth-child(2)&quot;).addClass(&quot;animated bounce&quot;);
    $(&quot;.target:even&quot;).addClass(&quot;animated shake&quot;);
    $(&quot;body&quot;).addClass(&quot;animated hinge&quot;);

  });
&lt;/script&gt;

&lt;!-- Only change code above this line. --&gt;

&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;h3 class=&quot;text-primary text-center&quot;&gt;jQuery Playground&lt;/h3&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-xs-6&quot;&gt;
      &lt;h4&gt;#left-well&lt;/h4&gt;
      &lt;div class=&quot;well&quot; id=&quot;left-well&quot;&gt;
        &lt;button class=&quot;btn btn-default target&quot; id=&quot;target1&quot;&gt;#target1&lt;/button&gt;
        &lt;button class=&quot;btn btn-default target&quot; id=&quot;target2&quot;&gt;#target2&lt;/button&gt;
        &lt;button class=&quot;btn btn-default target&quot; id=&quot;target3&quot;&gt;#target3&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-xs-6&quot;&gt;
      &lt;h4&gt;#right-well&lt;/h4&gt;
      &lt;div class=&quot;well&quot; id=&quot;right-well&quot;&gt;
        &lt;button class=&quot;btn btn-default target&quot; id=&quot;target4&quot;&gt;#target4&lt;/button&gt;
        &lt;button class=&quot;btn btn-default target&quot; id=&quot;target5&quot;&gt;#target5&lt;/button&gt;
        &lt;button class=&quot;btn btn-default target&quot; id=&quot;target6&quot;&gt;#target6&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
  <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">ready</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">"#target1"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">"color"</span><span class="pl-kos">,</span> <span class="pl-s">"red"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">"#target1"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">prop</span><span class="pl-kos">(</span><span class="pl-s">"disabled"</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">"#target4"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">remove</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">"#target2"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">appendTo</span><span class="pl-kos">(</span><span class="pl-s">"#right-well"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">"#target5"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">clone</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">appendTo</span><span class="pl-kos">(</span><span class="pl-s">"#left-well"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">"#target1"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">parent</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">"background-color"</span><span class="pl-kos">,</span> <span class="pl-s">"red"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">"#right-well"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">children</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">"color"</span><span class="pl-kos">,</span> <span class="pl-s">"green"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">"#left-well"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">children</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">"color"</span><span class="pl-kos">,</span> <span class="pl-s">"green"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">".target:nth-child(2)"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">addClass</span><span class="pl-kos">(</span><span class="pl-s">"animated bounce"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">".target:even"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">addClass</span><span class="pl-kos">(</span><span class="pl-s">"animated shake"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">"body"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">addClass</span><span class="pl-kos">(</span><span class="pl-s">"animated hinge"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>

<span class="pl-c">&lt;!-- Only change code above this line. --&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">container-fluid</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">h3</span> <span class="pl-c1">class</span>="<span class="pl-s">text-primary text-center</span>"<span class="pl-kos">&gt;</span>jQuery Playground<span class="pl-kos">&lt;/</span><span class="pl-ent">h3</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">row</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">col-xs-6</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">h4</span><span class="pl-kos">&gt;</span>#left-well<span class="pl-kos">&lt;/</span><span class="pl-ent">h4</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">well</span>" <span class="pl-c1">id</span>="<span class="pl-s">left-well</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-default target</span>" <span class="pl-c1">id</span>="<span class="pl-s">target1</span>"<span class="pl-kos">&gt;</span>#target1<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-default target</span>" <span class="pl-c1">id</span>="<span class="pl-s">target2</span>"<span class="pl-kos">&gt;</span>#target2<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-default target</span>" <span class="pl-c1">id</span>="<span class="pl-s">target3</span>"<span class="pl-kos">&gt;</span>#target3<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">col-xs-6</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">h4</span><span class="pl-kos">&gt;</span>#right-well<span class="pl-kos">&lt;/</span><span class="pl-ent">h4</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">well</span>" <span class="pl-c1">id</span>="<span class="pl-s">right-well</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-default target</span>" <span class="pl-c1">id</span>="<span class="pl-s">target4</span>"<span class="pl-kos">&gt;</span>#target4<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-default target</span>" <span class="pl-c1">id</span>="<span class="pl-s">target5</span>"<span class="pl-kos">&gt;</span>#target5<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-default target</span>" <span class="pl-c1">id</span>="<span class="pl-s">target6</span>"<span class="pl-kos">&gt;</span>#target6<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Challenge <a href="http://www.freecodecamp.com/challenges/waypoint-change-the-css-of-an-element-using-jquery" rel="nofollow">http://www.freecodecamp.com/challenges/waypoint-change-the-css-of-an-element-using-jquery</a> has an issue. Please describe how to reproduce it, and include links to screenshots if possible.</p>
<p dir="auto">Code fails validation ("Your target1 element should have red text." continues to show a red X even though the condition has been met). Interestingly, if "Run Code" is pushed several (sometimes &gt;5) times, the code does eventually pass even though nothing changed.</p>
<p dir="auto">Screenshot <em>after</em> pressing "Run Code":<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/10679949/9600757/ccad476a-5051-11e5-81de-752777838a8b.png"><img src="https://cloud.githubusercontent.com/assets/10679949/9600757/ccad476a-5051-11e5-81de-752777838a8b.png" alt="codecampchallenge" style="max-width: 100%;"></a></p>