gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/OOPF' into OOPF

Browse Source
This commit is contained in:
benmcmahon100
2015-08-13 12:57:14 +01:00
parent 7910f0ae2c 7ee6a8f888
commit 5905e19e1b
16 changed files with 1071 additions and 992 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -98,7 +98,6 @@ TWITTER_TOKEN=stuff
TWITTER_TOKEN_SECRET=stuff
BLOGGER_KEY=stuff
SLACK_WEBHOOK=stuff
SESSION_SECRET=secretstuff
COOKIE_SECRET='this is a secret'

2
client/index.js
View File

@ -16,7 +16,7 @@ const services = new Fetchr({
xhrPath: '/services'
});
Rx.longStackSupport = !!debug.enabled;
Rx.config.longStackSupport = !!debug.enabled;
// returns an observable
app$(history)

4
common/models/challenge.json
View File

@ -4,6 +4,10 @@
"idInjection": true,
"trackChanges": false,
"properties": {
"id": {
"type": "string",
"id": true
},
"name": {
"type": "string",
"index": {

4
common/models/job.json
View File

@ -4,6 +4,10 @@
"idInjection": true,
"trackChanges": false,
"properties": {
"id": {
"type": "string",
"id": true
},
"position": {
"type": "string"
},

4
common/models/nonprofit.json
View File

@ -4,6 +4,10 @@
"idInjection": true,
"trackChanges": false,
"properties": {
"id": {
"type": "string",
"id": true
},
"name": {
"type": "string",
"index": {

4
common/models/story.json
View File

@ -4,6 +4,10 @@
"idInjection": true,
"trackChanges": false,
"properties": {
"id": {
"type": "string",
"id": true
},
"name": {
"type": "string",
"index": {

5
gulpfile.js
View File

@ -26,7 +26,8 @@ var Rx = require('rx'),
eslint = require('gulp-eslint');
Rx.longStackSupport = true;
Rx.config.longStackSupport = true;
var reloadDelay = 1000;
var reload = sync.reload;
var paths = {
@ -83,7 +84,7 @@ gulp.task('inject', function() {
gulp.src('views/home.jade')
.pipe(plumber({ errorHandler: errorHandler }))
.pipe(inject(gulp.src(bower()), {
//ignorePath: '/public'
// ignorePath: '/public'
}))
.pipe(gulp.dest('views'));
});

4
seed/challenges/basic-ziplines.json
View File

@ -16,9 +16,9 @@
"Go to <a href='http://codepen.io' target='_blank'>http://codepen.io</a> and create an account.",
"Click your user image in the top right corner, then click the \"New pen\" button that drops down.",
"Drag the windows around and press the buttons in the lower-right hand corner to change the orientation to suit your preference.",
"Click the gear next to CSS. Click the \"Quick-add...\" select box and choose Bootstrap.",
"Click the gear next to CSS. Then under the \"Add External CSS\" section, use the \"Quick-add\" select box to select Bootstrap. Then click \"Save & Close\".",
"Verify that bootstrap is active by adding the following code to your HTML: <code>&lt;h1 class='text-primary'&gt;Hello CodePen!&lt;/h1&gt;</code>. The text's color should be Bootstrap blue.",
"Click the gear next to JavaScript. Click the \"Quick-add...\" select box and choose jQuery.",
"Click the gear next to JavaScript. Click the \"Quick-add\" select box and choose jQuery (not jQuery UI). Then click \"Save & Close\".",
"Now add the following code to your JavaScript: <code>$(document).ready(function() { $('.text-primary').text('Hi CodePen!') });</code>. Click the \"Save\" button at the top. Your \"Hello CodePen!\" should change to \"Hi CodePen!\". This means that jQuery is working.",
"You can use this CodePen that you've just created as a starting point for your Ziplines. Just click the \"fork\" button at the top of your CodePen and it will create a duplicate CodePen.",
"Now you're ready for your first Zipline. Click the \"I've completed this challenge\" button."

2
seed/challenges/bootstrap.json
View File

@ -91,7 +91,7 @@
"title": "Make Images Mobile Responsive",
"difficulty": 2.02,
"description": [
"First, Add a new image with the <code>src</code> attribute of \"http://bit.ly/fcc-kittens2\".",
"First, Add a new image below the existing one. Set it's <code>src</code> attribute to \"http://bit.ly/fcc-kittens2\".",
"It would be great if this image could be exactly the width of our phone's screen.",
"Fortunately, with Bootstrap, all we need to do is add the \"img-responsive\" class to your image. Do this, and the image should perfectly fit the width of your page."
],

32
seed/challenges/html5-and-css.json
View File

@ -459,8 +459,17 @@
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"nameEs": "Waypoint: Utiliza una clase CSS para darle estilo a un elemento",
"descriptionEs": [
"Crea una clase CSS llamada \"red-text\" y aplicala a tu elemento <code>h2</code>.",
"Las clases son estilos reutilizables que pueden ser añadidos a elementos HTML",
"Esta es la anatomía de una clase CSS:",
"<img class='img-responsive' alt='a diagram of how style tags are composed, which is also described in detail on the following lines.' src='https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png'/>",
"Puedes ver que hemos creado una clase CSS llamada \"blue-text\" dentro de la etiqueta <code>&#60;style&#62;</code>.",
"Puedes aplicar una clase a un elemento HTML de esta manera: <code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;/h2&#62;</code>.",
"Nota que en el elemento CSS <code>style</code>, las clases deberían comenzar con un punto. En los elementos HTML, las declaraciones de clase, NO deberían comenzar con punto. ",
"En vez de de crear un nuevo elemento <code>style</code>, prueba remover la declaración de estilo de <code>h2</code> y reemplazarla por la declaración \"red-text\"."
],
"namePt": "",
"descriptionPt": [],
"nameDe": "Waypoint: Nutze eine CSS Klasse um ein Element zu gestalten",
@ -509,8 +518,12 @@
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"nameEs": "Waypoint: Estila multiples elementos con una clase CSS",
"descriptionEs": [
"Aplica la clase \"red-text\" a tus elementos <code>h2</code> y <code>p</code>.",
"Recuerda que puedes agregar clases a elementos HTML utilizando <code>class=\"your-class-here\"</code> dentro de la tag de entrada del mismo.",
"Recuerda que los selectores CSS requieren un punto al principio: <code>.blue-text { color: blue; }</code>, pero que las declaraciones de clase NO llevan punto: <code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;h2&#62;</code>."
],
"namePt": "",
"descriptionPt": [],
"nameDe": "Waypoint: Gestalte mehrere Elemente mit einer CSS Klasse",
@ -555,8 +568,13 @@
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"nameEs": "Waypoint: Cambia el tamaño de fuente de un elemento.",
"descriptionEs": [
"Crea un segundo elemento <code>p</code>. Luego, dentro de tu elemento <code>&#60;style&#62;</code>, pon el \"font-size\" de todos los elementos <code>p</code> a 16 pixeles.",
"El tamaño de fuente es controlado por el atributo CSS \"font-size\", como aquí: <code>h1 { font-size: 30px; }</code>.",
"Primero, crea un segundo elemento <code>p</code> con el siguiente texto Kitty Ipsum: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
"Ve si puedes encontrar una manera de darle a ambos elementos <code>p</code> un font-size de 16 pixeles (<code>16px</code>). Puedes hacer esto dentro de la misma etiqueta <code>&#60;style&#62;</code> que creamos para la clase \"red-text\"."
],
"namePt": "",
"descriptionPt": [],
"nameDe": "Waypoint: Ändere die Schriftgröße eines Elements",
@ -1971,7 +1989,7 @@
],
"tests": [
"assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')",
"assert($('input[type=\"radio\"]:nth-child(1)').attr('name') === 'indoor-outdoor', 'Give your radio buttons the <code>name</code> attribute of \"indoor-outdoor\".')",
"assert($('input[type=\"radio\"]:nth-child(1)').attr('name') === 'indoor-outdoor' && $('input[type=\"radio\"]:nth-child(2)').attr('name') === 'indoor-outdoor', 'Give your radio buttons the <code>name</code> attribute of \"indoor-outdoor\".')",
"assert($('label').length > 1, 'Each of your two radio button elements should be nested in a label element.')",
"assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.')",
"assert($('label').text().match(/indoor/gi), 'One of your radio buttons should have the label \"indoor\".')",

12
seed/challenges/intermediate-bonfires.json
View File

@ -397,12 +397,12 @@
"convert('Dolce & Gabbana');"
],
"tests": [
"assert.strictEqual(convert('Dolce & Gabbana'), 'Dolce &amp; Gabbana', 'should escape characters');",
"assert.strictEqual(convert('Hamburgers < Pizza < Tacos'), 'Hamburgers &lt; Pizza &lt; Tacos', 'should escape characters');",
"assert.strictEqual(convert('Sixty > twelve'), 'Sixty &gt; twelve', 'should escape characters');",
"assert.strictEqual(convert('Stuff in \"quotation marks\"'), 'Stuff in &quot;quotation marks&quot;', 'should escape characters');",
"assert.strictEqual(convert(\"Shindler's List\"), 'Shindler&apos;s List', 'should escape characters');",
"assert.strictEqual(convert('<>'), '&lt;&gt;', 'should escape characters');",
"assert.match(convert('Dolce & Gabbana'), /Dolce &(amp|AMP|#x00026|#38); Gabbana/, 'should escape characters');",
"assert.match(convert('Hamburgers < Pizza < Tacos'), /Hamburgers &(lt|LT|#x0003C|#60); Pizza &(lt|LT|#x0003C|#60); Tacos/, 'should escape characters');",
"assert.match(convert('Sixty > twelve'), /Sixty &(gt|GT|#x0003E|#62); twelve/, 'should escape characters');",
"assert.match(convert('Stuff in \"quotation marks\"'), /Stuff in &(quot|QUOT|#x00022|#34);quotation marks&(quot|QUOT|#x00022|#34);/, 'should escape characters');",
"assert.match(convert(\"Shindler's List\"), /Shindler&(apos|#x00027|#39);s List/, 'should escape characters');",
"assert.match(convert('<>'), /&(lt|LT|#x0003C|#60);&(gt|GT|#x0003E|#62);/, 'should escape characters');",
"assert.strictEqual(convert('abc'), 'abc', 'should handle strings with nothing to escape');"
],
"MDNlinks": [

2
seed/challenges/intermediate-ziplines.json
View File

@ -140,7 +140,7 @@
"difficulty": 1.07,
"challengeSeed": ["126415123"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='' target='_blank'>http://codepen.io/dting/full/KpJXZV/</a>.",
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/dting/full/KpJXZV/' target='_blank'>http://codepen.io/dting/full/KpJXZV/</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",

895
seed/challenges/jquery-ajax-and-json.json
View File

@ -1,895 +0,0 @@
{
"name": "jQuery",
"order": 0.004,
"challenges": [
{
"id": "bad87fee1348bd9acdd08826",
"title": "Learn how Script Tags and Document Ready Work",
"difficulty": 3.01,
"description": [
"Now we're ready to learn jQuery, the most popular JavaScript tool of all time. Don't worry about JavaScript itself - we will cover it soon.",
"Before we can start using jQuery, we need to add some things to our HTML.",
"First, add a <code>script</code> element at the top of your page. Be sure to close it on the following line.",
"Your browser will run any JavaScript inside a <code>script</code> element, including jQuery.",
"Inside your <code>script</code> element, add this code: <code>$(document).ready(function() {</code> to your <code>script</code>. Then close it on the following line (still inside your <code>script</code> element) with: <code>});</code>"
],
"tests": [
"assert(editor.match(/<script>/g), 'Create a <code>script</code> element.')",
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Make sure your <code>script</code> element has a closing tag.')",
"assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Close your <code>$(document).ready(function() {</code> function with <code>\\}\\);</code>.')"
],
"challengeSeed": [
"",
"",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9bedc08826",
"title": "Target HTML Elements with Selectors Using jQuery",
"difficulty": 3.02,
"description": [
"Now we have a \"document ready function\". We'll learn more about functions later. The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.",
"This is important because without your \"document ready function\", your code may run before your HTML is rendered, which would cause bugs.",
"Now let's write our first jQuery statement. All jQuery functions start with a <code>$</code>, usually referred to as a \"dollar sign operator\", or simply as \"bling\".",
"jQuery often \"selects\" an HTML element with a <code>selector</code>, then does something to that element.",
"For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your \"document ready function\": <code>$('button').addClass('animated bounce')</code>."
],
"tests": [
"assert($('button').hasClass('animated') && $('button').hasClass('bounce'), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"bounce\" to your <code>button</code> element.')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedc08826",
"title": "Target Elements by Class Using jQuery",
"difficulty": 3.03,
"description": [
"You see how we made all of your <code>button</code> elements bounce? We selected them with <code>$('button')</code>, then we added some CSS classes to them with <code>.addClass('animated bounce');</code>.",
"You just used jQuery's <code>.addClass()</code> function, which allows you to add classes to elements.",
"First, let's target your <code>div</code> elements with the class \"well\" by using the <code>$('.well')</code> selector.",
"Note that, just like with CSS declarations, you type a <code>.</code> before the class's name.",
"Then use jQuery's <code>.addClass()</code> function to add the classes \"animated\" and \"shake\".",
"Here's the full code that you'll want to type into your \"document ready function\": <code>$('.well').addClass('animated shake');</code>"
],
"tests": [
"assert($('.well').hasClass('animated') && $('.well').hasClass('shake'), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"shake\" to all your elements with the class \"well\".')",
"assert(!editor.match(/class\\.\\*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('button').addClass('animated bounce');",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aeda08826",
"title": "Target Elements by ID Using jQuery",
"difficulty": 3.04,
"description": [
"You can also target elements by their id attributes.",
"First target your <code>div</code> element with the class \"target3\" by using the <code>$('#target3')</code> selector.",
"Note that, just like with CSS declarations, you type a <code>#</code> before the class's name.",
"Then use jQuery's <code>.addClass()</code> function to add the classes \"animated\" and \"fadeOut\".",
"Make all the <code>button</code> element with the id \"target3\" fadeOut. <code>$('#target3').addClass('animated fadeOut')</code>."
],
"tests": [
"assert($('#target3').hasClass('animated') && $('#target3').hasClass('fadeOut'), 'Select the <code>button</code>element with the <code>id</code> of \"target3\" and use the jQuery <code>addClass()</code> function to give it the classes of \"animated\" and \"fadeOut\".');",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.');"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('button').addClass('animated bounce');",
" $('.well').addClass('animated shake');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aeda08726",
"title": "Delete your jQuery Functions",
"difficulty": 3.05,
"description": [
"These animations were cool at first, but now they're getting kind of distracting.",
"Delete all three of these jQuery functions from your \"document ready function\", but leave your \"document ready function\" itself intact."
],
"tests": [
"assert(!editor.match(/e\\'\\);/g) && !editor.match(/t\\'\\);/g), 'Delete all three of your jQuery functions from your \"document ready function\".')",
"assert(editor.match(/<script>/g), 'Leave your <code>script</code> element intact.')",
"assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Leave your <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Leave your your \"document ready function\" closing <code>\\}\\);</code> intact.')",
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Leave your <code>script</code> element closing tag intact.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('button').addClass('animated bounce');",
" $('.well').addClass('animated shake');",
" $('#target3').addClass('animated fadeOut');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed908626",
"title": "Target the same element with multiple jQuery Selectors",
"difficulty": 3.06,
"description": [
"Now you know three ways of targeting elements: by type <code>$('button')</code>, by class <code>$('.btn')</code>), and by id <code>$('#target1')</code>).",
"Use each of these jQuery selectors to target your <code>button</code> element with the class \"btn\" and the id \"target1\".",
"Use the <code>addClass()</code> jQuery function to give the element one new class for each selector: \"animated\", \"shake\", and \"btn-primary\"."
],
"tests": [
"assert(editor.match(/\\$\\(\\'button\\'\\)/g), 'Use the <code>$\\(\\'button\\'\\)</code> selector.')",
"assert(editor.match(/\\$\\(\\'\\.btn\\'\\)/g), 'Use the <code>$\\(\\'.btn\\'\\)</code> selector.')",
"assert(editor.match(/\\$\\(\\'#target1\\'\\)/g), 'Use the <code>$\\(\\'#target1\\'\\)</code> selector.')",
"assert(editor.match(/addClass/g) && editor.match(/addClass/g).length > 2, 'Only add one class with each of your three selectors.')",
"assert($('#target1').hasClass('animated') && $('#target1').hasClass('shake') && $('#target1').hasClass('btn-primary'), 'Your \"#target1\" element should have the classes \"animated\"&#130; \"shake\" and \"btn-primary\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed918626",
"title": "Remove Classes from an element with jQuery",
"difficulty": 3.07,
"description": [
"In the same way you can add classes to an element with jQuery's <code>addClass()</code> function, you can remove them with jQuery's <code>removeClass()</code> function.",
"Let's remove the \"btn-default\" class from all of our <code>button</code> elements.",
"Here's how you would do this for a specific button, add <code>$('#target2').removeClass('btn-default');</code>"
],
"tests": [
"assert($('.btn-default').length === 0, 'Remove the \"btn-default\" class from all of your <code>button</code> elements.')",
"assert(editor.match(/btn btn-default/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('button').addClass('animated bounce');",
" $('.well').addClass('animated shake');",
" $('#target3').addClass('animated fadeOut');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed908826",
"title": "Change the CSS of an Element Using jQuery",
"difficulty": 3.08,
"description": [
"We can also change the CSS of an HTML element directly with jQuery.",
"Delete your jQuery selectors, leaving an empty \"document ready function\".",
"Select \"target1\" and change its color to red.",
"jQuery has a function called <code>.css()</code> that allows you to change the CSS of an element.",
"Here's how we would change its color to blue: <code>$('#target1').css('color', 'blue');</code>",
"This is slightly different from a normal CSS declaration, because the CSS attribute and its value are in quotes, and separated with a comma instead of a colon."
],
"tests": [
"assert($('#target1').css('color') === 'rgb(255, 0, 0)', 'Your \"target1\" element should have red text.')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('button').addClass('animated bounce');",
" $('.well').addClass('animated shake');",
" $('#target3').addClass('animated fadeOut');",
" $('button').removeClass('btn-default');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed808826",
"title": "Disable an Element Using jQuery",
"difficulty": 3.09,
"description": [
"You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.",
"When you disable a button, it will become grayed-out and can no longer be clicked.",
"jQuery has a function called <code>.prop()</code> that allows you to adjust the properties of elements.",
"Here's how you would disable all buttons: <code>$('#button').prop('disabled', true);</code>",
"Disable only the \"target1\" button."
],
"tests": [
"assert($('#target1') && $('#target1').prop('disabled'), 'Disable your \"target1\" button.')",
"assert($('#target2') && !$('#target2').prop('disabled'), 'Do not disable any other buttons.')",
"assert(!editor.match(/disabled>/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed708826",
"title": "Remove an Element Using jQuery",
"difficulty": 3.10,
"description": [
"Now let's remove an HTML element from your page using jQuery.",
"jQuery has a function called <code>.remove()</code> that will remove an HTML element entirely."
],
"tests": [
"assert($('#target4').length === 0, 'Use jQuery to remove your \"target4\" element from your page.')",
"assert(editor.match(/id='target4/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed608826",
"title": "Use appendTo to Move Elements with jQuery",
"difficulty": 3.11,
"description": [
"Now let's try moving elements from one <code>div</code> to another.",
"jQuery has a function called <code>appendTo()</code> that allows you to select HTML elements and append them to another element.",
"For example, if we wanted to move \"target4\" from our right well to our left well, we would use <code>$('#target4').appendTo('#left-well');</code>",
"Move your \"target2\" element from your \"left-well\" to your \"right-well\"."
],
"tests": [
"assert($('#left-well').children('#target2').length === 0, 'Your \"target2\" element should not be inside your \"left-well\".')",
"assert($('#right-well').children('#target2').length > 0, 'Your \"target2\" element should be inside your \"right-well\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to move these elements.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
" $('#target4').remove();",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed508826",
"title": "Clone an Element Using jQuery",
"difficulty": 3.12,
"description": [
"In addition to moving elements, you can also copy them from one place to another.",
"jQuery has a function called <code>clone()</code> that makes a copy of an element.",
"For example, if we wanted to copy \"target2\" from our \"left-well\" to our \"right-well\", we would use <code>$('#target2').clone().appendTo('#right-well');</code>",
"Did you notice this involves sticking two jQuery functions together? This is called \"function chaining\" and it's a really convenient way to get things done with jQuery.",
"Clone your \"target5\" element and append it to your \"left-well\"."
],
"tests": [
"assert($('#right-well').children('#target5').length > 0, 'Your \"target5\" element should be inside your \"right-well\".')",
"assert($('#left-well').children('#target5').length > 0, 'A copy of your \"target5\" element should also be inside your \"left-well\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to move these elements.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
" $('#target4').remove();",
" $('#target2').appendTo('#right-well');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed308826",
"title": "Target the Parent of an Element Using jQuery",
"difficulty": 3.13,
"description": [
"Every HTML elements has a \"parent\" element from which it \"inherits\" properties.",
"For example, your \"jQuery Playground\" <code>h3</code> element has the parent element of <code>&#60;div class='container-fluid'&#62</code>, which itself has the parent <code>body</code>.",
"jQuery has a function called <code>parent()</code> that allows you to access the parent of whichever element you've selected.",
"Give the parent of the <code>#target1</code> element background-color of red.",
"Here's an example of how you would use the <code>parent()</code> function: <code>$('#left-well').parent().css('background-color', 'blue')</code>"
],
"tests": [
"assert($('#left-well').css('background-color') === 'rgb(255, 0, 0)', 'Your \"target1\" element should have red text.')",
"assert(editor.match(/\\.parent\\(\\)\\.css/g), 'You should use the <code>parent()</code> function to modify this element.')",
"assert(editor.match(/<div class=\\'well\\' id=\\'left-well\\'>/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
" $('#target4').remove();",
" $('#target2').appendTo('#right-well');",
" $('#target5').clone().appendTo('#left-well');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed208826",
"title": "Target the Children of an Element Using jQuery",
"difficulty": 3.14,
"description": [
"Many HTML elements has a \"children\" element from which they \"inherits\" properties.",
"For example, every HTML element is a child of your <code>body</code> element, and your \"jQuery Playground\" <code>h3</code> element is a child of your <code>&#60;div class='container-fluid'&#62</code> element.",
"jQuery has a function called <code>children()</code> that allows you to access the children of whichever element you've selected.",
"Give all the children of your <code>#right-well</code> element a color of green.",
"Here's an example of how you would use the <code>children()</code> function: <code>$('#left-well').children().css('color', 'blue')</code>"
],
"tests": [
"assert($('#target6').css('color') === 'rgb(0, 255, 0), 'Your \"target6\" element should have green text.')",
"assert(!editor.match(/\\.children\\(\\)\\.css/g), 'You should use the <code>children()</code> function to modify these elements.')",
"assert(!editor.match(/<div class=\\'well\\' id=\\'right-well\\'>/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
" $('#target4').remove();",
" $('#target2').appendTo('#right-well');",
" $('#target5').clone().appendTo('#left-well');",
" $('#target1').parent().css('background-color', 'red');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed108826",
"title": "Target a Specific Child of an Element Using jQuery",
"difficulty": 3.15,
"description": [
"You've seen why id attributes are so convenient for targeting with jQuery selectors. But you won't always have such neat ids to work with.",
"Fortunately, jQuery has some other tricks for targeting the right elements.",
"jQuery has a function called <code>:nth-child()</code> that will allow you select the nth element of a certain class or element type.",
"Make the first child in each of your well elements bounce.",
"Here's how you would give the third element in each well bounce: <code>$('.target:nth-child(3)').addClass('animated bounce');</code>"
],
"tests": [
"assert($('.target:nth-child(2)').hasClass('animated') && $('.target:nth-child(2)').hasClass('bounce'), 'The second element in each of your \"well\" elements should bounce.')",
"assert(editor.match(/\\:nth-child\\(/g), 'You should use the <code>&#58;nth-child()</code> function to modify these elements.')",
"assert(editor.match(/<button class=\\'btn btn-default target\\' id=\\'target2\\'>/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
" $('#target4').remove();",
" $('#target2').appendTo('#right-well');",
" $('#target5').clone().appendTo('#left-well');",
" $('#target1').parent().css('background-color', 'red');",
" $('#right-well').children().css('color', 'green');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed008826",
"title": "Target Even Numbered Elements Using jQuery",
"difficulty": 3.16,
"description": [
"You can also target all the even-numbered elements.",
"Note that computers start counting at zero, so technically, the first element is actually element number zero, which is an odd number.",
"So what a human would consider odd numbers: 1, 3, 5, 7 - a computer would actually consider odd numbers.",
"Here's how you would target all the odd-numbered elements with class \"target\" and give them classes: <code>$('.target:odd').addClass('animated shake');</code>",
"Try selecting all the even-numbered elements - that is, what your browser will consider even-numbered elements - and giving them the classes of \"animated\" and \"shake\"."
],
"tests": [
"assert($('.target:even').hasClass('animated') && $('.target:even').hasClass('shake'), 'All the \"target\" elements that computer considers even should shake.')",
"assert(editor.match(/\\:even/g), 'You should use the <code>&#58;even</code> function to modify these elements.')",
"assert(editor.match(/<button class=\\'btn btn-default target\\' id=\\'target3\\'>/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
" $('#target4').remove();",
" $('#target2').appendTo('#right-well');",
" $('#target5').clone().appendTo('#left-well');",
" $('#target1').parent().css('background-color', 'red');",
" $('#right-well').children().css('color', 'green');",
" $('#left-well').children().css('color', 'green');",
" $('.target:nth-child(2)').addClass('animated bounce');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aecb08826",
"title": "Use jQuery to Modify the Entire Page",
"difficulty": 3.20,
"description": [
"We're done playing with our jQuery playground. Let's tear it down!",
"jQuery can target the <code>body</code> element as well.",
"Here's how we would make the entire body fade out: <code> $('body').addClass('animated fadeOut')</code>",
"But let's do something more dramatic. Add the classes \"animated\" and \"hinge\" to your <code>body</code> element."
],
"tests": [
"assert($('body').hasClass('animated') && $('body').hasClass('hinge'), 'Add the classes \"animated\" and \"hinge\" to your <code>body</code> element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
" $('#target4').remove();",
" $('#target2').appendTo('#right-well');",
" $('#target5').clone().appendTo('#left-well');",
" $('#target1').parent().css('background-color', 'red');",
" $('#right-well').children().css('color', 'green');",
" $('#left-well').children().css('color', 'green');",
" $('.target:nth-child(2)').addClass('animated bounce');",
" $('.target:even').addClass('animated shake');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
}
]
}

900
seed/challenges/jquery.json Normal file
View File

@ -0,0 +1,900 @@
{
"name": "jQuery",
"order": 0.004,
"challenges": [
{
"id": "bad87fee1348bd9acdd08826",
"title": "Learn how Script Tags and Document Ready Work",
"difficulty": 3.01,
"description": [
"Now we're ready to learn jQuery, the most popular JavaScript tool of all time. Don't worry about JavaScript itself - we will cover it soon.",
"Before we can start using jQuery, we need to add some things to our HTML.",
"First, add a <code>script</code> element at the top of your page. Be sure to close it on the following line.",
"Your browser will run any JavaScript inside a <code>script</code> element, including jQuery.",
"Inside your <code>script</code> element, add this code: <code>$(document).ready(function() {</code> to your <code>script</code>. Then close it on the following line (still inside your <code>script</code> element) with: <code>});</code>"
],
"tests": [
"assert(editor.match(/<script>/g), 'Create a <code>script</code> element.')",
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Make sure your <code>script</code> element has a closing tag.')",
"assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Close your <code>$(document).ready(function() {</code> function with <code>});</code>.')"
],
"challengeSeed": [
"",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9bedc08826",
"title": "Target HTML Elements with Selectors Using jQuery",
"difficulty": 3.02,
"description": [
"Now we have a \"document ready function\". We'll learn more about functions later. The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.",
"This is important because without your \"document ready function\", your code may run before your HTML is rendered, which would cause bugs.",
"Now let's write our first jQuery statement. All jQuery functions start with a <code>$</code>, usually referred to as a \"dollar sign operator\", or simply as \"bling\".",
"jQuery often \"selects\" an HTML element with a <code>selector</code>, then does something to that element.",
"For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your \"document ready function\": <code>$(\"button\").addClass(\"animated bounce\")</code>."
],
"tests": [
"assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'Use the jQuery <code>addClass&#40&#41</code> function to give the classes \"animated\" and \"bounce\" to your <code>button</code> element.')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedc08826",
"title": "Target Elements by Class Using jQuery",
"difficulty": 3.03,
"description": [
"You see how we made all of your <code>button</code> elements bounce? We selected them with <code>$(\"button\")</code>, then we added some CSS classes to them with <code>.addClass(\"animated bounce\");</code>.",
"You just used jQuery's <code>.addClass()</code> function, which allows you to add classes to elements.",
"First, let's target your <code>div</code> elements with the class \"well\" by using the <code>$(\".well\")</code> selector.",
"Note that, just like with CSS declarations, you type a <code>.</code> before the class's name.",
"Then use jQuery's <code>.addClass()</code> function to add the classes \"animated\" and \"shake\".",
"Here's the full code that you'll want to type into your \"document ready function\": <code>$(\".well\").addClass(\"animated shake\");</code>"
],
"tests": [
"assert($(\".well\").hasClass(\"animated\") && $(\".well\").hasClass(\"shake\"), 'Use the jQuery <code>addClass&#40&#41</code> function to give the classes \"animated\" and \"shake\" to all your elements with the class \"well\".')",
"assert(!editor.match(/class\\.\\*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aeda08826",
"title": "Target Elements by ID Using jQuery",
"difficulty": 3.04,
"description": [
"You can also target elements by their id attributes.",
"First target your <code>div</code> element with the id \"target3\" by using the <code>$(\"#target3\")</code> selector.",
"Note that, just like with CSS declarations, you type a <code>#</code> before the id's name.",
"Then use jQuery's <code>.addClass()</code> function to add the classes \"animated\" and \"fadeOut\".",
"Make all the <code>button</code> element with the id \"target3\" fadeOut. <code>$(\"#target3\").addClass(\"animated fadeOut\")</code>."
],
"tests": [
"assert($(\"#target3\").hasClass(\"animated\"), 'Select the <code>button</code>element with the <code>id</code> of \"target3\" and use the jQuery <code>addClass&#40&#41</code> function to give it the class of \"animated\".');",
"assert($(\"#target3\").hasClass(\"fadeOut\"), 'Target the element with the id <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class \"fadeOut\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.');"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" $(\".well\").addClass(\"animated shake\");",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aeda08726",
"title": "Delete your jQuery Functions",
"difficulty": 3.05,
"description": [
"These animations were cool at first, but now they're getting kind of distracting.",
"Delete all three of these jQuery functions from your \"document ready function\", but leave your \"document ready function\" itself intact."
],
"tests": [
"assert(!editor.match(/e\"\\);/g) && !editor.match(/t\"\\);/g), 'Delete all three of your jQuery functions from your \"document ready function\".')",
"assert(editor.match(/<script>/g), 'Leave your <code>script</code> element intact.')",
"assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Leave your <code>$&#40document&#41.ready&#40function&#40&#41 {</code> to the beginning of your <code>script</code> element.')",
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Leave your your \"document ready function\" closing <code>\\}&#41;</code> intact.')",
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Leave your <code>script</code> element closing tag intact.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" $(\".well\").addClass(\"animated shake\");",
" $(\"#target3\").addClass(\"animated fadeOut\");",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed908626",
"title": "Target the same element with multiple jQuery Selectors",
"difficulty": 3.06,
"description": [
"Now you know three ways of targeting elements: by type: <code>$(\"button\")</code>, by class: <code>$(\".btn\")</code>, and by id <code>$(\"#target1\")</code>.",
"Use each of these jQuery selectors to target your <code>button</code> element with the class \"btn\" and the id \"target1\".",
"Use the <code>addClass()</code> jQuery function to give the element one new class for each selector: \"animated\", \"shake\", and \"btn-primary\"."
],
"tests": [
"assert(editor.match(/\\$\\((\"button\"\\)/g), 'Use the <code>$&#40\"button\"&#41</code> selector.')",
"assert(editor.match(/\\$\\(\"\\.btn\"\\)/g), 'Use the <code>$&#40\".btn\"\\&#41</code> selector.')",
"assert(editor.match(/\\$\\(\"#target1\"\\)/g), 'Use the <code>$&#40\"#target1\"&#41</code> selector.')",
"assert(editor.match(/addClass/g) && editor.match(/addClass/g).length > 2, 'Only add one class with each of your three selectors.')",
"assert($(\"#target1\").hasClass(\"animated\") && $(\"#target1\").hasClass(\"shake\") && $(\"#target1\").hasClass(\"btn-primary\"), 'Your \"#target1\" element should have the classes \"animated\"&#130; \"shake\" and \"btn-primary\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed918626",
"title": "Remove Classes from an element with jQuery",
"difficulty": 3.07,
"description": [
"In the same way you can add classes to an element with jQuery's <code>addClass()</code> function, you can remove them with jQuery's <code>removeClass()</code> function.",
"Let's remove the \"btn-default\" class from all of our <code>button</code> elements.",
"Here's how you would do this for a specific button, add <code>$(\"#target2\").removeClass(\"btn-default\");</code>"
],
"tests": [
"assert($(\".btn-default\").length === 0, 'Remove the \"btn-default\" class from all of your <code>button</code> elements.')",
"assert(editor.match(/btn btn-default/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" $(\".well\").addClass(\"animated shake\");",
" $(\"#target3\").addClass(\"animated fadeOut\");",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed908826",
"title": "Change the CSS of an Element Using jQuery",
"difficulty": 3.08,
"description": [
"We can also change the CSS of an HTML element directly with jQuery.",
"Delete your jQuery selectors, leaving an empty \"document ready function\".",
"Select \"target1\" and change its color to red.",
"jQuery has a function called <code>.css()</code> that allows you to change the CSS of an element.",
"Here's how we would change its color to blue: <code>$(\"#target1\").css(\"color\", \"blue\");</code>",
"This is slightly different from a normal CSS declaration, because the CSS attribute and its value are in quotes, and separated with a comma instead of a colon."
],
"tests": [
"assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'Your \"target1\" element should have red text.')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" $(\".well\").addClass(\"animated shake\");",
" $(\"#target3\").addClass(\"animated fadeOut\");",
" $(\"button\").removeClass(\"btn-default\");",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed808826",
"title": "Disable an Element Using jQuery",
"difficulty": 3.09,
"description": [
"You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.",
"When you disable a button, it will become grayed-out and can no longer be clicked.",
"jQuery has a function called <code>.prop()</code> that allows you to adjust the properties of elements.",
"Here's how you would disable all buttons: <code>$('#button').prop('disabled', true);</code>",
"Disable only the \"target1\" button."
],
"tests": [
"assert($(\"#target1\") && $(\"#target1\").prop(\"disabled\"), 'Disable your \"target1\" button.')",
"assert($(\"#target2\") && !$(\"#target2\").prop(\"disabled\"), 'Do not disable any other buttons.')",
"assert(!editor.match(/disabled>/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed708826",
"title": "Remove an Element Using jQuery",
"difficulty": 3.10,
"description": [
"Now let's remove an HTML element from your page using jQuery.",
"jQuery has a function called <code>.remove()</code> that will remove an HTML element entirely."
],
"tests": [
"assert($(\"#target4\").length === 0, 'Use jQuery to remove your \"target4\" element from your page.')",
"assert(editor.match(/id=\"target4/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
" $(\"#target1\").prop(\"disabled\", true);",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed608826",
"title": "Use appendTo to Move Elements with jQuery",
"difficulty": 3.11,
"description": [
"Now let's try moving elements from one <code>div</code> to another.",
"jQuery has a function called <code>appendTo()</code> that allows you to select HTML elements and append them to another element.",
"For example, if we wanted to move \"target4\" from our right well to our left well, we would use <code>$(\"#target4\").appendTo(\"#left-well\");</code>",
"Move your \"target2\" element from your \"left-well\" to your \"right-well\"."
],
"tests": [
"assert($(\"#left-well\").children(\"#target2\").length === 0, 'Your \"target2\" element should not be inside your \"left-well\".')",
"assert($(\"#right-well\").children(\"#target2\").length > 0, 'Your \"target2\" element should be inside your \"right-well\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to move these elements.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
" $(\"#target1\").prop(\"disabled\", true);",
" $(\"#target4\").remove();",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed508826",
"title": "Clone an Element Using jQuery",
"difficulty": 3.12,
"description": [
"In addition to moving elements, you can also copy them from one place to another.",
"jQuery has a function called <code>clone()</code> that makes a copy of an element.",
"For example, if we wanted to copy \"target2\" from our \"left-well\" to our \"right-well\", we would use <code>$(\"#target2\").clone().appendTo(\"#right-well\");</code>",
"Did you notice this involves sticking two jQuery functions together? This is called \"function chaining\" and it's a really convenient way to get things done with jQuery.",
"Clone your \"target5\" element and append it to your \"left-well\"."
],
"tests": [
"assert($(\"#right-well\").children(\"#target5\").length > 0, 'Your \"target5\" element should be inside your \"right-well\".')",
"assert($(\"#left-well\").children(\"#target5\").length > 0, 'A copy of your \"target5\" element should also be inside your \"left-well\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to move these elements.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
" $(\"#target1\").prop(\"disabled\", true);",
" $(\"#target4\").remove();",
" $(\"#target2\").appendTo(\"#right-well\");",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed308826",
"title": "Target the Parent of an Element Using jQuery",
"difficulty": 3.13,
"description": [
"Every HTML elements has a \"parent\" element from which it \"inherits\" properties.",
"For example, your \"jQuery Playground\" <code>h3</code> element has the parent element of <code>&#60;div class=\"container-fluid\"&#62</code>, which itself has the parent <code>body</code>.",
"jQuery has a function called <code>parent()</code> that allows you to access the parent of whichever element you've selected.",
"Give the parent of the <code>#target1</code> element background-color of red.",
"Here's an example of how you would use the <code>parent()</code> function: <code>$(\"#left-well\").parent().css(\"background-color\", \"blue\")</code>"
],
"tests": [
"assert($(\"#left-well\").css(\"background-color\") === 'rgb(255, 0, 0)', 'Your \"target1\" element should have a red background.')",
"assert(editor.match(/\\.parent\\(\\)\\.css/g), 'You should use the <code>parent()</code> function to modify this element.')",
"assert(editor.match(/<div class=\"well\" id=\"left-well\">/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
" $(\"#target1\").prop(\"disabled\", true);",
" $(\"#target4\").remove();",
" $(\"#target2\").appendTo(\"#right-well\");",
" $(\"#target5\").clone().appendTo(\"#left-well\");",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed208826",
"title": "Target the Children of an Element Using jQuery",
"difficulty": 3.14,
"description": [
"Many HTML elements has a \"children\" element from which they \"inherits\" properties.",
"For example, every HTML element is a child of your <code>body</code> element, and your \"jQuery Playground\" <code>h3</code> element is a child of your <code>&#60;div class=\"container-fluid\"&#62</code> element.",
"jQuery has a function called <code>children()</code> that allows you to access the children of whichever element you've selected.",
"Give all the children of your <code>#right-well</code> element a color of green.",
"Here's an example of how you would use the <code>children()</code> function: <code>$(\"#left-well\").children().css(\"color\", \"blue\")</code>"
],
"tests": [
"assert($(\"#target6\").css(\"color\") === 'rgb(0, 128, 0)', 'Your \"target6\" element should have green text.')",
"assert(editor.match(/\\.children\\(\\)\\.css/g), 'You should use the <code>children&#40&#41</code> function to modify these elements.')",
"assert(editor.match(/<div class=\"well\" id=\"right-well\">/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
" $(\"#target1\").prop(\"disabled\", true);",
" $(\"#target4\").remove();",
" $(\"#target2\").appendTo(\"#right-well\");",
" $(\"#target5\").clone().appendTo(\"#left-well\");",
" $(\"#target1\").parent().css(\"background-color\", \"red\");",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed108826",
"title": "Target a Specific Child of an Element Using jQuery",
"difficulty": 3.15,
"description": [
"You've seen why id attributes are so convenient for targeting with jQuery selectors. But you won't always have such neat ids to work with.",
"Fortunately, jQuery has some other tricks for targeting the right elements.",
"jQuery has a function called <code>:nth-child()</code> that will allow you select the nth element of a certain class or element type.",
"Make the second child in each of your well elements bounce.",
"Here's how you would give the third element in each well bounce: <code>$(\".target:nth-child(3)\").addClass(\"animated bounce\");</code>"
],
"tests": [
"assert($(\".target:nth-child(2)\").hasClass(\"animated\") && $(\".target:nth-child(2)\").hasClass(\"bounce\"), 'The second element in each of your \"well\" elements should bounce.')",
"assert(editor.match(/\\:nth-child\\(/g), 'You should use the <code>&#58;nth-child&#40&#41</code> function to modify these elements.')",
"assert(editor.match(/<button class=\"btn btn-default target\" id=\"target2\">/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
" $(\"#target1\").prop(\"disabled\", true);",
" $(\"#target4\").remove();",
" $(\"#target2\").appendTo(\"#right-well\");",
" $(\"#target5\").clone().appendTo(\"#left-well\");",
" $(\"#target1\").parent().css(\"background-color\", \"red\");",
" $(\"#right-well\").children().css(\"color\", \"green\");",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed008826",
"title": "Target Even Numbered Elements Using jQuery",
"difficulty": 3.16,
"description": [
"You can also target all the even-numbered elements.",
"Note that computers start counting at zero, so technically, the first element is actually element number zero, which is an odd number.",
"So what a human would consider odd numbers: 1, 3, 5, 7 - a computer would actually consider odd numbers.",
"Here's how you would target all the odd-numbered elements with class \"target\" and give them classes: <code>$('.target:odd').addClass('animated shake');</code>",
"Try selecting all the even-numbered elements - that is, what your browser will consider even-numbered elements - and giving them the classes of \"animated\" and \"shake\"."
],
"tests": [
"assert($('.target:even').hasClass('animated') && $('.target:even').hasClass('shake'), 'All the \"target\" elements that computer considers even should shake.')",
"assert(editor.match(/\\:even/g), 'You should use the <code>&#58;even</code> function to modify these elements.')",
"assert(editor.match(/<button class=\\'btn btn-default target\\' id=\\'target3\\'>/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
" $(\"#target1\").prop(\"disabled\", true);",
" $(\"#target4\").remove();",
" $(\"#target2\").appendTo(\"#right-well\");",
" $(\"#target5\").clone().appendTo(\"#left-well\");",
" $(\"#target1\").parent().css(\"background-color\", \"red\");",
" $(\"#right-well\").children().css(\"color\", \"green\");",
" $(\"#left-well\").children().css(\"color\", \"green\");",
" $(\".target:nth-child(2)\").addClass(\"animated bounce\");",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aecb08826",
"title": "Use jQuery to Modify the Entire Page",
"difficulty": 3.20,
"description": [
"We're done playing with our jQuery playground. Let's tear it down!",
"jQuery can target the <code>body</code> element as well.",
"Here's how we would make the entire body fade out: <code> $('body').addClass('animated fadeOut')</code>",
"But let's do something more dramatic. Add the classes \"animated\" and \"hinge\" to your <code>body</code> element."
],
"tests": [
"assert($('body').hasClass('animated') && $('body').hasClass('hinge'), 'Add the classes \"animated\" and \"hinge\" to your <code>body</code> element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
" $(\"#target1\").prop(\"disabled\", true);",
" $(\"#target4\").remove();",
" $(\"#target2\").appendTo(\"#right-well\");",
" $(\"#target5\").clone().appendTo(\"#left-well\");",
" $(\"#target1\").parent().css(\"background-color\", \"red\");",
" $(\"#right-well\").children().css(\"color\", \"green\");",
" $(\"#left-well\").children().css(\"color\", \"green\");",
" $(\".target:nth-child(2)\").addClass(\"animated bounce\");",
" $(\".target:even\").addClass(\"animated shake\");",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"type": "waypoint",
"challengeType": 0
}
]
}

154
server/boot/challenge.js
View File

@ -1,6 +1,5 @@
import _ from 'lodash';
import moment from 'moment';
import R from 'ramda';
import { Observable } from 'rx';
import assign from 'object.assign';
import debugFactory from 'debug';
@ -19,28 +18,29 @@ import {
} from '../utils/middleware';
const debug = debugFactory('freecc:challenges');
var challengeMapWithNames = utils.getChallengeMapWithNames();
var challengeMapWithIds = utils.getChallengeMapWithIds();
var challengeMapWithDashedNames = utils.getChallengeMapWithDashedNames();
var challangesRegex = /^(bonfire|waypoint|zipline|basejump)/i;
const challengeMapWithNames = utils.getChallengeMapWithNames();
const challengeMapWithIds = utils.getChallengeMapWithIds();
const challengeMapWithDashedNames = utils.getChallengeMapWithDashedNames();
const challangesRegex = /^(bonfire|waypoint|zipline|basejump)/i;
const firstChallenge = 'waypoint-say-hello-to-html-elements';
var dasherize = utils.dasherize;
var unDasherize = utils.unDasherize;
var getMDNLinks = utils.getMDNLinks;
const dasherize = utils.dasherize;
const unDasherize = utils.unDasherize;
const getMDNLinks = utils.getMDNLinks;
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
function updateUserProgress(user, challengeId, completedChallenge) {
var alreadyCompleted = user.completedChallenges.some(({ id }) => {
const alreadyCompleted = user.completedChallenges.some(({ id }) => {
return id === challengeId;
});
if (alreadyCompleted) {
if (!alreadyCompleted) {
user.progressTimestamps.push({
timestamp: Date.now()
timestamp: Date.now(),
completedChallenge
});
}
user.completedChallenges.push(completedChallenge);
@ -50,8 +50,34 @@ function updateUserProgress(user, challengeId, completedChallenge) {
module.exports = function(app) {
const router = app.loopback.Router();
const challengesQuery = {
order: [
'order ASC',
'suborder ASC'
]
};
// challenge model
const Challenge = app.models.Challenge;
// challenge find query stream
const findChallenge$ = observeMethod(Challenge, 'find');
// create a stream of all the challenges
const challenge$ = findChallenge$(challengesQuery)
.flatMap(challenges => Observable.from(challenges))
.shareReplay();
// create a stream of challenge blocks
const blocks$ = challenge$
// group challenges by block | returns a stream of observables
.groupBy(challenge => challenge.block)
// turn block group stream into an array
.flatMap(block$ => block$.toArray())
// turn array into stream of object
.map(blockArray => ({
name: blockArray[0].block,
dashedName: dasherize(blockArray[0].block),
challenges: blockArray
}));
const User = app.models.User;
const userCount$ = observeMethod(User, 'count');
@ -104,36 +130,74 @@ module.exports = function(app) {
// serve index + 1 challenge
// otherwise increment block key and serve the first challenge in that block
// unless the next block is undefined, which means no next block
var nextChallengeName;
let nextChallengeName = firstChallenge;
var challengeId = String(req.user.currentChallenge.challengeId);
var challengeBlock = req.user.currentChallenge.challengeBlock;
// TODO(berks) fix index call here
var indexOfChallenge = challengeMapWithIds[challengeBlock]
.indexOf(challengeId);
const challengeId = req.user.currentChallenge.challengeId;
// find challenge
return challenge$
.filter(({ id }) => id === challengeId)
// now lets find the block it belongs to
.flatMap(challenge => {
// find the index of the block this challenge resides in
const blockIndex$ = blocks$
.findIndex(({ name }) => name === challenge.block);
if (indexOfChallenge + 1
< challengeMapWithIds[challengeBlock].length) {
nextChallengeName =
challengeMapWithDashedNames[challengeBlock][++indexOfChallenge];
} else if (typeof challengeMapWithIds[++challengeBlock] !== 'undefined') {
nextChallengeName = R.head(challengeMapWithDashedNames[challengeBlock]);
} else {
req.flash('errors', {
msg: 'It looks like you have finished all of our challenges.' +
' Great job! Now on to helping nonprofits!'
});
nextChallengeName = R.head(challengeMapWithDashedNames[0].challenges);
}
return blockIndex$
.flatMap(blockIndex => {
// could not find block?
if (blockIndex === -1) {
return Observable.throw(
'could not find challenge block for ' + challenge.block
);
}
const nextBlock$ = blocks$.elementAt(blockIndex + 1);
const firstChallengeOfNextBlock$ = nextBlock$
.map(block => block.challenges[0]);
saveUser(req.user)
return blocks$
.elementAt(blockIndex)
.flatMap(block => {
// find where our challenge lies in the block
const challengeIndex$ = Observable.from(block.challenges)
.findIndex(({ id }) => id === challengeId);
// grab next challenge in this block
return challengeIndex$
.map(index => {
return block.challenges[index + 1];
})
.flatMap(nextChallenge => {
if (!nextChallenge) {
return firstChallengeOfNextBlock$;
}
return Observable.just(nextChallenge);
});
});
});
})
.map(nextChallenge => {
nextChallengeName = nextChallenge.dashedName;
return nextChallengeName;
})
.flatMap(() => {
return saveUser(req.user);
})
.subscribe(
function() {},
next,
function() {
debug('next challengeName', nextChallengeName);
if (!nextChallengeName || nextChallengeName === firstChallenge) {
req.flash('errors', {
msg: 'It looks like you have finished all of our challenges.' +
' Great job! Now on to helping nonprofits!'
});
return res.redirect('/challenges/' + firstChallenge);
}
res.redirect('/challenges/' + nextChallengeName);
}
);
}
function returnCurrentChallenge(req, res, next) {
@ -141,7 +205,6 @@ module.exports = function(app) {
req.user.currentChallenge = {};
req.user.currentChallenge.challengeId = challengeMapWithIds['0'][0];
req.user.currentChallenge.challengeName = challengeMapWithNames['0'][0];
req.user.currentChallenge.challengeBlock = '0';
req.user.currentChallenge.dashedName =
challengeMapWithDashedNames['0'][0];
}
@ -194,18 +257,7 @@ module.exports = function(app) {
req.user.currentChallenge = {
challengeId: challenge.id,
challengeName: challenge.name,
dashedName: challenge.dashedName,
challengeBlock: R.head(R.flatten(Object.keys(challengeMapWithIds)
.map(function(key) {
return challengeMapWithIds[key]
.filter(function(elem) {
return elem === '' + challenge.id;
})
.map(function() {
return key;
});
})
))
dashedName: challenge.dashedName
};
}
@ -457,18 +509,6 @@ module.exports = function(app) {
const camperCount$ = userCount$()
.map(camperCount => numberWithCommas(camperCount));
const query = {
order: [
'order ASC',
'suborder ASC'
]
};
// create a stream of all the challenges
const challenge$ = findChallenge$(query)
.flatMap(challenges => Observable.from(challenges))
.shareReplay();
// create a stream of an array of all the challenge blocks
const blocks$ = challenge$
// mark challenge completed

38
server/boot/home.js
View File

@ -1,29 +1,29 @@
var defaultProfileImage =
require('../../common/utils/constantStrings.json').defaultProfileImage;
var message =
import { defaultProfileImage } from '../../common/utils/constantStrings.json';
const message =
'Learn to Code JavaScript and get a Coding Job by Helping Nonprofits';
module.exports = function(app) {
var router = app.loopback.Router();
router.get('/', index);
router.get('/', addDefaultImage, index);
app.use(router);
function index(req, res, next) {
if (req.user)
if (!req.user.picture) {
req.user.picture = defaultProfileImage;
req.user.save(function (err) {
if (err) {
return next(err);
}
res.render('get-started', {title: message});
});
} else {
res.render('resources/get-started', {title: message});
} else {
res.render('home', { title: message });
function addDefaultImage(req, res, next) {
if (!req.user || req.user.picture) {
return next();
}
req.user.picture = defaultProfileImage;
req.user.save(function(err) {
if (err) { return next(err); }
next();
});
}
function index(req, res) {
if (req.user) {
return res.render('resources/get-started', { title: message });
}
res.render('home', { title: message });
}
};