extends ../layout
block content
    script.
        $(document).ready(function() {
            var directions = {
                0: "To get started, open your Chrome DevTools. The #next-exercise button is disabled below. Try using jQuery's .attr() method to turn the disabled attribute to false.",
                1: "Move the .target element from #location1 to #location2.",
                2: "Change the background color of .target to red.",
                3: "Change the background color of the even-numbered targets to red.",
                4: "Change the background color of target4 to red.",
                5: "Clone target2 in #location1 so that it also exists in #location2.",
                6: "Remove the target3 element from #location1.",
                7: "Check the following checkboxes using jQuery.",
                8: "Make the text input field read-only.",
                9: "Select target2 option in the select box.",
                10: "Add the following css classes to .target: 'animated' and 'hinge'.",
                11: "Use jQuery to read the data of .target.",
                12: "Use 'length' to count the number of child elements in #location1, then display that value in #location2.",
                13: "There's an element hidden in #location1. Show it using jQuery, and then click on it."
            };
            var hint = {
                0: "$('#next-exercise').attr('disabled', false);",
                1: "$('.target').appendTo('#location2');",
                2: "$('.target').css('background', 'red');",
                3: "$('.target:even').css({'background': 'red'});",
                4: "$('.target:nth-child(4)').css({'background': 'red'});",
                5: "$('.target:nth-child(2)').clone().appendTo($('#location2'));",
                6: "$('.target:nth-child(3)').remove();",
                7: "$('#location1 input').attr('checked', 'true')",
                8: "$('#location1 input').attr('readonly', 'true')",
                9: "$('#location1 select').val('target2');",
                10: "$('.target').addClass('animated hinge');",
                11: "$('.target').data();",
                12: "$('#location2').text($('#location1').children().length)",
                13: "$('#finished-button').show().click();"
            };
            var elements = {
                0: "",
                1: "<div class='btn btn-default target'>.target</div>",
                2: "<div class='btn btn-default target'>.target</div>",
                3: "<div class='btn btn-default target'>target0</div><div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div>",
                4: "<div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div><div class='btn btn-default target'>target5</div>",
                5: "<div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div><div class='btn btn-default target'>target5</div>",
                6: "<div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div><div class='btn btn-default target'>target5</div>",
                7: "<input type='checkbox'>checkbox1</input><br><input type='checkbox'>checkbox2</input>",
                8: "<input type='text' value='target'>",
                9: "<select><option value='target0'>target0</option><option value='target1'>target1</option><option value='target2'>target2</option><option value='target3'>target3</option></select>",
                10: "<div class='btn btn-default target'>.target</div>",
                11: "<div class='btn btn-default target' data-lookAtMe='This is some super secret data hidden in the DOM!'>.target</div>",
                12: "<div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div><div class='btn btn-default target'>target5</div>",
                13: "<div class='btn btn-default target' id='finished-button'>Finish!</div>"
            };
            function refreshEverything() {
                $('#directions').text("Exercise " + currentExercise + ": " + directions[currentExercise]);
                $('#location1').html(elements[currentExercise]);
                $('#hint').text(hint[currentExercise]);
                handleExerciseTransition();
            }
            $('#exercise-directory').on('click', 'li', function (event) {
                currentExercise = $(this).index();
                event.preventDefault();
                refreshEverything(event);
            });
            $('#next-exercise').on('click', function (event) {
                ++currentExercise;
                event.preventDefault();
                refreshEverything(event);
            });
            $('#solution-button').on('click', function () {
                $('#hint-modal').modal({backdrop: "static"});
            });
            $('#location1').on('click', '#finished-button', function () {
                $('#finished-modal').modal({backdrop: "static"});
            });
            function handleExerciseTransition() {
                if (currentExercise === 0) {
                    $('#next-exercise').attr('disabled', true);
                } else {
                    $('#next-exercise').attr('disabled', false);
                }
                if (currentExercise === 2 || currentExercise === 6) {
                    $('#location2 .target').remove();
                }
                if (currentExercise === 13) {
                    $('#location2').text('');
                    $('#finished-button').hide();
                    $('#next-exercise').attr('disabled', true);
                }
            }
            var currentExercise = 0;
            refreshEverything(currentExercise);
        });
    .container
        .row
            .col-xs-12.col-sm-8
                .jumbotron
                    .row
                        .col-xs-12.text-center
                            img.img-responsive(src='https://s3.amazonaws.com/freecodecamp/logo4.0LG.png', alt='learn to code free at freecodecamp.com')
                            h1 jQuery Exercises
                    br
                    #directions.text-primary
                    br
                    .row
                        .col-xs-6 #location1
                        .col-xs-6 #location2
                    .row
                        #location1.col-xs-6.well.jquery-exercises-well
                        #location2.col-xs-6.well.jquery-exercises-well
                    #next-exercise.btn.btn-primary.btn-lg.btn-block
                        | #next-exercise
                    br
                    button#solution-button.btn.btn-block.btn-lg.btn-info
                        | #solution-button
                    br
                    .text-center
                        | Created for
                        a(href='http://www.FreeCodeCamp.com') Free Code Camp
                        br
                        | by
                        a(href='https://twitter.com/ossia') Quincy Larson
                        | ,
                        a(href='https://www.twitter.com/terakilobyte') Nathan Leniz
                        | ,
                        a(href='https://twitter.com/iheartkode')  Mark Howard
                        | and
                        a(href='https://twitter.com/ryanmalm') Ryan Malm
                        | . Please
                        a(href='http://codepen.io/ossia/pen/raVEgN') fork this.
            #exercise-directory.col-xs-12.col-sm-4
                .panel.panel-primary
                    .panel.panel-heading List of Exercises
                    .panel-body
                        ol(start='0')
                            li
                                a(href='#') Re-enable an element
                            li
                                a(href='#') Change an element&apos;s parent
                            li
                                a(href='#') Change an element&apos;s CSS
                            li
                                a(href='#') Use jQuery filters to modify even elements
                            li
                                a(href='#') Change nth child
                            li
                                a(href='#') Clone an element
                            li
                                a(href='#') Remove an element
                            li
                                a(href='#') Check checkboxes
                            li
                                a(href='#') Make text read-only
                            li
                                a(href='#') Select an option in a select box
                            li
                                a(href='#') Add a CSS class to an element
                            li
                                a(href='#') Lookup an element&apos;s data attribute
                            li
                                a(href='#') Count child elements
                            li
                                a(href='#') Show an element and click on it
        #hint-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
            .modal-dialog
                .modal-content
                    .modal-header
                        button.close(type='button', data-dismiss='modal')
                            span(aria-hidden='true') &times;
                            span.sr-only Close
                        h4#myModalLabel.modal-title Your hint
                    .modal-body
                        #hint
        #finished-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
            .modal-dialog
                .modal-content
                    .modal-header
                        button.close(type='button', data-dismiss='modal')
                            span(aria-hidden='true') &times;
                            span.sr-only Close
                        h4#myModalLabel.modal-title
                            | Congratulations! You&apos;ve finished our jQuery exercises!
                            a(href='http://www.freecodecamp.com/') Go back to Free Code Camp
                            | and mark this challenge complete.
                    .modal-body
                        #hint