205 lines
12 KiB
Plaintext
205 lines
12 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 the target4 to red.",
|
|
5: "Clone the target2 in #location1 so that it also exists in #location2.",
|
|
6: "Remove the target3 from element from #location1.",
|
|
7: "Check the following checkboxes using jQuery.",
|
|
8: "Make the text input field read-only.",
|
|
9: "Select the 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', event, function () {
|
|
currentExercise = $(this).index();
|
|
event.preventDefault();
|
|
refreshEverything(event);
|
|
});
|
|
$('#next-exercise').on('click', event, function () {
|
|
++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);
|
|
});
|
|
style.
|
|
#directions {
|
|
text-align: left;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.well {
|
|
text-align: left;
|
|
height: 200px;
|
|
}
|
|
|
|
#exercise-directory {
|
|
font-size: 20px;
|
|
}
|
|
|
|
#current-exercise {
|
|
text-size: 250px;
|
|
}
|
|
|
|
html.
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class=" col-xs-12 col-sm-8">
|
|
<div class="jumbotron">
|
|
<div class="row">
|
|
<div class="col-xs-12 text-center">
|
|
<img src="https://s3.amazonaws.com/freecodecamp/logo4.0LG.png" alt="learn to code free at freecodecamp.com" class="img-responsive">
|
|
|
|
<h1>jQuery Exercises</h1>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="text-primary" id="directions">
|
|
|
|
</div>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-xs-6">#location1</div>
|
|
<div class="col-xs-6">#location2</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-6 well" id="location1"></div>
|
|
<div class="col-xs-6 well" id="location2"></div>
|
|
</div>
|
|
<div class="btn btn-primary btn-lg btn-block" id="next-exercise">
|
|
#next-exercise
|
|
</div>
|
|
<br>
|
|
<button class="btn btn-block btn-lg btn-info" id="solution-button">
|
|
#solution-button
|
|
</button>
|
|
</br>
|
|
<div class="text-center">
|
|
Created for <a href="http://www.FreeCodeCamp.com">Free Code Camp</a><br/>by <a href="https://twitter.com/ossia">Quincy Larson</a>,
|
|
<a href="https://www.twitter.com/terakilobyte">Nathan Leniz</a>, <a href="https://twitter.com/iheartkode"> Mark Howard</a> and <a href="https://twitter.com/ryanmalm">Ryan Malm</a>. Please <a href="http://codepen.io/ossia/pen/raVEgN">fork this.</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-4" id="exercise-directory">
|
|
<div class="panel panel-primary">
|
|
<div class="panel panel-heading">List of Exercises</div>
|
|
<div class="panel-body">
|
|
<ol start="0">
|
|
<li> <a href='#'>Re-enable an element</a></li>
|
|
<li> <a href='#'>Change an element's parent</a></li>
|
|
<li> <a href='#'>Change an element's CSS</a></li>
|
|
<li> <a href='#'>Use jQuery filters to modify even elements</a></li>
|
|
<li> <a href='#'>Change nth child</a></li>
|
|
<li> <a href='#'>Clone an element</a></li>
|
|
<li> <a href='#'>Remove an element</a></li>
|
|
<li> <a href='#'>Check checkboxes</a></li>
|
|
<li> <a href='#'>Make text read-only</a></li>
|
|
<li> <a href='#'>Select an option in a select box</a></li>
|
|
<li> <a href='#'>Add a CSS class to an element</a></li>
|
|
<li> <a href='#'>Lookup an element's data attribute</a></li>
|
|
<li> <a href='#'>Count child elements</a></li>
|
|
<li> <a href='#'>Show an element and click on it</a></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="hint-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
|
<h4 class="modal-title" id="myModalLabel">Your hint</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="hint">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="finished-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
|
<h4 class="modal-title" id="myModalLabel">Congratulations! You've finished our jQuery exercises! <a href="http://www.freecodecamp.com/">Go back to Free Code Camp </a> and mark this challenge complete.</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="hint"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|