diff --git a/app.js b/app.js index 02bbb774fb..196d210a2f 100644 --- a/app.js +++ b/app.js @@ -129,6 +129,7 @@ app.get( '/resources/interview-questions', resourcesController.interviewQuestions); app.get('/learn-to-code', resourcesController.learnToCode); +app.get('/jquery-exercises', resourcesController.jqueryExercises); app.get('/about', resourcesController.about); app.get('/login', userController.getLogin); app.post('/login', userController.postLogin); diff --git a/controllers/resources.js b/controllers/resources.js index f1168e2cba..e2eebfcfe9 100644 --- a/controllers/resources.js +++ b/controllers/resources.js @@ -9,6 +9,12 @@ exports.learnToCode = function(req, res) { }); } +exports.jqueryExercises = function(req, res) { + res.render('jquery-exercises', { + title: 'jQuery Exercises' + }); +} + exports.about = function(req, res) { res.render('about', { title: 'Who We Are' diff --git a/views/jquery-exercises.jade b/views/jquery-exercises.jade new file mode 100644 index 0000000000..d51ae195ec --- /dev/null +++ b/views/jquery-exercises.jade @@ -0,0 +1,204 @@ +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 (all targets are children of #location1).", + 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: "$('#location1').children().appendTo('#location2');", + 2: "$('.target').css('background', 'red');", + 3: "$('#location1').children('.target:even').css('background', 'red')", + 4: "$('#location1').find('div:nth-child(4)').css('background', 'red')", + 5: "$('#location1').find('div:nth-child(2)').clone().appendTo('#location2')", + 6: "$('#location1').find('div:nth-child(3)').remove();", + 7: "$('#location1 input').attr('checked', 'true')", + 8: "$('#location1 input').attr('readonly', 'true')", + 9: "$('#location1 select').val('target2');", + 10: "$('#location1 div').addClass('animated hinge')", + 11: "$('#location1').children().data()", + 12: "$('#location2').text($('#location1').children().length)", + 13: "$('#location1').children().show();" + }; + var elements = { + 0: "", + 1: "
.target
", + 2: "
.target
", + 3: "
target0
target1
target2
target3
target4
", + 4: "
target1
target2
target3
target4
target5
", + 5: "
target1
target2
target3
target4
target5
", + 6: "
target1
target2
target3
target4
target5
", + 7: "checkbox1
checkbox2", + 8: "", + 9: "", + 10: "
.target
", + 11: "
.target
", + 12: "
target1
target2
target3
target4
target5
", + 13: "
Finish!
" + }; + 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. +
+
+
+
+
+
+ free code learning at freecodecamp.com + +

jQuery Exercises

+
+
+
+
+ +
+
+
+
#location1
+
#location2
+
+
+
+
+
+
+ #next-exercise +
+
+ +
+
+ Created for Free Code Camp
by Quincy Larson, + Nathan Leniz, Mark Howard and Ryan Malm. Please fork this. +
+
+
+ +
+
+ + + +