185 lines
11 KiB
Plaintext
185 lines
11 KiB
Plaintext
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's parent
|
|
li
|
|
a(href='#') Change an element'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'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') ×
|
|
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') ×
|
|
span.sr-only Close
|
|
h4#myModalLabel.modal-title
|
|
| Congratulations! You'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 |